文章也同时在简书更新

引言

在上一篇文章中，我们提到会通过编写一个progressView来学习自定义控件，在学习了layoutSubviews之后，我们对于控件布局有了更多的了解。

在这篇文章中，我们将会讲解如何自己实现一个porgressView，并一次来说明如何继承UIView来编写自己的控件。

为了简便地讲解，我们的porgressView将会按照alert的形式来展现，请注意以下几个说明：

porgressView将会置顶于屏幕层级。
porgressView的frame大小将不需要用户改变，是一个固定的大小。
我们不使用layoutSubviews来控制布局，而是更加关注自定义控件如何实现功能。
关于如何在实际工程中使用layoutSubviews，可以参考我的另一个demo：BezierCurve_Test。
我已经将博客中所用到的demo都集成到了KMiOSLib，欢迎大家下载！

Demo地址

KMProgressViewDemo

Demo结构

Demo关键部分由KMUIKitMacro.h，KMProgressView类，以及ViewController类构成。

KMUIKitMacro.h是一些预定义的宏，用于简化代码。
KMProgressView类就是我们实现的自定义控件，后文会着重讲解它。
ViewController类结合storyboard使用我们的自定义控件。
KMProgressView的使用在头文件KMProgressView.h有详细的注释，大家可以快速掌握使用方法。
storyboard中有一段说明性的文字，其下是两个button，ProgressCompleted模拟网速良好，进度条成功执行完毕的情况。ProgressFailed则模拟中途失败停止的情况。

原理讲解

我们接下来着重讲解KMProgressView类的实现原理。

正如上文说明的，我们的KMProgressView是不需要用户控制其frame大小的，作为弹窗它的布局应该固定，只需要根据不同机型的屏幕尺寸做略微的调整。关于屏幕尺寸的获取，可以见KMUIKitMacro.h中的宏。

1
2
3

//获取屏幕 宽度、高度
#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我们使用了枚举来包含几种可能的情况：
1
2
3
4
5
6
7
typedef NS_ENUM(NSInteger, KMProgressViewState)
{
KMProgressView_Begin,
KMProgressView_Uploading,
KMProgressView_Completed,
KMProgressView_Failed
};

而在progress中，我们根据它的值来动态显示进度，progress是一个[0,1]区间的float值，0表明刚开始，1表示完成。这里我们还用到了layer的一些可动画属性，我们也会在今后关于layer的文章中具体讲解。

1 2	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
这是让控件消失，我们通过延迟执行来取得更好的动画效果。