×
广告

如何实现一个自定义progressView

96
周鶏
2016.10.12 16:46* 字数 1351

后续文章也同时在个人博客 http://kimihe.com/ 更新

引言

在上一篇文章中,我们提到会通过编写一个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中的宏。

//获取屏幕 宽度、高度
#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:方法,在这里我提供了两种初始化方法:initinitWithCoverColor:。大家可以注意到,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来向大家演示如何自定义一个控件,涉及到了各种不同的小知识点,希望对大家有所帮助。更多绘图方面的知识,请继续关注后续的文章,感谢阅读!

微信公众号

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


微信公众号「洛斯里克的大书库」
KimiTalk
Web note ad 1