在前面的文章中我们看了下如何通过自定义View简单实现了labelView的效果,其实实现起来非常的简单,就是根据用户传递来的参数来做不同的绘制而已。
但是我们实现的LabelView是不能动态更改的,一来是受制于这个Widget的功能,而来就是因为没有跟动画结合啊。
今天我们就通过自定义圆形进度条来讲下自定义View与动画结合的例子。
还是先来看下效果吧:
也可能是这个样子:
我们可以根据需要更改进度的背景颜色、进度条颜色以及进度圆环的宽细、文字的样式等等。
话不多说,还是来一步一步看看如何实现吧。
我们还是先来想想使用canvas的哪个方法来完成绘制。
首先,我们需要绘制一个圆形的背景啊,所以肯定要使用canvas.drawCircle方法。
其次,我们需要绘制圆上面的圆弧,所以就是canvas.drawArc方法了啊。
所以,我们先来绘制一个圆来看效果哈
然后,我们尝试在相同的位置再绘制一段圆弧
这样一来我们就基本上完成了我们最基本的圆形进度条哈
还是需要回到第一个问题,要有哪些功能,那些参数需要暴露出去
属性 | 作用 |
---|---|
_strokeWidth | 圆弧宽度 |
_backgroundColor | 进度条背景颜色 |
_foreColor | 进度条前景颜色 |
_startAngle | 进度开始的角度 |
_sweepAngle | 扫过的角度 |
_endAngle | 结束的角度 |
相信大家还能记得弧度和角度的换算方式,如果不记得话去找下初中数学老师叙叙旧哈。
可以看到,我们的CircleProgressBarPainter可以根据用户传入的参数来完成不同颜色、大小弧度的计算,圆以及圆弧的半径由Size宽和高最小值的二分之一决定。
这个一来我们就可以在调用的地方这样写
这样一来,只要我们更改这里的参数,这个圆弧的显示就会改变。但是却不能动态改变,要想要动态改变还是需要借助于动画的。
首先我们建立CurvedAnimation使用减速的插值器来模拟减速效果。然后结合Animation实现数值的变化
然后把变化的值处理后赋给CircleProgressBarPainter的_sweepAngle即可。
当然,在平时的使用中有时候我们是需要在中间显示文字提示的,比如百分比或者数值完成情况,这个时候我们就可以利用CustomPaint的child来实现。
当然,为了文字居中我们可以在外层包裹一个Center。
为了对动画的时长控制,同样的在构造方法可以选择传入动画的时长,为了控制文字是显示百分比或者数值比我们也可以选择传入传入参数,也可以选择性传入参数控制文字的style。
CircleProgressBar的构造方法:
可以看到只有SIze属性是必填参数,其他的参数都是可选的哦。
属性 | 作用 |
---|---|
size | 尺寸 |
backgroundColor | 进度条背景颜色 |
foreColor | 进度条前景颜色 |
duration | 动画时长 |
strokeWidth | 圆弧宽度 |
textStyle | 文字风格 |
startNumber | 开始的数字 |
maxNumber | 结束的数字 |
textPercent | 是否使用百分比 |
在调用的地方就非常的简单了
代码稍微有点才,阅读不便,就把完整代码放在github了。
完整代码:https://github.com/flyou/circle_progress_bar
到这里基本上就完成了这个圆形进度条效果,但是却也没有结束,因为确实还有许多很多继续改进的,比如进度条颜色随着动画改变,圆形内水波纹上升效果等等。
那么为什么不做啊?没有必要,主要还是(我懒!!!)让大家掌握如何使用。