iOS自定义progressView的实现

来源:互联网 发布:电脑超音速录软件 编辑:程序博客网 时间:2024/05/16 04:44

最近越来越多的iOS APP 中使用到了进度条这一控件,虽然苹果的UIKIT框架给我们提供了UIProgressView这一控件,但是提供的相应的API内容不是很丰富,开发中只能实现一些简单的效果,但是对于诸如设置圆角之类的功能用UIProgressView却较难实现,于是我想到了用UIView来代替UIProgressView控件,先来看下效果图
简单的自定义进度条
想要实现这一效果并不是很难,下面我们来看一下是如何实现的:
首先我们创建一个新的工程:progressViewDemo,然后按住快捷键:“command + N”新建继承自UIView的文件取名为:commenProgressView。
来到commenProgressView.h文件

#import <UIKit/UIKit.h>@interface commenProgressView : UIView//你还可以根据自己的需要创建其他的属性@property (strong,nonatomic) UIColor *progressBackGroundColor;       //背景色@property (strong,nonatomic) UIColor *progressTintColor;             //进度条颜色@property (assign,nonatomic) CGFloat progressValue;                  //进度条进度的值@property (assign,nonatomic) NSInteger progressCornerRadius;         //进度条圆角@property (assign,nonatomic) NSInteger progressBorderWidth;          //进度条边宽度+ (instancetype)initCommenProgressView;  //初始化构造方法          @end

来到commenProgressView.m文件

#import "commenProgressView.h"@interface commenProgressView ()@property (strong,nonatomic) UIView *firstView;@property (strong,nonatomic) UIView *secondView;@property (strong,nonatomic) UILabel *progressLabel;@end@implementation commenProgressView+ (instancetype)initCommenProgressView{    return [[self alloc]init];}- (UIView *)firstView{    if (_firstView == nil){        UIView *fView = [[UIView alloc]init];        fView.backgroundColor = _progressBackGroundColor;        fView.layer.masksToBounds = YES;        fView.layer.cornerRadius = _progressCornerRadius;        [self addSubview:fView];        _firstView = fView;    }    return _firstView;}- (UIView *)secondView{    if (_secondView == nil){        UIView *sView = [[UIView alloc]init];        sView.backgroundColor = _progressTintColor;        sView.layer.masksToBounds = YES;        sView.layer.cornerRadius = _progressCornerRadius;        [self.firstView addSubview:sView];        _secondView = sView;    }    return _secondView;}- (UILabel *)progressLabel{    if (_progressLabel == nil){        UILabel *lb = [[UILabel alloc]init];        lb.textAlignment = NSTextAlignmentRight;        CGFloat value = _progressValue * 100;        NSString *valueStr = [[NSString stringWithFormat:@"%.1f",value]stringByAppendingString:@"%"];        lb.text = valueStr;        lb.textColor = [UIColor whiteColor];        _progressLabel = lb;        [self insertSubview:lb aboveSubview:_secondView];    }    return _progressLabel;}- (void)layoutSubviews{    [super layoutSubviews];     self.secondView.frame = CGRectMake(0, 0, self.frame.size.width * _progressValue, self.frame.size.height);    self.firstView.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);    self.progressLabel.frame = CGRectMake(-10, 0, self.frame.size.width, self.frame.size.height);}#pragma mark - set&&get- (void)setProgressBackGroundColor:(UIColor *)progressBackGroundColor{    _progressBackGroundColor = progressBackGroundColor;}- (void)setProgressValue:(CGFloat)progressValue{    _progressValue = progressValue;}- (void)setProgressTintColor:(UIColor *)progressTintColor{    self.layer.borderColor = progressTintColor.CGColor;    _progressTintColor = progressTintColor;}- (void)setProgressCornerRadius:(NSInteger)progressCornerRadius{    _progressCornerRadius = progressCornerRadius;}- (void)setProgressBorderWidth:(NSInteger)progressBorderWidth{     self.layer.borderWidth = progressBorderWidth;    _progressBorderWidth = progressBorderWidth;}@end

至此我们就已经写好了自定义进度条了
现在我们看看怎么使用这个自定义控件
来到viewController.m文件的viewDidLoad方法中

[super viewDidLoad];    commenProgressView *progressView = [commenProgressView initCommenProgressView];    NSUInteger cHeight = 20; //高度    progressView.frame = CGRectMake(5, 60,[UIScreen mainScreen].bounds.size.width - 10 , cHeight);    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, progressView.frame.size.width, progressView.frame.size.height)];    label.textColor = [UIColor whiteColor];    CGFloat value = 0.30; //进度条的值    label.text = [NSString stringWithFormat:@"%f",value];    label.textAlignment = NSTextAlignmentRight;    progressView.progressValue = value;    progressView.progressBackGroundColor = [UIColor lightGrayColor];//如果设置的进度条的值<=0.3,那么显示红色,否则蓝色    if (value <= 0.3 ){        progressView.progressTintColor = [UIColor redColor];    }else{        progressView.progressTintColor = [UIColor blueColor];    }    progressView.progressCornerRadius = 0;    progressView.backgroundColor = [UIColor redColor];    progressView.layer.masksToBounds = YES;    progressView.layer.cornerRadius = cHeight/2;    [progressView insertSubview:label atIndex:0];//将label移动到最上面    [self.view addSubview:progressView];

本小控件已经上传至github github下载地址

0 0