先上圖
111.gif
產(chǎn)品有一個(gè)這樣的需求，在下拉的過(guò)程中，@“PUNJECT”這幾個(gè)字從左到右發(fā)生顏色的變化。拿到這個(gè)需求先上網(wǎng)找了一下demo，看到了(http://www.lxweimin.com/p/93592bdc99c6) 這個(gè)文章，很有啟發(fā)，于是模仿大神的demo實(shí)現(xiàn)了一下效果。
這個(gè)需求類(lèi)似于歌詞的顯示
222.gif
思路
1、底部有一個(gè)backgroundLabel，中部有一個(gè)clipView，前部有一個(gè)foregroundLabel。
333.png
2、中間的clipView決定了前部foregroundLabel顯示的多少，代碼中設(shè)置了_clipView.clipsToBounds = YES; _clipView.backgroundColor = [UIColor clearColor];，如果大家把這兩句話分別注釋，就會(huì)看到非常明顯的效果。
設(shè)置 _clipView.backgroundColor = [UIColor greenColor]
444.gif
設(shè)置 _clipView.clipsToBounds = NO
你會(huì)發(fā)現(xiàn)字體顏色就是你設(shè)置的前景顏色。
這樣不難發(fā)現(xiàn)，因?yàn)?_clipView.clipsToBounds = YES，所以_clipView其余的部分顯示不出來(lái)，那么只要把foregroundLabel加到_clipView上再設(shè)置_clipView.clipsToBounds = YES。最后控制_clipView的寬度，就可以實(shí)現(xiàn)這個(gè)效果了。
代碼
自定義.h文件中
@property (nonatomic , assign)CGFloat clipWidth;//*進(jìn)度控制視圖*/
@property (nonatomic , assign)CGFloat progress;//*進(jìn)度（0，1）*/
@property (nonatomic , strong)UIColor *foregroundTextColor;//*前景字體顏色*/
@property (nonatomic , strong)UIColor *backgroundTextColor;//*背景字體顏色*/
@property (nonatomic , strong)NSString *text;//*內(nèi)容*/
@property (nonatomic , strong)UIFont *font;//*大小*/
自定義.m文件中
@property (nonatomic , strong)UILabel *foregroundLabel;//*前景l(fā)abel*/
@property (nonatomic , strong)UILabel *backgroundLabel;//*北京label*/
@property (nonatomic , strong)UIView *clipView; //*進(jìn)度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;
}
到此這個(gè)功能就實(shí)現(xiàn)了，現(xiàn)在我們把他加入到tableView中實(shí)現(xiàn)App需要的效果。
思路
設(shè)置tableView的尾視圖，通過(guò)UIScrollViewDelegate中的- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法來(lái)控制顏色的變化。
.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 ----------- 創(chuàng)建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 = @"測(cè)試測(cè)試";
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鏈接
