自定义View实践——环形进度条的设计与实现分析

需求分析与实现规划

引子

前段时间看到了豆瓣FM的音乐播放界面,有一个环形的进度条,非常的好看,于是想了想,为什么不自己做一个呢,于是就开始了自定义的过程
豆瓣FM的播放界面如下图:

功能分析

虽然功能比较简单,但是仍然需要仔细分析

1.图标外还有一圈圆圈,可以设置宽度
2.圆形进度条和进度条底部,可以设置宽度,颜色等
3.内部有一个圆形图片,可旋转

实现思路分析

1.可以设置宽度的圆圈

这个比较容易,直接在onDraw方法中使用canvas绘制即可,当然,在间距和半径的处理上需要仔细,控件本体其实还是一个长方形,我们需要选取较短的那一边作为直径,同时也要处理内部的padding

2.圆形进度条和进度条底部,可以设置宽度,颜色等

这个可以用canvas的drawArc方法来实现,通过绘制不同长度的弧形来达到显示进度的目的,但是需要注意的是,我们需要计算好弧形的半径以及开始和结束点。

3.内部有一个圆形图片,可旋转

这个需求可以分为三个部分,有图片,圆形,可以旋转

先说有图,很简单,canvas的drawbitmap方法绘制(canvas真是好东西)

再说圆形,这就比较复杂了,但是整体来说依然是使用canvas来对bitmap进行操作,会在代码中细说

最后是可以旋转,我们可以通过canvas的rotate方法来做。

效果展示

说了这么多,那么最后的效果是怎样的呢?毕竟空口无凭,在进入代码展示的环节之前还是看看最后的效果吧。
这是我自己做的一个定时锁屏的项目,地址是这里是地址
这是这个项目运行锁屏的时候的动图(大家都喜欢动图)

代码实现

下面开始展示代码,并加以分析

我们主要的工作是在一个自定义的view中的onDraw方法实现的,所以,我们需要有一个继承View类的子类,我们就叫他MyProgress吧

我们展示的就是这个MyProgress的onDraw方法

1.可以设置宽度的圆圈

很简单,我们只需要调用canvas的drawCircle方法即可,但是需要注意对padding的处理,因为不处理就会无效

2.圆形进度条和进度条底部,可以设置宽度,颜色等

这里需要注意的就是开始的角度和结束的角度了,为了达到进度条目的,所以我们需要随着业务状态的改变来改变这个值

3.内部有一个圆形图片,可旋转

这一段比较复杂,直接用代码解释

有了上面这些代码,我们自定义View的主体部分就完成了,当然还有一些辅助的部分,比如更新进度和选择角度的函数,设置一些颜色和宽度之类的参数等

完整代码

MyProgress

完整的工程,包括对这个自定义VIEW的应用例子可以参考我在GitHub上的工程地址在这里

几点总结

这个看似简单的自定义View的制作当中还是遇到了不少值得思考的问题,这也是为什么有这篇文章的原因

1.在处理圆形剪裁图片的时候,要注意剪裁的canvas所用的坐标是相对于处理图片的,而不是整体坐标
2.在绘制时,应该尽量减少重复的处理,比如圆形图片剪裁,一次就够了,如果次数过多,每次更新进度的时候就会去进行一次,导致整个View比较卡,进度不准确
3.对于自定义View中几个关键点的坐标,应该用一个比较简单易懂的表达式表示,否则做到后期会搞混淆,而陷入坐标的泥潭之中
4.某些看起来很厉害的效果只要合理分析,分步实现,并不会很难

u3coding
A software developer

Leave a Comment

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.