看了爱哥的博客有一段时间,终于开始尝试自己写一些自定义View,虽然现在的还很菜,但希望有一天能成为爱哥这样的大神。
今天要实现的效果可能比较简单,首先给出效果图以及代码地址,毕竟以实战为主。代码地址https://github.com/xueweiyang/DefineView,本篇博客效果图,有理解错误的地方希望各位大神不吝赐教
参考大神博客如下
http://blog.csdn.net/column/details/androidcustomview.html
http://blog.csdn.net/column/details/wingscustomview.html
首先,需要至少实现如下构造器
如果不实现带参数AttributeSet的构造器,当使用此view时,可能会出现无法解析的错误
接下来我们观察view,发现由四周的圆弧和中间的文字构成,绘制圆弧,需要用到canvas的drawArc方法,
如上图第一种方法,最低需要api 21,两种方法之间其他的区别暂时没有研究,我采用了第二种,它有5个参数,含义分别为:1、绘制的矩形区域,2、初始角度,3、偏移角度,4、不知道怎么解释,现象是,为true时会画出中心点到两边的直线,为false时则只有圆弧,5、画笔
这里,有人可能不理解初始角度在哪,以及偏移角度的正负方向。以二维坐标系来说,x轴正轴是0,y轴正轴是-90。然后,看一下画笔的设置
圆弧除了有颜色的区域,还有中间的间隔,我的实现思路是,绘制一段区域后,跳过一定角度,然后再绘制下一段区域,这里,我们预先定义绘制区域和不绘制区域的比例,以及绘制区域的个数
并简单计算一下各自的角度
到这里,绘制view的初始状态,全部是白色的圆弧应该不难。但我们发现,随着底部seekbar的拖动,百分比改变后,圆弧的颜色会出现好几种,首先,我们看有两种颜色该如何实现,这里我们定义一个参数float mCurPer代表当前进度,代码如下
这里,startDegree代表初始角度,compareDegree表示当前进度所对应的角度,进行startDegree <270的判断是为了避免重复绘制。同时,在完成进度的区域内绘制一种颜色,未完成区域则绘制白色。这里一共绘制两种颜色,那么多种颜色该如何实现呢,如下
这里代码注释的挺清楚,逻辑也应该不难理解,其中mColors是一组自己定义的颜色,如果想展示的颜色过多会循环使用
至于中间文字的绘制则比较简单
到这里,基本的页面实现完成,最后,加上旋转的功能,旋转的功能,主要利用Matrix实现,关于矩阵的理解,可以参照爱哥的分析
首先添加触摸事件
然后根据触摸点离圆圈中心点的距离计算x,y的旋转距离
这里mRotateMax是最大距离,自行定义,接着根据计算的xy设置矩阵
最后就是在绘制之前应用矩阵了
此时,在屏幕上移动手指,view就是立体转动,好了,本篇博客到此画上句点,下篇再见。