文章也同时在简书更新
引言
在上一篇文章中,我们提到会通过编写一个progressView来学习自定义控件,在学习了layoutSubviews之后,我们对于控件布局有了更多的了解。
在这篇文章中,我们将会讲解如何自己实现一个porgressView,并一次来说明如何继承UIView来编写自己的控件。
为了简便地讲解,我们的porgressView将会按照alert的形式来展现,请注意以下几个说明:
- porgressView将会置顶于屏幕层级。
- porgressView的frame大小将不需要用户改变,是一个固定的大小。
- 我们不使用layoutSubviews来控制布局,而是更加关注自定义控件如何实现功能。
- 关于如何在实际工程中使用layoutSubviews,可以参考我的另一个demo:BezierCurve_Test。
- 我已经将博客中所用到的demo都集成到了KMiOSLib,欢迎大家下载!
Demo地址
Demo结构
Demo关键部分由KMUIKitMacro.h
,KMProgressView
类,以及ViewController
类构成。
KMUIKitMacro.h
是一些预定义的宏,用于简化代码。KMProgressView
类就是我们实现的自定义控件,后文会着重讲解它。ViewController
类结合storyboard使用我们的自定义控件。- KMProgressView的使用在头文件
KMProgressView.h
有详细的注释,大家可以快速掌握使用方法。 - storyboard中有一段说明性的文字,其下是两个button,ProgressCompleted模拟网速良好,进度条成功执行完毕的情况。ProgressFailed则模拟中途失败停止的情况。
原理讲解
我们接下来着重讲解KMProgressView
类的实现原理。
正如上文说明的,我们的KMProgressView是不需要用户控制其frame大小的,作为弹窗它的布局应该固定,只需要根据不同机型的屏幕尺寸做略微的调整。关于屏幕尺寸的获取,可以见KMUIKitMacro.h
中的宏。
初始化方法
init
方法
|
|
initWithColor:
方法
|
|
我们在初始化方法中,并不需要重写initWithFrame:
方法,在这里我提供了两种初始化方法:init
和initWithCoverColor:
。大家可以注意到,Apple原生的alert是带有深色透明背景的,可以突出alert的显示。我们这里也会采用,对于底色我将其称作遮罩(cover)。
知道了这一点,上述两种初始化方法等区别就很简单了,前者不带有遮罩,出现progressView后,用户仍旧可以点击到位于其下方的其他控件。而后者则会有一个遮罩,阻止用户的其他操作,并使progressView显得更加醒目。此外我们遮罩的颜色是可以在初始化时指定的。
遮罩
遮罩我们在drawCoverView
方法中实现:
我们根据屏幕尺寸设置遮罩的frame,然后把它作为progressView的最底层。
图层绘制
具体的绘制我们在``方法中实现:
分别是UIImage,UILabel,UIProgressView的添加,其中对于UIImage背景我在这里进行了留白,大家可以替换成自己喜爱的图片。此外我们使用了RGBA的宏,同样也可以在KMUIKitMacro.h
中找到。
你可能会注意到_boxNumberlabel中使用了一些layer相关的方法,关于layer,之后我也会结合BezierCurve_Test另开一篇文章详细讲解,这方面的知识还是比较繁琐的。
控件属性的设置
我们在KMProgressView.h
中提供了几个设置其属性的方法。
- (void)setState:(KMProgressViewState)state withProgress:(float)progress
在该方法中我们根据状态state和进度progress来设置控件的样式,其中state我们使用了枚举来包含几种可能的情况:1234567typedef NS_ENUM(NSInteger, KMProgressViewState){KMProgressView_Begin,KMProgressView_Uploading,KMProgressView_Completed,KMProgressView_Failed};
而在progress中,我们根据它的值来动态显示进度,progress是一个[0,1]区间的float值,0表明刚开始,1表示完成。这里我们还用到了layer的一些可动画属性,我们也会在今后关于layer的文章中具体讲解。
- (void)showAt:(UIView *)view
这是让控件显示的方法,我们通过self.center = view.window.center;
让控件位于视图的最顶层。同时也使用了UIView的一些动画过度方法,它的使用很简单。- (void)remove
这是让控件消失,我们通过延迟执行来取得更好的动画效果。
如何使用该控件
参考ViewController.m
中的示例,结合模拟器运行,大家可以更好地理解该控件的使用场景。
总结
本文通过实际编写一个progressView来向大家演示如何自定义一个控件,涉及到了各种不同的小知识点,希望对大家有所帮助。更多绘图方面的知识,请继续关注后续的文章,感谢阅读!
微信公众号
第一时间获取最新内容,欢迎关注微信公众号:「洛斯里克的大书库」。