专栏名称: 郭霖
Android技术分享平台,每天都有优质技术文章推送。你还可以向公众号投稿,将自己总结的技术心得分享给大家。
目录
相关文章推荐
鸿洋  ·  Android anr排查之sp卡顿 ·  2 天前  
郭霖  ·  Android 16首个开发者预览版到来 ·  3 天前  
鸿洋  ·  再学安卓 - init进程 ·  3 天前  
51好读  ›  专栏  ›  郭霖

自定义View之颜色渐变折线图

郭霖  · 公众号  · android  · 2017-04-14 08:00

正文

今日科技快讯

近日,汽车之家宣布与湖南卫视达成独家战略合作。据悉,双方开辟了“台网互动”营销模式,将共同开展汽车广告业务,并联合推出品效合一的新型汽车类广告产品“芒果汽车码头”,帮助车企实现品牌宣传和营销效果二合一。

作者简介

又到周五啦,提前祝大家周末愉快!

本篇来自 smily 的投稿,分享了一个自定义折线图控件,效果很不错,感兴趣的朋友可以看一看。

smily 的博客地址:

http://blog.csdn.net/qq_20521573

正文

首先看下要实现的效果图,动态图片录制效果不好,渐变颜色没有完全显示出来,以至于下半部分渐变色变成了白色。

折线图的绘制主要有一下几个步骤。

一、定义 LineChartView类 并继承 View。

二、添加自定义属性。以在 value目录 下创建 attrs.xml 文件,文件中我们可以定义一些用到的属性,比如折线颜色、字体大小等属性。文件内容如下:

接下来在 LineChartView 的构造方法中解析自定义属性的值并做相应的处理。在构造方法里还初始化了 渐变颜色、折线数据的List集合 以及 初始化画笔 等操作代码如下:

另外,折现数据需要实体类,实体类可直接添加到 LineChartView 内部。如下:

三、初始化画笔和路径。代码如下:

四、重写 onLayout方法。在 onLayout方法 中获取控件的宽高、初始化原点坐标以及设置控件的背景。代码如下:

五、重写onDraw方法。在onDraw方法中完成折线图的绘制。代码如下:

折线图的绘制可以分三部分:1.绘制坐标轴 2.绘制View上的文字 3.绘制折线

1. 坐标轴绘制的是第一象限,即左下角的点为原点。绘制坐标轴代码如下:

2. 绘制文字,代码如下:

3. 绘制折线及渐变填充

六、折线图添加动画。

1. 首先需要计算动画的进度,因此在 LineChartView 中定义成员变量 mProgress,并添加以下方法:

2. 接下来设置动画效果,代码如下:

3. 添加开启动画的方法:

至此,折线图的绘制已经全部完成。最后还可以添加get() set()方法,暴露出属性接口,以供外部调用。代码就不再贴出来了。

七、使用LineChartView

1. 在布局文件中添加 LineChartView,可设置折线颜色、字体颜色、等属性,如下:

2. 在 Activity 中为 LineChartView 设置数据,也可以通过代码为其设置属性。

项目地址:

https://github.com/zhpanvip/LineChartView

更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号: