自定义VIEW实践——仪表盘指针转动效果实现

最近正好看到仪表盘效果，想着自己写写正好熟悉熟悉自定义View，效果实现不难，本人水平有限，如有错误请指出会及时修改，效果图如下

一、onMeasure重写

    代码就不多解释了，重写onMeasure必备

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ceuHp7jC-1652694391860)(https://upload-images.jianshu.io/upload_images/13905016-2aacdae5207dc582.png)]

二、onDraw图形绘制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QkKJmgy5-1652694391863)(https://upload-images.jianshu.io/upload_images/13905016-2350cafe04b0e9c9.png)]

内外中三个图形绘制都是以View的中心点为圆心绘制，只不过是绘制三个同一圆心半径不同的圆形

1、绘制最外层图形

用到的是canvas.drawArc(RectF，startAngle，sweepAngle，useCenter，Paint)方法

第一个参数：RectF  作用：定义的圆弧的形状和大小范围

第二个参数：float startAngle  作用：设置圆弧从某个角度来顺时针绘制的

第三个参数：float sweepAngle 作用：设置圆弧扫过的角度

第四个参数：boolean useCenter 作用： 圆弧在绘制的时候是否经过圆形

第五个参数：画笔

绘制代码看下图

这样一来最外层图形绘制完成

3、绘制中间一层图形

思路：如上图中，中间层的图形是一段一段直线，所以使用canvas.drawArc()方法就不方便了，可以采用canvas.drawLine()方法，然后把画布进行旋转达到倾斜直线的效果

红线标注的地方代码是实现的效果图中跟随指针移动直线变蓝色的效果

4、绘制最内侧图形

思路：跟中间图形一样都是一段一段的直线，所以实现逻辑都一样，只不过是画布旋转的角度不一样了，代码如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXTn9ZTP-1652694391869)(https://upload-images.jianshu.io/upload_images/13905016-5cc2b59b67375859.png)]

5、绘制指针圆球

思路：这个就比较简单了，就是以View的中心点为圆心绘制实心圆，没难点直接上代码了

6、绘制指针

思路：就是绘制两个点的直线，需要注意的是绘制的这两个点是圆心到圆上一点的直线，所以要先求出圆上点的坐标才能绘制直线，已知圆心坐标，半径，角度，可以根据之前学的数学中的三角函数可以求出原点坐标

已知半径R，角度A，圆上任一点为（x1,y1）

x1 = x0 + r * cos( a )

y1 = y0 + r * sin( a )

由计算得出圆上点的坐标从而绘制指针

绘制全部完成

三、实现指针转动

思路：指针的转动可以通过不断的绘制指针达到移动的效果，如何不断地绘制指针呢，这就需要用到属性动画类ValueAnimator了

ValueAnimator:通过不断控制值的变化，在不断手动的赋给对象的属性，从而实现动画的效果

没有什么特别难点的地方，就是注意valueAnimator = ValueAnimator.ofInt(-2, angle); 中的数值控制就可以了

在Activity调用startAnimal方法就可以实现效果了

用随机数实现指针随机转动