先上图
111.gif
产品有一个这样的需求，在下拉的过程中，@“PUNJECT”这几个字从左到右发生颜色的变化。拿到这个需求先上网找了一下demo，看到了(http://www.jianshu.com/p/93592bdc99c6) 这个文章，很有启发，于是模仿大神的demo实现了一下效果。
这个需求类似于歌词的显示
222.gif
思路
1、底部有一个backgroundLabel，中部有一个clipView，前部有一个foregroundLabel。
333.png
2、中间的clipView决定了前部foregroundLabel显示的多少，代码中设置了_clipView.clipsToBounds = YES; _clipView.backgroundColor = [UIColor clearColor];，如果大家把这两句话分别注释，就会看到非常明显的效果。
设置 _clipView.backgroundColor = [UIColor greenColor]
444.gif
设置 _clipView.clipsToBounds = NO
你会发现字体颜色就是你设置的前景颜色。
这样不难发现，因为 _clipView.clipsToBounds = YES，所以_clipView其余的部分显示不出来，那么只要把foregroundLabel加到_clipView上再设置_clipView.clipsToBounds = YES。最后控制_clipView的宽度，就可以实现这个效果了。
代码
自定义.h文件中
@property (nonatomic , assign)CGFloat clipWidth;//*进度控制视图*/
@property (nonatomic , assign)CGFloat progress;//*进度（0，1）*/
@property (nonatomic , strong)UIColor *foregroundTextColor;//*前景字体颜色*/
@property (nonatomic , strong)UIColor *backgroundTextColor;//*背景字体颜色*/
@property (nonatomic , strong)NSString *text;//*内容*/
@property (nonatomic , strong)UIFont *font;//*大小*/
自定义.m文件中
@property (nonatomic , strong)UILabel *foregroundLabel;//*前景label*/
@property (nonatomic , strong)UILabel *backgroundLabel;//*北京label*/
@property (nonatomic , strong)UIView *clipView; //*进度view*/
#pragma mark ----------- 不支持此初始化方法 -----------
- (instancetype)init {
return nil;
}
- (instancetype)initWithCoder:(NSCoder *)aDecoder {
if (self = [super initWithCoder:aDecoder]) {
}
return self;
}
#pragma mark ----------- 初始化方法 -----------
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self addSubview:self.backgroundLabel];
[self addSubview:self.clipView];
[self.clipView addSubview:self.foregroundLabel];
}
return self;
}
#pragma mark ----------- set方法 -----------
- (void)setClipWidth:(CGFloat)clipWidth {
_clipWidth = clipWidth;
CGRect rect = self.clipView.frame;
rect.size.width = _clipWidth;
self.clipView.frame = rect;
}
- (void)setProgress:(CGFloat)progress {
_progress = progress;
CGRect rect = self.clipView.frame;
rect.size.width = self.frame.size.width * _progress;
self.clipView.frame = rect;
}
- (void)setForegroundTextColor:(UIColor *)foregroundTextColor {
_foregroundTextColor = foregroundTextColor;
self.foregroundLabel.textColor = _foregroundTextColor;
}
- (void)setBackgroundTextColor:(UIColor *)backgroundTextColor {
_backgroundTextColor = backgroundTextColor;
self.backgroundLabel.textColor = _backgroundTextColor;
}
- (void)setText:(NSString *)text {
_text = text;
self.foregroundLabel.text = _text;
self.backgroundLabel.text = _text;
}
- (void)setFont:(UIFont *)font {
_font = font;
self.foregroundLabel.font = _font;
self.backgroundLabel.font = _font;
}
#pragma mark ----------- 懒加载 -----------
- (UILabel *)foregroundLabel {
if (_foregroundLabel == nil) {
_foregroundLabel = [[UILabel alloc]initWithFrame:self.bounds];
_foregroundLabel.textAlignment = NSTextAlignmentCenter;
}
return _foregroundLabel;
}
- (UILabel *)backgroundLabel {
if (_backgroundLabel == nil) {
_backgroundLabel = [[UILabel alloc]initWithFrame:self.bounds];
_backgroundLabel.textAlignment = NSTextAlignmentCenter;
}
return _backgroundLabel;
}
- (UIView *)clipView {
if (_clipView == nil) {
_clipView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 0, self.bounds.size.height)];
_clipView.backgroundColor = [UIColor clearColor];
_clipView.clipsToBounds = NO;
}
return _clipView;
}
到此这个功能就实现了，现在我们把他加入到tableView中实现App需要的效果。
思路
设置tableView的尾视图，通过UIScrollViewDelegate中的- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法来控制颜色的变化。
.m文件中
//首先要引入头文件
#import "SSYProgressLabel.h" //**自定义label*/
@property (nonatomic , strong)UITableView *tableView;
@property (nonatomic , strong)SSYProgressLabel *footerLabel;//*footer*/
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self createUI];
}
#pragma mark ----------- 创建UI -----------
- (void)createUI {
[self.view addSubview:self.tableView];
}
#pragma mark ----------- UITableViewDelegate && UITableViewDataSource -----------
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (cell == nil) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
}
cell.textLabel.text = @"测试测试";
return cell;
}
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
return self.footerLabel;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 135;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// NSLog(@"%f",scrollView.contentOffset.y + 64);
if (scrollView.contentOffset.y + 64 > 0) {
self.footerLabel.clipWidth = (scrollView.contentOffset.y + 64) * 2;
}
}
#pragma mark ----------- 懒加载 -----------
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) style:UITableViewStyleGrouped];
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.backgroundColor = [UIColor whiteColor];
}
return _tableView;
}
- (SSYProgressLabel *)footerLabel {
if (!_footerLabel) {
_footerLabel = [[SSYProgressLabel alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, 135)];
_footerLabel.text = @"P U N J E C T";
_footerLabel.font = [UIFont systemFontOfSize:58];
_footerLabel.backgroundTextColor = [UIColor lightGrayColor];
_footerLabel.foregroundTextColor = [UIColor orangeColor];
}
return _footerLabel;
}
最终效果
555.gif
Github链接
网友评论