安卓自定义控件之仪表盘
目标
今天我们要实现的效果为:
这个一个仪表盘,我们需要设置它的1、圆弧的颜色2、指针的相应的转动。
思路:
简单:我们这个其实比较简单的实现思路就是让UI给我们表盘和指针切图,然后将表盘绘制在canvas上,然后用matrix承载指针,然后根据给定的值让指针滑动转动就好了。
正常:但是今天我们就不要切图了(毕竟没有ui帮我切)。看着效果还是简单,我们就自己绘制好了。
这里主要分几个步骤:
1、 绘制圆弧。
2、 绘制刻度。
3、 绘制指针。
实现:
开场习惯
1、 我们将控件的大小和padding的获取放在onSizeChanged里面。
2、 处理padding带来的宽高变化(padding需要自己处理)
3、 画布统一移动到需要的中心点再开始处理
控件大小获取
设定了这几个的半径之后就可以开始绘制了。
在得到了相关数据之后我们就可以开始绘制了。
绘制的步骤:
1、 init:就是讲画布移到中间的位置方便操作,一般移动到中心点,鉴于这次这个是圆这种对称图形,且我们只画一半,我们就不把画布移动到中心点了,且只要一般,我们就移动下。这个习惯是继承自GcsLoop大神(http://www.gcssloop.com/#blog)。
这里我们就垂直移动一个画布高度,向右移动:
2、 绘制圆弧
对于圆弧这种东西,没有专门的函数。因为比较单一,我们就用path来绘制就好了。
3、 绘制刻度
这里很关键的点就是我们通过旋转画布来绘制刻度,这个是比较简单的。
注意:
画布一层一层画布的叠加,当执行canvas.draw之后,我们就算完成了一层画布的绘制。然后就有一个新的画布开始作画。但是很重要的一点是画布给新的了,但是画布的状态是会一直延续的。比如我们移动画布到中心点,以后的画布状态就是中心点在
(getWidth() / 2, getHeight() - mPointRadius - 10)
比如这里我们要旋转画布去画刻度,旋转之后画布的状态是旋转后的状态。也就是反方向的180度。这样就妨碍我们后续的作画。对此,我们需要先保存画布移动前的状态,然后在旋转之后再恢复画布旋转之前的状态。
4、绘制指针
这里我们指针和效果图略有不同,我们画直线的时候直接画的是与圆的切线。这样比较简单嘛。转动角度的话我们还是通过旋转画布来实现。
这里是ondraw的最后一步。
到目前为止,我们就可以通过设置currentDegree来对指针进行为止设定了。
为了让指针旋转不太生硬,我们这里加入一个插值动画,让指针平滑地滑动到对应的角度:
然后把设置角度和arc颜色的方法暴露出去:
到现在就大功告成了。
需要注意的知识点:
1、 invalidate之后的整个画布都是新画布。以前画布的图案,和画布的状态全部重置。
2、 在对画布状体进行改变之前为了不影响后续绘制,都要save下。绘制玩再restore。
3、 那个绘制指针的时候,我设置了path.close。让path封闭的,然后封闭的结果是:
(mac没有下画图工具~将就看了)。