后续文章也同时在个人博客 http://kimihe.com/ 更新
引言
在上一篇文章中，我们提到会通过编写一个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中的宏。
//获取屏幕 宽度、高度
#define kSCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width) //!< UIScreen宽度
#define kSCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height) //!< UIScreen高度
初始化方法
-
init方法
//此处没有重写initWithFrame方法，因为progressView类似于alert，其大小不需要人为再去设定
- (instancetype)init
{
self = [super initWithFrame:CGRectMake(0, 0, kboxImageView_width, kboxImageView_height)];
if (self) {
[self drawProgressViewWithFrame:CGRectMake(0, 0, kboxImageView_width, kboxImageView_height)];
}
return self;
}
-
initWithColor:方法
- (instancetype)initWithCoverColor:(UIColor *)color
{
self = [super initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT)];
if (self) {
[self drawCoverView];
[self drawProgressViewWithFrame:CGRectMake(0, 0, kboxImageView_width, kboxImageView_height)];
}
return self;
}
我们在初始化方法中，并不需要重写initWithFrame:方法，在这里我提供了两种初始化方法：init和initWithCoverColor：。大家可以注意到，Apple原生的alert是带有深色透明背景的，可以突出alert的显示。我们这里也会采用，对于底色我将其称作遮罩(cover)。
知道了这一点，上述两种初始化方法等区别就很简单了，前者不带有遮罩，出现progressView后，用户仍旧可以点击到位于其下方的其他控件。而后者则会有一个遮罩，阻止用户的其他操作，并使progressView显得更加醒目。此外我们遮罩的颜色是可以在初始化时指定的。
遮罩
遮罩我们在drawCoverView方法中实现：
- (void)drawCoverView
{
//底色遮罩
_boxCoverView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT)];
_boxCoverView.backgroundColor = [UIColor blackColor];
_boxCoverView.alpha = 0.8;
[self insertSubview:_boxCoverView atIndex:0];
}
我们根据屏幕尺寸设置遮罩的frame，然后把它作为progressView的最底层。
图层绘制
具体的绘制我们在``方法中实现：
- (void)drawProgressViewWithFrame:(CGRect)frame
{
self.backgroundColor = [UIColor clearColor];
//背景图
_boxImageView = [[UIImageView alloc] initWithFrame:frame];
_boxImageView.backgroundColor = colorFromRGBA(0xFFFFFF, 1.0);
_boxImageView.image = [UIImage imageNamed:@"YourPicture"];
_boxImageView.center = self.center;
_boxImageView.layer.cornerRadius = 5.0;
_boxImageView.layer.masksToBounds = YES;
[self addSubview:_boxImageView];
//标题
_boxTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(kboxTitleLabel_x, kboxTitleLabel_y, kboxTitleLabel_width, kboxTitleLabel_height)];
_boxTitleLabel.textColor = colorFromRGBA(0x333333, 1.0);
_boxTitleLabel.font = [UIFont systemFontOfSize:18.0];
_boxTitleLabel.text = @"Your Title";
_boxTitleLabel.textAlignment = NSTextAlignmentCenter;
_boxTitleLabel.adjustsFontSizeToFitWidth = YES;
[_boxImageView addSubview:_boxTitleLabel];
//进度数值
_boxNumberlabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, kboxNumberlabel_width, kboxNumberlabel_height)];
_boxNumberlabel.textColor = [UIColor whiteColor];
_boxNumberlabel.backgroundColor = colorFromRGBA(0xFC5832, 1.0);
_boxNumberlabel.text = @"0%";
_boxNumberlabel.textAlignment = NSTextAlignmentCenter;
_boxNumberlabel.layer.cornerRadius = 4.0;
_boxNumberlabel.layer.masksToBounds = YES;
_boxNumberlabel.adjustsFontSizeToFitWidth = YES;
_boxNumberlabel.layer.anchorPoint = CGPointMake(0.5, 0.0);
_boxNumberlabel.layer.position = CGPointMake(kboxNumberlabel_x, kboxNumberlabel_y);
[_boxImageView addSubview:_boxNumberlabel];
//进度条
_boxProgressView = [[UIProgressView alloc] initWithFrame:CGRectMake(kboxProgressView_x, kboxProgressView_y, kboxProgressView_width, kboxProgressView_height)];
_boxProgressView.progressViewStyle = UIProgressViewStyleDefault;
_boxProgressView.trackTintColor = colorFromRGBA(0xCFCFCF, 1.0);
_boxProgressView.progressTintColor = colorFromRGBA(0xFC5832, 1.0);
[_boxImageView addSubview:_boxProgressView];
}
分别是UIImage，UILabel，UIProgressView的添加，其中对于UIImage背景我在这里进行了留白，大家可以替换成自己喜爱的图片。此外我们使用了RGBA的宏，同样也可以在KMUIKitMacro.h中找到。
//16进制表示RGBA
#define colorFromRGBA(rgbValue,trans) [UIColor \
colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 \
green:((float)((rgbValue & 0xFF00) >> 8))/255.0 \
blue:((float)(rgbValue & 0xFF))/255.0 alpha:trans]
你可能会注意到_boxNumberlabel中使用了一些layer相关的方法，关于layer，之后我也会结合BezierCurve_Test另开一篇文章详细讲解，这方面的知识还是比较繁琐的。
控件属性的设置
我们在KMProgressView.h中提供了几个设置其属性的方法。
-
- (void)setState:(KMProgressViewState)state withProgress:(float)progress
在该方法中我们根据状态state和进度progress来设置控件的样式，其中state我们使用了枚举来包含几种可能的情况：
typedef NS_ENUM(NSInteger, KMProgressViewState)
{
KMProgressView_Begin,
KMProgressView_Uploading,
KMProgressView_Completed,
KMProgressView_Failed
};
而在progress中，我们根据它的值来动态显示进度，progress是一个[0,1]区间的float值，0表明刚开始，1表示完成。这里我们还用到了layer的一些可动画属性，我们也会在今后关于layer的文章中具体讲解。
CGFloat offset = kboxProgressView_width * progress;
_boxNumberlabel.layer.position = CGPointMake(kboxNumberlabel_x + offset, kboxNumberlabel_y);
-
- (void)showAt:(UIView *)view
这是让控件显示的方法，我们通过self.center = view.window.center;让控件位于视图的最顶层。同时也使用了UIView的一些动画过度方法，它的使用很简单。 -
- (void)remove
这是让控件消失，我们通过延迟执行来取得更好的动画效果。
如何使用该控件
参考ViewController.m中的示例，结合模拟器运行，大家可以更好地理解该控件的使用场景。
总结
本文通过实际编写一个progressView来向大家演示如何自定义一个控件，涉及到了各种不同的小知识点，希望对大家有所帮助。更多绘图方面的知识，请继续关注后续的文章，感谢阅读！
