自定义蜘蛛网图 NetView

概述

写论文忙里偷闲写了一个蜘蛛网图的自定义view,支持多重属性 
有图才能有真相,下面先上图 

主要支持网格颜色、tag文本、覆盖区域颜色、透明度的属性改变,具体使用可以参见我的githubgithub完整下载,求互粉求start,下面主要介绍一下实现这个自定义控件的几个关键点。

确定属性

首先要知道这个控件需要暴露出哪些属性,创建一个attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="netView">
        <attr name="netColor" format="color"/>
        <attr name="overlayColor" format="color"/>
        <attr name="textColor" format="color"/>
        <attr name="overlayAlpha" format="integer"/>
        <attr name="tagsize" format="integer"/>
    </declare-styleable>

</resources>

通常是在自定义view中通过TypedArray 来获取属性,使用完后之后使用recycle回收,如果属性较多的话写到一个文件中会显得过于臃肿,个人比较喜欢单独用一个类来处理,然后在自定义view中new一个出来这样会显得很简洁,具体可以参见我的代码。

onDraw

  • 画网
  • 画文本
  • 画显示区域
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawNet(canvas);
        drawText(canvas);
        drawRegion(canvas);
    }

画网主要分为俩大部分,画六边形和径线, 
画六边形,每次先移动到圆心位置,A点,然后使用lineTo划线,如下图所示 
 
使用到了一点正余弦的数学知识比较简单。

画文本需要自己做一下微调,要是不微调就会出现下图所示的问题 
 
首先我们要获取字符的宽和高 
宽比较简单

 float dis = textPaint.measureText(titles[i]);//获取文本长度

高就涉及到一些比较生僻的api的使用

  Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
  float fontHeight = fontMetrics.descent - fontMetrics.ascent; //文字的高度

关于文字的更详细的讲解可以参阅android详细的文字操作

最后就是画区域同样是利用path的moveTo和lineTo俩个属性来画线,然后path.close闭合曲线比较简单

onMeasure

一开始没有写这个发现wrap_content无法使用(使用了还是出现match_parent的效果),这是由于使用wrap_content时候此时sepcMode为AT_MOST,此时宽高为parentSizes即父容器的大小,因此跟使用match_parent效果一致,做了如下改写:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize =MeasureSpec.getSize(widthMeasureSpec);
        int heighSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heighSpecSize =MeasureSpec.getSize(heightMeasureSpec);
        if(widthSpecMode==MeasureSpec.AT_MOST&&heighSpecMode==MeasureSpec.AT_MOST){
            setMeasuredDimension(200,200);
        }else if(widthSpecMode==MeasureSpec.AT_MOST){
            setMeasuredDimension(200,heighSpecSize);
        }else if(heighSpecMode==MeasureSpec.AT_MOST){
            setMeasuredDimension(widthSpecSize,200);

        }
    }

这样就可以避免这个问题了。 
总的看来这个自定义控件比较基础,看在码这么多字也不容易的份上,Git互粉点个start吧

转载:http://blog.csdn.net/xsf50717/article/details/50876518

时间: 2025-01-27 21:13:20

自定义蜘蛛网图 NetView的相关文章

JFreeChart蜘蛛网图添加刻度解决方案

JFreeChart是老牌Java开源图表工具包,也是JFreeReport的重要组成部分, 在业界被广泛应用.当然,这个工具包依然有很多美中不足,确切的说,有很多 具体的应用还需要我们拓展,比如蜘蛛网图(Spider Web)的刻度问题. 这是使用原来SpiderWebPlot时解决前的图示: 下面是使用MySpiderWebPlot解决后的图示:

WPF 自定义雷达图开发实例教程_C#教程

自定义雷达图表如下: 1.创建UserControl,名为"RadarChartControl" 前台: <UserControl x:Class="WpfApplication2.RadarChartControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/win

微信小程序分享支持自定义封面图

微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:"小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指纹识别等更多能力." 1.小程序可自定义分享配图 为帮助开发者给用户呈现最合适的小程序分享效果,我们开放了自定义分享卡片配图的能力.未定义分享卡片配图的,仍将由微信截屏,作为小程序分享卡片配图. 2.客服消息支持发送小程序卡片 为便于用户使用小程序服务,客服接口能力升级: 公众号及小程序客

自定义带图标的Preferecnce-----类ListPreference实现

   有时候系统提供给我们的preference并不能满足我们的要求,所以有的时候需要我们自定义Preferece,下面的例子就是我个人自定义的一个简单的带图标的Preference.               首先是xml布局文件,就是你想实现的布局. [java] view plaincopy <?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="

基于AGS JS开发自定义贴图图层

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩放(不是单纯的以气泡来展示).如果利用传统方案,则是我们首先将图片纠正赋予地理信息,然后根据地图级别进行切图,最后以瓦片的形式叠加至地图上,工作量是很大的.然而考虑到图片本身不会太大(小于3M),那么有没有其他方法来解决呢.这里我和大家一起探讨几种解决思路. 2.解决思路 2.1基于grahpic和

Android自定义View之实现理财类APP七日年化收益折线图效果

这段时间的自定义View学习,学会了绘制柱状图.绘制折线图.绘制进度控件,那我们今天就来聊聊另外一种自定义的View,这就是我们常见的七日年化收益折线图效果.先看看长什么样. 这就是效果图了,元素相对而言还是比较多的,这里有线.柱状图.文字.折线.点等等.看起来好像很复杂,但是呢,只要一步一步的实现,那还是可以达到这种效果的,之前我们说过的, 自定义View,就像是在photo shop里面画图,想要什么就画什么,我们可以有很多的画笔工具,也可以有很多的图层. 先看看我们这一次用到哪些变量. P

Android自定义View实现折线图效果_Android

下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo

新浪微博封面图可以自定义?新浪微博封面图自定义教程

第一步.如下图所示我们在电脑中登录到新浪微博之后再点击"设置"-"模板设置"然后打开进入. 第二步.在此之后我们找到"模版设置"-"个性化设置"在此点击"自定义"细节如下. 第三步.然后我们再点击"自定义"-"自定义封面图 "-"自定义封面图"在这里就可以自定义微博封面图. 除了可以自定义封面之外还可以自定义模板哦,在此就不介绍了.  

优酷“个人频道”自定义好看的页面布局

2月25日,中国第一视频网站优酷推出了业内第一个专属于用户自己的视频频道--"个人频道",这款全新的产品,是优酷UGC(用户生成内容)用户运营原创视频的最佳平台.通过它,原创视频作者们可以自定义功能模块,编辑和维护自己的视频平台,达到专业的视频发布.数据解读.频道运营和自我品牌推广等目的. 自定义好看的页面布局 全新的"个人频道"产品采用了扁平化的设计风格,整体视觉效果更加美观,浏览体验更顺畅.至此,优酷在不同终端和不同产品上实现了设计风格的最终统一. "