iOS自定义组件-扇形进度视图

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是另开线程(可能是个队列，任务多的话短期内只做最后一次)去做。

以后的项目如果有需要的话就可以导入这个视图，方便的进行使用了。