[控件] ChangeColorLabel

ChangeColorLabel

效果

源码

//
//  ChangeColorLabel.h
//  YXMWeather
//
//  Created by XianMingYou on 15/6/22.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ChangeColorLabel : UIView

@property (nonatomic, strong) UIFont   *font;
@property (nonatomic, strong) UIColor  *textColor;
@property (nonatomic, strong) UIColor  *changedColor;


/**
 *  文本
 */
@property (nonatomic, strong) NSString *text;

/**
 *  设定文本后将会重新更新控件
 */
- (void)updateLabelView;

/**
 *  颜色百分比
 *
 *  @param percent 颜色的百分比
 */
- (void)colorPercent:(CGFloat)percent;

@end

//
//  ChangeColorLabel.m
//  YXMWeather
//
//  Created by XianMingYou on 15/6/22.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "ChangeColorLabel.h"
#import "AlphaView.h"
#import "UIView+SetRect.h"

@interface ChangeColorLabel ()
@property (nonatomic, strong) UILabel   *showLabel;
@property (nonatomic, strong) UILabel   *alphaLabel;
@property (nonatomic, strong) AlphaView *alphaView;
@end

@implementation ChangeColorLabel


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

- (void)initLabels {
    self.showLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    [self addSubview:self.showLabel];
    
    self.alphaLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    [self addSubview:self.alphaLabel];
    
    // 设定alphaView
    self.alphaView = [[AlphaView alloc] initWithFrame:CGRectZero];
    self.alphaView.colors     = @[[UIColor clearColor],
                                  [UIColor blackColor],
                                  [UIColor blackColor],
                                  [UIColor clearColor]];
    self.alphaView.locations  = @[@(0.f), @(0.05), @(0.95), @(1.f)];
    self.alphaView.startPoint = CGPointMake(0, 0);
    self.alphaView.endPoint   = CGPointMake(1, 0);
    self.alphaLabel.maskView = self.alphaView;
}

/**
 *  设定文本后将会重新更新控件
 */
- (void)updateLabelView {
    // 字体
    UIFont  *font      = (self.font == nil ? self.showLabel.font : self.font);
    
    // 设置文本 + 设置颜色 + 设置字体
    self.showLabel.text  = self.text;
    self.alphaLabel.text = self.text;
    self.showLabel.textColor  = self.textColor;
    self.alphaLabel.textColor = self.changedColor;
    self.showLabel.font  = font;
    self.alphaLabel.font = font;
    
    // 重置文本位置
    [self.showLabel sizeToFit];
    [self.alphaLabel sizeToFit];
    
    // 重新设置alphaView的frame值
    self.alphaView.width  = self.showLabel.width;
    self.alphaView.height = self.showLabel.height;
}

/**
 *  文本颜色百分比
 *
 *  @param percent 百分比
 */
- (void)colorPercent:(CGFloat)percent {
    if (percent <= 0) {
        self.alphaView.x = -self.showLabel.width;
    } else {
        self.alphaView.x = -self.showLabel.width + percent * self.showLabel.width;
    }
}

#pragma mark - 私有方法


@end

//
//  AlphaView.h
//  YXMWeather
//
//  Created by XianMingYou on 15/6/20.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <UIKit/UIKit.h>


@interface AlphaView : UIView

@property (nonatomic, strong) NSArray *colors;
@property (nonatomic, strong) NSArray *locations;
@property (nonatomic)         CGPoint  startPoint;
@property (nonatomic)         CGPoint  endPoint;

- (void)alphaType;

@end

//
//  AlphaView.m
//  YXMWeather
//
//  Created by XianMingYou on 15/6/20.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "AlphaView.h"

@interface AlphaView ()

{
    CAGradientLayer   *_gradientLayer;
}

@end

@implementation AlphaView

/**
 *  修改当前view的backupLayer为CAGradientLayer
 *
 *  @return CAGradientLayer类名字
 */
+ (Class)layerClass {
    return [CAGradientLayer class];
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _gradientLayer = (CAGradientLayer *)self.layer;
    }
    return self;
}

- (void)alphaType {
    self.colors     = @[[UIColor clearColor], [UIColor blackColor], [UIColor clearColor]];
    self.locations  = @[@(0.25), @(0.5), @(0.75)];
    self.startPoint = CGPointMake(0, 0);
    self.endPoint   = CGPointMake(1, 0);
}

/**
 *  重写setter,getter方法
 */
@synthesize colors = _colors;
- (void)setColors:(NSArray *)colors {
    _colors = colors;
    
    // 将color转换成CGColor
    NSMutableArray *cgColors = [NSMutableArray array];
    for (UIColor *tmp in colors) {
        id cgColor = (__bridge id)tmp.CGColor;
        [cgColors addObject:cgColor];
    }
    
    // 设置Colors
    _gradientLayer.colors = cgColors;
}
- (NSArray *)colors {
    return _colors;
}

@synthesize locations = _locations;
- (void)setLocations:(NSArray *)locations {
    _locations = locations;
    _gradientLayer.locations = _locations;
}
- (NSArray *)locations {
    return _locations;
}

@synthesize startPoint = _startPoint;
- (void)setStartPoint:(CGPoint)startPoint {
    _startPoint = startPoint;
    _gradientLayer.startPoint = startPoint;
}
- (CGPoint)startPoint {
    return _startPoint;
}

@synthesize endPoint = _endPoint;
- (void)setEndPoint:(CGPoint)endPoint {
    _endPoint = endPoint;
    _gradientLayer.endPoint = endPoint;
}
- (CGPoint)endPoint {
    return _endPoint;
}

@end

//
//  UIView+SetRect.h
//  TestPch
//
//  Created by YouXianMing on 14-9-26.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface UIView (SetRect)

// Frame
@property (nonatomic) CGPoint viewOrigin;
@property (nonatomic) CGSize  viewSize;

// Frame Origin
@property (nonatomic) CGFloat x;
@property (nonatomic) CGFloat y;

// Frame Size
@property (nonatomic) CGFloat width;
@property (nonatomic) CGFloat height;

// Frame Borders
@property (nonatomic) CGFloat top;
@property (nonatomic) CGFloat left;
@property (nonatomic) CGFloat bottom;
@property (nonatomic) CGFloat right;

// Center Point
#if !IS_IOS_DEVICE
@property (nonatomic) CGPoint center;
#endif
@property (nonatomic) CGFloat centerX;
@property (nonatomic) CGFloat centerY;

// Middle Point
@property (nonatomic, readonly) CGPoint middlePoint;
@property (nonatomic, readonly) CGFloat middleX;
@property (nonatomic, readonly) CGFloat middleY;
@end

//
//  UIView+SetRect.m
//  TestPch
//
//  Created by YouXianMing on 14-9-26.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "UIView+SetRect.h"

@implementation UIView (SetRect)

#pragma mark Frame

- (CGPoint)viewOrigin
{
    return self.frame.origin;
}

- (void)setViewOrigin:(CGPoint)newOrigin
{
    CGRect newFrame = self.frame;
    newFrame.origin = newOrigin;
    self.frame = newFrame;
}

- (CGSize)viewSize
{
    return self.frame.size;
}

- (void)setViewSize:(CGSize)newSize
{
    CGRect newFrame = self.frame;
    newFrame.size = newSize;
    self.frame = newFrame;
}


#pragma mark Frame Origin

- (CGFloat)x
{
    return self.frame.origin.x;
}

- (void)setX:(CGFloat)newX
{
    CGRect newFrame = self.frame;
    newFrame.origin.x = newX;
    self.frame = newFrame;
}

- (CGFloat)y
{
    return self.frame.origin.y;
}

- (void)setY:(CGFloat)newY
{
    CGRect newFrame = self.frame;
    newFrame.origin.y = newY;
    self.frame = newFrame;
}


#pragma mark Frame Size

- (CGFloat)height
{
    return self.frame.size.height;
}

- (void)setHeight:(CGFloat)newHeight
{
    CGRect newFrame = self.frame;
    newFrame.size.height = newHeight;
    self.frame = newFrame;
}

- (CGFloat)width
{
    return self.frame.size.width;
}

- (void)setWidth:(CGFloat)newWidth
{
    CGRect newFrame = self.frame;
    newFrame.size.width = newWidth;
    self.frame = newFrame;
}


#pragma mark Frame Borders

- (CGFloat)left
{
    return self.x;
}

- (void)setLeft:(CGFloat)left
{
    self.x = left;
}

- (CGFloat)right
{
    return self.frame.origin.x + self.frame.size.width;
}

- (void)setRight:(CGFloat)right
{
    self.x = right - self.width;
}

- (CGFloat)top
{
    return self.y;
}

- (void)setTop:(CGFloat)top
{
    self.y = top;
}

- (CGFloat)bottom
{
    return self.frame.origin.y + self.frame.size.height;
}

- (void)setBottom:(CGFloat)bottom
{
    self.y = bottom - self.height;
}


#pragma mark Center Point

#if !IS_IOS_DEVICE
- (CGPoint)center
{
    return CGPointMake(self.left + self.middleX, self.top + self.middleY);
}

- (void)setCenter:(CGPoint)newCenter
{
    self.left = newCenter.x - self.middleX;
    self.top = newCenter.y - self.middleY;
}
#endif

- (CGFloat)centerX
{
    return self.center.x;
}

- (void)setCenterX:(CGFloat)newCenterX
{
    self.center = CGPointMake(newCenterX, self.center.y);
}

- (CGFloat)centerY
{
    return self.center.y;
}

- (void)setCenterY:(CGFloat)newCenterY
{
    self.center = CGPointMake(self.center.x, newCenterY);
}


#pragma mark Middle Point

- (CGPoint)middlePoint
{
    return CGPointMake(self.middleX, self.middleY);
}

- (CGFloat)middleX
{
    return self.width / 2;
}

- (CGFloat)middleY
{
    return self.height / 2;
}

@end

使用

//
//  ViewController.m
//  ChangeColorLabel
//
//  Created by YouXianMing on 15/6/25.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "ChangeColorLabel.h"
#import "UIView+SetRect.h"

@interface ViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) ChangeColorLabel *label;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor blackColor];

    self.label                = [[ChangeColorLabel alloc] initWithFrame:CGRectMake(0, 0, 320, 70)];
    self.label.font           = [UIFont fontWithName:@"AppleSDGothicNeo-UltraLight" size:40.f];
    self.label.textColor      = [UIColor redColor];
    self.label.changedColor   = [UIColor purpleColor];
    self.label.text           = @"YouXianMing";
    self.label.center         = self.view.center;
    self.label.x             += 50;
    [self.label updateLabelView];
    [self.view addSubview:self.label];
    [self.label colorPercent:0];
    
    
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    scrollView.contentSize   = CGSizeMake(self.view.width * 2, self.view.height);
    scrollView.delegate      = self;
    [self.view addSubview:scrollView];
    
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat x       = scrollView.contentOffset.x;
    CGFloat percent = x / self.view.width;
    
    [self.label colorPercent:percent];
}

@end