自定义蜘蛛网图 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吧
自定义蜘蛛网图 NetView的更多相关文章
- Android MPAndroidChart RadarChart (蜘蛛网图)
最近项目涉及到这个统计图形,经过实现,记录下,防止忘记了. 1.Github地址:MPAndroidChart 官方使用RadarChart demo:RadarChartActivitry 2.使用 ...
- 使用achartengine实现自定义折线图 ----附代码 调试OK
achartengine作为android开发中最常用的实现图标的开源框架,使用比较方便,参考官方文档谢了如下Demo,实现了自定义折线图. package edu.ustb.chart; impor ...
- 微信小程序分享支持自定义封面图
微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指 ...
- android 自定义折线图
看图: 比较简陋,主要是通过canvas画上去的: package com.example.democurvegraph.view; import java.util.ArrayList; impor ...
- jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)
banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
- 手动撸个Android雷达图(蜘蛛网图)RadarView
公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记 无图言虚空 简单分析一波,确定雷达图正几边形的--正五边形 int count=5,分为几个层数--4 层 in ...
- 关于CactiEZ自定义气象图的配置
作者:邓聪聪 主要目录: Weathermap主目录:/var/www/html/plugins/weathermap 图片目录(包含背景图标文件):/var/www/html/plugins/wea ...
- jmeter插件之自定义场景图(万能场景设计)
添加扩展插件 自定义线程组:jp@gc - Ultimate Thread Group 此线程组功能强大,可以实现多种场景设置,添加路径如图 参数含义解释 Start Threads Count:当前 ...
- Android中自定义环形图2
如图: 自定义属性,在values文件夹下创建 attrs.xml <?xml version="1.0" encoding="utf-8"?> & ...
随机推荐
- UNIX网络编程——ioctl 函数的用法详解
1.介绍 Linux网络程序与内核交互的方法是通过ioctl来实现的,ioctl与网络协议栈进行交互,可得到网络接口的信息,网卡设备的映射属性和配置网络接口.并且还能够查看,修改,删除ARP高速缓存的 ...
- Mac 下安装node.js
Node.js 简介 Node.js 是一个用Chrome's V8 JavaScript engine 构建的 JavaScript 运行时框架.Node.js 使用事件驱动.非阻塞式 I/O 模块 ...
- 会声会影小成果分享(那段青春岁月)——校学习部宣传视频制作&生日祝福
大二的时候在校学习部当副部长,没有给干事们带去好的工作经验和管理方法,我净在折腾新媒体方面的东西,很惭愧的说,那时候申请了一个微信的公众号(HGXXB1314),我那时候以为自己很叼,最后是发现自己装 ...
- memcached实战系列(七)理解Memcached的数据过期方式、新建过程、查找过程
1.1.1. 新建Item分配内存过程 1:快速定位slab classid,先计算Item长度 key键长+flag+suffix(16字节)+value值长+结构大小(32字节),如90byte ...
- jvm java虚拟机 新生代的配置
1.1.1.1. -Xmn参数 参数-Xmn1m可以用于设置新生代的大小.设置一个较大的新生代会影响老生代的大小,因为这两者的总和是一定的,这个系统参数对于系统性能以及GC行为有很大的影响,新生代一般 ...
- ubuntu安装水星MW150US无线网卡8188eu驱动
买了一个无线网卡插在ubuntu系统的电脑上,却不能识别出来.lsusb,可以看到下面的结果: Bus 002 Device 002: ID 0bda:8179 Realtek Semiconduct ...
- Android实战之ListView复选框
项目中有用到复选框的例子,啊啊......在网上查找有关资料,大多都是过于繁琐,所以自己决定写个这个方面的demo... 先给个效果图: 在ListView中添加复选框主要注意以下几个问题: 1.Li ...
- UNIX网络编程——UDP 中的外出接口的确定
已连接UDP套接字还可用来确定用于特定目的地的外出接口.这是由connect函数应用到UDP套接字时的一个副作用造成的:内核选择本地IP地址.这个本地IP地址通过为目的IP地址搜索路由表得到外出接口, ...
- 版本控制—使用Gradle自动管理应用程序版本
我们在开发App时,通常在项目的Release阶段我们需要设置应用的版本号和版本名称,也就是设置下面两个属性 versionCode versionName 版本号 其中versionCode的值是i ...
- (六十六)TableView内容超过一屏时滚动到屏幕底部的方法
假设数据放置在self.chatMessage数组内,只需要让tableView滚动到最后一条数据底部即可,调用scrollToRowAtIndexPath方法: [_tableView reload ...