先上圖
111.gif
產品有一個這樣的需求，在下拉的過程中，@“PUNJECT”這幾個字從左到右發生顏色的變化。拿到這個需求先上網找了一下demo，看到了(http://www.lxweimin.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鏈接
