日常记录工程中遇到的问题~~
先上效果图：
进度条效果图
简单解释：
一个进度条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模式下的内容：
1
2
大家根据图层排列可以很直接的看到。
重要点
重要的地方只有一点，最上层的label2要贴在显示进度的view上，而且要加上这句label2.layer.masksToBounds = YES; 让其超过父视图的部分不显示。
添加
clipsToBounds：是类View的属性，如果设置为yes，则不显示超出父View的部分
masksToBounds：是类CALayer的属性，如果设置为yes，则不显示超出父View layer的部分
他们是不同的名字，因为UIView和CALayer是不同的，有不同的术语与他们有联系的，但它们在功能上是等价的。如果你拆开clipsToBounds你会看到它只是调用masksToBounds
结束
OK完成了，有什么不对的、更好的地方欢迎交流指正，谢谢(*^▽^*)