iOS自定义组件-扇形进度视图
前言:
平时候我们在用Apple设备下载App的时候,就会看见扇形的进度,为了增强更好的用户体验,本人心血来潮写了个自定义组件-扇形进度视图,废话不多说,开始介绍,具体API使用请访问Github:
https://github.com/sulioppa/UISectorProgressView.git
1.需求:
(1)根据使用者提供的进度值来显示扇形进度。
(2)当组件的进度值改变时,自行重绘。
(3)有一定的容错、报错能力。
2.依据需求提出的问题:
(1)通过什么媒介作为进度值?
(2)如何根据进度值的改变而重绘?
(3)进度值在什么范围合适?
3.依据需求产生的问题提供的解决方案:
(1)NSNumber
(2)键值监听(KVO)
(3)[0,1],小于0抛异常,大于1不重绘。
4.具体流程:
(1)创建一个类叫做UISectorProgressView,继承UIView
(2)为该类声明一个属性,NSNumber类型的。
(3)为该类声明可见的initWithFrame方法和startWithProgress方法。
(4)编写UISectorProgressView.m中的方法。
1)首先对类进行扩展。
定义宏,具体的解释在drawRect方法里会解释。
用户可以设置填充颜色的RGB(0~255)和透明度。
StartAngle和point是后面会用到的变量,避免重复的压栈出栈。
2)重写initWithFrame函数。
初始化组件的frame中的height,本人强制地让其等于其width.
并且对NSNumber类型的progress进行了初始化并对其进行了监听,默认颜色是黑色,不透明。
3)使用者需要调的函数。
如果传入的进度值是空,回报异常。
进度值越界,会报异常。
4)绘图函数
首先获取到画图要用的画笔。
如果值大于1或小于0的话,效果上表现的不重绘。
关于定义路径的知识:
CGContextAddArc是定义一段圆弧,第1个参数是画笔,2、3参数是圆心,本人默认为视图的中间,第4个参数是半径,本人也默认是视图一半的宽度,第5、6参数是开始角度和结束角度,第7个参数是表示是否逆时针。
在这里,逻辑上的坐标系和我们数学中的直角坐标系一样,3点钟方向是x正轴,12点方向是y正轴,角度是以距离x轴顺时针定义的,即:
一般iOS App的扇形进度以Y正轴为结尾,总是顺时针地减少剩余进度。
因此,所有的扇形均是以1.5π为结束角度,所以定义宏EndAngle为结束角度。
当进度值是0的时候,我们需要StartAngle=-0.5π。
当进度值是.25π的时候,我们需要StartAngle=0。
因此推断startAngle=2π*进度值-0.25π,所以定义了M_2PI和OffsetAngle。
经过这样一个函数我们就能定义了一个圆弧,包含开始点和结束点。
然后我们从结束点往圆心加一条线,最后封闭路径(系统为我们从圆心往开始点再引一条线),就构成了扇形进度。设置一下填充颜色、然后就可以画图了。
5)键值监听
对值进行区间判断。
在值改变了之后需要加至主队列,测试的时候是发现setNeedsDisplay是另开线程去做的,所以加入主线程可以及时的看到效果。
视图声明结束时取消监听。
6)Demo介绍
初始化一个UISectorProgressView的实例,位置和宽度自己定义,然后设置一下初始进度值进行进度显示。
7)进度控制
给按钮绑了个事件。
1s内更新10次。
效果如下图:
5.总结
学了一下绘图、KVO,了解到setNeedsDisplay是另开线程(可能是个队列,任务多的话短期内只做最后一次)去做。
以后的项目如果有需要的话就可以导入这个视图,方便的进行使用了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)