iOS 文字可根据进度改变颜色的进度条

作者: 莦婼姑娘 | 来源:发表于2019-11-18 15:32 被阅读0次

iOS 文字可根据进度改变颜色的进度条
2019-01-30
iOS 知识点1--环形颜色渐变进度条3
手写环形进度条
iOS 各种圆形进度条
渐变视图\文字
Android自定义view实现SeekBar
Vue el-progress进度条的线性渐变问题
UIProgressView 进度条
iOS仿Windows的进度条

日常记录工程中遇到的问题~~
先上效果图：

进度条效果图

简单解释：
一个进度条view，要求进度条上的文字需要适应进度条的背景颜色和进度的颜色，over。

思路：

自定义一个ProgressView
一个用于显示进度的view（imageView也可以）
一个适应背景色的label1
一个适应进度色的label2

添加顺序为：
ProgressView - label1 - view - label2
注意，label2要添加在view上，此时label2就可以根据view的进度显示一部分，然后label1显示的是view没有覆盖到的一部分，label1+label2就可以完整的显示全部要显示的内容了。

注意：
此方法算是一个取巧的方法，另外还有一种通过重新绘制label的方法也可以尝试。此篇只写了第一种方法，第二种方法有同学做过的欢迎来交流~~

简单粗暴的上代码：

因为是工程中用到的，工程中的显示进度view是一个渐变的图片，而且已经封装了下，需要的同学可以直接拿来用。

//.h文件

@interface ProgressWithColorTextProgressView : UIView
//进度显示的图片
@property (nonatomic, strong) UIImage *progressImage; 
//进度多少
@property (nonatomic, assign) CGFloat progressNum; 
//显示的文字
@property (nonatomic, copy) NSString *numLabelString;
 // 文字包含两个颜色，左边textColor1，右边textColor2
@property (nonatomic, strong) UIColor *textColor1;
@property (nonatomic, strong) UIColor *textColor2;
@end

//.m文件

@interface ProgressWithColorTextProgressView()

@property (nonatomic, strong) UIImageView *progressView;
@property (nonatomic, strong) UILabel *numLabel1;
@property (nonatomic, strong) UILabel *numLabel2;

@end

@implementation ProgressWithColorTextProgressView

-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        [self addUI];
    }
    return self;
}

-(void)addUI{
    /*
    自下到上的排列顺序为：
    self - numLabel1 - progressView - numLabel2
    */
    
    self.backgroundColor = [UIColor blackColor];
    
    _numLabel1 = [UILabel new];
    _numLabel1.textColor = [UIColor yellowColor];
    _numLabel1.font = UIFontMake(15);
    [self addSubview:_numLabel1];
    
    _progressView = [UIImageView new];
    _progressView.backgroundColor = [UIColor yellowColor];
    [self addSubview:_progressView];
    
    _numLabel2 = [UILabel new];
    _numLabel2.textColor = [UIColor blackColor];
    _numLabel2.font = UIFontMake(15);
    [_progressView addSubview:_numLabel2];
    
    self.layer.masksToBounds = YES; //超过父视图的不显示
    _progressView.clipsToBounds = YES;
    _numLabel2.layer.masksToBounds = YES;
    
}

-(void)setFrame:(CGRect)frame{
    [super setFrame:frame];

    self.layer.cornerRadius = frame.size.height/2.0;

    _progressView.layer.cornerRadius = frame.size.height/2.0;
    _numLabel1.frame = CGRectMake(self.frame.size.height/2.0, 0, self.frame.size.width-self.frame.size.height, self.frame.size.height);
    _progressView.frame = CGRectMake(0, 0, self.frame.size.width *_progressNum, self.frame.size.height);
    _numLabel2.frame = CGRectMake(self.frame.size.height/2.0, 0, self.frame.size.width-self.frame.size.height, self.frame.size.height);
    
}

-(void)setProgressImage:(UIImage *)progressImage{
    _progressImage = progressImage;
    _progressView.image = progressImage;
}
-(void)setProgressNum:(CGFloat)progressNum{
    _progressNum = progressNum;
    _progressView.frame = CGRectMake(0, 0, self.frame.size.width *_progressNum, self.frame.size.height);
}
-(void)setNumLabelString:(NSString *)numLabelString{
    _numLabelString = numLabelString;
    _numLabel1.text = _numLabelString;
    _numLabel2.text = _numLabelString;
}
-(void)setTextColor1:(UIColor *)textColor1{
    _textColor1 = textColor1;
    _numLabel1.textColor = _textColor1;
}
-(void)setTextColor2:(UIColor *)textColor2{
    _textColor2 = textColor2;
    _numLabel2.textColor = _textColor2;
}

@end

使用：

progressView1.backgroundColor、progressView1.progressImage、progressView1.textColor1、progressView1.textColor2 可以根据需要自己修改。

//使用

    ProgressWithColorTextProgressView *progressView1 = [[ProgressWithColorTextProgressView alloc] init];
    progressView1.frame = CGRectMake(20, 150, 320, 25);
    progressView1.textColor1 = [UIColor yellowColor];
    progressView1.textColor2 = [UIColor blackColor];
    progressView1.numLabelString = @"我是一个文字可根据进度改变颜色的进度条";
    progressView1.progressNum = 0/100.0;
    [self.view addSubview:progressView1];
    
    ProgressWithColorTextProgressView *progressView2 = [[ProgressWithColorTextProgressView alloc] init];
    progressView2.frame = CGRectMake(20, 225, 320, 25);
    progressView2.textColor1 = [UIColor yellowColor];
    progressView2.textColor2 = [UIColor blackColor];
    progressView2.numLabelString = @"我是一个文字可根据进度改变颜色的进度条";
    progressView2.progressNum = 50/100.0;
    [self.view addSubview:progressView2];
    
    ProgressWithColorTextProgressView *progressView3 = [[ProgressWithColorTextProgressView alloc] init];
    progressView3.frame = CGRectMake(20, 300, 320, 25);
    progressView3.textColor1 = [UIColor yellowColor];
    progressView3.textColor2 = [UIColor blackColor];
    progressView3.numLabelString = @"我是一个文字可根据进度改变颜色的进度条";
    progressView3.progressNum = 100/100.0;
    [self.view addSubview:progressView3];

好了，这样出来的效果就是文章开头的图片效果了。
具体的图层排列给大家看下debug模式下的内容：