OC_CAGradientLayer实现创建渐变图层

简述

CAGradientLayer是CALayer的一个子类，可以用于生成简单的渐变图层。 我们知道，每个UIView的子类都有一个layer属性，之前的文章中应该也有说过这个layer决定了控件的视图显示，而其他属性则决定了控件的交互。

所以我们只需要使用CAGradientLayer生成一个渐变图层，然后在想要添加的控件上addSublayer即可完成渐变的添加。

实现过程

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
// 官方注释这个colors数组为一个CGColorRef objects数组，所以需要使用__bridge进行对象转换
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,  (__bridge id)[UIColor blueColor].CGColor];
// 颜色位置，类似于PS的渐变拾色器
gradientLayer.locations = @[@0, @1.0];
// 颜色方向 这样子就是水平从左到右
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1.0, 0);
// 渐变的frame
gradientLayer.frame = CGRectMake(0, 100, 300, 100);
[self.view.layer addSublayer:gradientLayer];
复制代码

代码的封装

由于这个代码敲起来太过冗余，我们可以把它分装成工具类。

• 将方向封装成一个枚举，设置成水平，垂直，上斜，下斜四种常用的种类。
• 外部传入 UIColor 对象，方向和 frame 返回一个 CAGradientLayer 对象即可
• location 属性个人不太常用在外部设置即可。

代码实例：

typedef NS_ENUM(NSUInteger, CAGradientLayerDirection) {
    CAGradientLayerDirectionHorizontal = 0,     // 水平
    CAGradientLayerDirectionVertical,           // 垂直
    CAGradientLayerDirectionObliquely,          // 斜上
    CAGradientLayerDirectionDowncast,           // 斜下
};
复制代码

以下为对应类方法：

+ (CAGradientLayer *)gradientLayerWithFrame:(CGRect)frame 
                                  fromColor:(UIColor)fromColor 
                                    toColor:(UIColor)toColor 
                                  direction:(CAGradientLayerDirection)direction{
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)fromColor.CGColor,  (__bridge id)toColor.CGColor];
    gradientLayer.locations = @[@0, @1.0];
    switch (direction) {
        case 0:
            gradientLayer.startPoint = CGPointMake(0, 0);
            gradientLayer.endPoint = CGPointMake(1.0, 0);
            break;
        case 1:
            gradientLayer.startPoint = CGPointMake(0, 0);
            gradientLayer.endPoint = CGPointMake(0, 1.0);
            break;
        case 2:
            gradientLayer.startPoint = CGPointMake(0, 1.0);
            gradientLayer.endPoint = CGPointMake(0, 0);
            break;
        case 3:
            gradientLayer.startPoint = CGPointMake(0, 0);
            gradientLayer.endPoint = CGPointMake(0, 1.0);
            break;
    }
    gradientLayer.frame = frame;
    return gradientLayer;
}
复制代码

调用实例：

UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0,0,200,50)];
[view.layer addSubLayer:[gradientLayerWithFrame:view.bounds 
                                      fromColor:[UIColor redColor] 
                                        toColor:[UIColor yellowColor] 
                                      direction:CAGradientLayerDirectionHorizontal]];
复制代码

这样就能在创建的 view 上添加一个从左到右从红到黄的水平的渐变底色。