如何实现一个自定义progressView

文章也同时在简书更新

引言

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

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

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

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

Demo地址

KMProgressViewDemo

Demo结构

Demo关键部分由KMUIKitMacro.hKMProgressView类,以及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方法
1
2
3
4
5
6
7
8
9
//此处没有重写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:方法
1
2
3
4
5
6
7
8
9
- (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:方法,在这里我提供了两种初始化方法:initinitWithCoverColor:。大家可以注意到,Apple原生的alert是带有深色透明背景的,可以突出alert的显示。我们这里也会采用,对于底色我将其称作遮罩(cover)

知道了这一点,上述两种初始化方法等区别就很简单了,前者不带有遮罩,出现progressView后,用户仍旧可以点击到位于其下方的其他控件。而后者则会有一个遮罩,阻止用户的其他操作,并使progressView显得更加醒目。此外我们遮罩的颜色是可以在初始化时指定的。

遮罩

遮罩我们在drawCoverView方法中实现:

1
2
3
4
5
6
7
8
- (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的最底层。

图层绘制

具体的绘制我们在``方法中实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
- (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中找到。

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

如何使用该控件

参考ViewController.m中的示例,结合模拟器运行,大家可以更好地理解该控件的使用场景。
运行示意图

总结

本文通过实际编写一个progressView来向大家演示如何自定义一个控件,涉及到了各种不同的小知识点,希望对大家有所帮助。更多绘图方面的知识,请继续关注后续的文章,感谢阅读!

微信公众号

第一时间获取最新内容,欢迎关注微信公众号:「洛斯里克的大书库」。
微信公众号「洛斯里克的大书库」

周鶏🐣(Kimiko) wechat
拿起手机扫一扫,欢迎关注我的个人微信公众号:「洛斯里克的大书库」。
坚持原创技术分享,您的支持将鼓励我继续创作!