自定义控件之圆形进度条

好久没写博客了，也好久没看自定义控件了，前些日子有需求，所以就写了个小demo，其实博客应该早点写的，因为这个录屏和转换gif耽误事了。好了，先看看效果：

其实就是2个空心圆外加一个弧度画的半圆，就可实现此效果，实现步骤：
1.画外部大圆
2.画弧度
3.画里边圆
4.绘制文字
5.动画（其实就是每隔多长时间重新绘制一次）

好了直接上代码
获取半径和圆心坐标，判断下是宽高，以最短的为依据

绘制的方法

画各个部位的代码，没啥好讲的吧

画弧度，注意设置的渐变色

最后动画的处理

就是不断的重绘制就写完成了，很简单

 

注意这句话啊，

 mPaint.setStrokeCap(Paint.Cap.ROUND);//设置中断处为圆形

可以根据需求设置设置下

 

 

升级

既然完事了，那看看我们的需求，要比这个复杂一点点，上图

多绘制了，两条线，外加动画

画线注意角度的算法，数学忘了的，得自行脑补一下

角度是由3点钟方向开始的

topAngle = (float) (Math.PI*2/360*330);

画弧度也是由3点钟方向开始的

canvas.drawArc(oval, 90, currentvalue, false, mPaint);//false : 不画扇形弧边，只画弧长

最后动画的实现，还是不断的重绘制

当左边画完，右边才开始一点点的画

我把两个类发上去就可以直接用就行

添加控件到xml布局，在activity中直接调用：avaterProgressCycle.setProgress(230);

AvaterProgressCycleSave1 是只绘制圆的

AvaterProgressCycle 是升过级的

资源地址，点我下载：

https://download.csdn.net/download/kac930/10651279