iOS开发之自己封装一个progressHUD控件

看了几个轻量级的progress view

我觉得KVNProgress做的最漂亮吧

突然我想为什么我自己不封装一个控件

然后我研究了一下KVNProgress

KVN简单的界面是由storyboard搭建的

调用了最简单的showWithStatus，然后用Reveal查看了一下

然后看了Xcode的结构才发现，Loading View 本来是UIView，但是继承自UIImageView，所以在Reveal中显示UIImageView

再来看一下分层结构

父视图本来是UIView

 

然后我就开始模仿写一个

我是想用纯代码搭建界面，到时候调用的时候只需要使用一个类文件

 

我们先来看动画实现部分

刚开始看KVNProgress的时候我还以为他是使用图片搭建的界面

成功

 

失败

进度

 

查看了他的代码才发现，根本没有图片，全是用纯代码做的动画

用的是 贝塞尔曲线 做的。 又学到东西了。

/*其实刚开始我的思路是用图形上下文画个圈，然后用一个圆圈动画的遮罩那部分缺掉的部分

最后可以实现这个动画 但是封装起来效果达不到 所以实现我还是用贝塞尔曲线做 */

思路是用贝塞尔曲线画一个有缺口的圆，然后让这个有缺口的圆转动起来

 

创建一个带缺口的圆

创建一个路径 Center是中心，radius是半径，startAngle是开始的角度，endAngle是结束的角度，clockwise的顺时针

再把创建好的贝塞尔路径设置属性

设置颜色，strokeColor边缘的颜色，fillColor是中间填充的颜色，lineWidth是线段的粗细

参数我用的都是KVN的参数

然后再添加进去

这时候就创建了一个有缺口的圆了

这时候我们要让他开始转动

用CABasicAnimation

animationWithKeyPath:@"transform.rotation.z" 意思是让Z轴转动，即X和Y轴不转

rotationAniamtionDuration是动画的速度

toValue是变成什么值，repeatCount是重复的次数

 然后把动画添加到圆圈视图的layer

还有 我是用代码创建的界面 所以要记得把圆圈视图add到父视图

这样动画就做好了

剩下的几个动画也是用贝塞尔曲线做到，这里就不详细说了

 

说下封装

我觉得一个progress view的基本功能就是 要显示loading的时候 当然不能少文字说明

还有就是成功和失败的时候

所以我封装了这几种方法

 

然后创建单例

再创建一个方法

让所有类方法 通过单例调用这个实例方法

这个实例方法的作用就是判断需要哪一种动画

接下来就在每个方法里实现动画就行了

还有KVN没有提供视图的一些自定义方法

我这里也举一些例子

例如我要改变圆圈的线的粗细，或者颜色，控制动画的速度

这时候我定义类方法

再通过单例赋值就行了

这样就封装完了

我看了一下 这一个类才22KB 非常非常小 而且实现了这么多动画效果