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);// 渐变的framegradientLayer.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 上添加一个从左到右从红到黄的水平的渐变底色。