iOS 渐变色与Masonry布局结合

说到iOS实现一个控件的渐变色，我们就需要了解CAGradientLayer这个类。

CAGradientLayer简介

CAGradientLayer是用来生成两种或更多颜色平滑渐变的。用Core Graphics复制一个CAGradientLayer并将内容绘制到一个普通图层的寄宿图也是有可能的，但是CAGradientLayer的真正好处在于绘制使用了硬件加速。

属性说明

渐变色彩数组，这个数组成员接受CGColorRef类型的值（并不是从NSObject派生而来），所以我们要用通过bridge转换以确保编译正常。

@property(nullable, copy) NSArray *colors;

渐变颜色位置，一个浮点数值的数组（以NSNumber包装），数组大小和colors数组大小一定要相同，否则你将会得到一个空白的渐变，多重渐变需要使用。

@property(nullable, copy) NSArray<NSNumber *> *locations;

决定了渐变的方向，这两个参数是以单位坐标系进行的定义，所以左上角坐标是{0, 0}，右下角坐标是{1, 1}。

@property CGPoint startPoint;
@property CGPoint endPoint;

将绘制的渐变类型。 目前唯一允许值为“轴”（默认值）可以忽略。

@property(copy) NSString *type;

基础渐变

简单的两种颜色的对角线渐变

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.containerView = [[UIView alloc] init];
    [self.view addSubview:self.containerView];
    [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.centerX.equalTo(self.view);
        make.centerY.equalTo(self.view).offset(-100);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    
    [self.containerView layoutIfNeeded]; // 重点
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.containerView.bounds;
    [self.containerView.layer addSublayer:gradientLayer];
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);
}

基础渐变

多重渐变

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.containerView = [[UIView alloc] init];
    [self.view addSubview:self.containerView];
    [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.centerX.equalTo(self.view);
        make.centerY.equalTo(self.view).offset(-100);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    
    [self.containerView layoutIfNeeded]; // 重点
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.containerView.bounds;
    [self.containerView.layer addSublayer:gradientLayer];
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id) [UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor];
    gradientLayer.locations = @[@0.0, @0.25, @0.5];
    
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);
}

多重渐变