转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595
注:本文由于是在学习过程中写的,存在大量问题(overdraw onDraw new对象),请读者们不要被误导!!解决办法见后面的博客。
起因
最近公司项目有需求需要用到轻量级图表如下图,是一些简单的扇形图,圆形图,折线图,虽然有好用的三方库MPChart
(教程地址http://blog.csdn.net/wingichoy/article/details/50428246),
但是过于庞大,像这样的简约的界面明显不合适,又因为许久没有坚持写博客,觉得自己很是堕落,深知自学不易,于是便想写一些博客来帮助后来像我一样的初学者,所以便想把这些效果写一个系列。其中包括:
1.圆形百分比图表
2.简易折线图图表
3.简易柱状图图表
效果图
说了这么多没有效果图还是废话,效果图如下:
预备知识
本篇博客的预备知识内容有:
1.自定义属性
2.自定义view
关于以上两点,可以查看 Hongyang大神的博客:自定义View(一)
知识点补充
如果你已经掌握了以上的基本知识,那么可以开始本篇博客的内容啦。但是还是有几点内容补充。
1.MeasureSpec对象包含了测量的模式和大小。他是一个32位的int值,其中高两位为测量的模式,低30位是测量的大小。采用位运算和运行效率有关。所以可以从一个MeasureSpec对象分别获取模式和值 如:
//获取模式 值为 EXACTLY AT_MOST UNSPECIFIED int specMode = MeasureSpec.getMode(measureSpec); //获取测量值 int specSize = MeasureSpec.getSize(measureSpec);
2.画扇形,调用drawArc()方法,其中第一个参数是圆所在的矩形,第二个参数是开始的弧度,值得主意的是,最顶的弧度是270度,而地图东方向的弧度为0.第三个参数是需要画的弧度,第四个参数是一个布尔值,表示是否连接圆心,画为扇形,第五个是Paint,即所需要的画笔。
canvas.drawArc(rect, 270, mEndAngle, true, sectorPaint);
现在开始吧
1.首先分析需求,我们的圆形进度总共分为三层,
最底层是一个大园形,作为底色。
第二层是一个扇形,大小跟底色一样,用来表示进度。
第三层是一个小圆形,比背景色小,用于实现弧线的效果。
2.新建一个类叫做CirclePercentView.java 他继承与View类重写他的构造函数,来获取他的自定义属性。