话不多说,先看效果图。自定义View很简单
我这就说下大致思路,还不懂的去看git上的看代码。
1.上图中,出现图形最多的就是圆弧,这个很简单我们可以使用canvas.drawArc方法绘制圆弧
2.然后圆,中间的有透明度的圆,和指针底部无透明度的小圆。这个也简单使用canvas.drawCircle方法绘制,透明度可以用paint的alpha属性设置。这里有个细节,大家可以去看我的代码都有注释
3.在看下中间的,比较复杂的指针箭头。一种方式是让美工切一个,然后画出来。另一种用canvas的drawPath方法,绘制出来。我使用的是后一种,毕竟不是太复杂,而且还能练练手。
4.接下来就是渐变色了,我们可以SweepGradient类,设置到paint 的shader属性上即可,但如果要做到图中的效果,我们还要做些旋转,这个看代码就行了。
5.最后是动画。我们是用BounceInterpolator这个差值器实现,可以看到是有回弹效果的。小伙伴们也可以换成变得,比如先快后慢等。
下面是git地址,大致框架已经说了,省下的看代码更清楚
https://github.com/allenzhangp/colorfulpanel/blob/master/README.md
下面我再啰嗦下,可能有些小伙伴代码也看的费劲
(1)记住下面这张图,我们坐标的计算都是按照这图上的坐标系来写的。x和y已经画出来了横轴是x轴,纵轴是y轴。然后正东面表示0°,顺时针是正的度数。
然后在记住下面这个公式换算,计算在圆上点的坐标方程,如果圆心坐标是(x0,y0),圆的半径r
那么圆上angleRadians角度的坐标为
val angleRadians = realAngle * Math.PI /180 //换算成弧度,realAngle为角度,比如270°
x1 = r * Math.cos(angleRadians).toFloat() +x0
y1 = r * Math.sin(angleRadians).toFloat() +y0
这个公式在代码中多次用到,计算坐标很方便
(2)如果细心的小伙伴应该已经看到了,左右两边和最上面黄色的那个四分之一圆有空隙,不是连续的(谁让美工觉得更好看呢)!。
但是我们的整体框架已经定了,每个弧度都代表四分之一圆,有这个白色的小块就很麻烦。怎么办呢?
如果左边的白色空隙和红色圆弧一起表示四分之一,右边那块空白和下面绿色圆弧一起表示四分之一,最上面的黄色一块表示四分之一,这样处理后期算坐标会方便很多。
如果还有不清楚的,可以直接回复。