级别： ★★☆☆☆
标签：「iOS颜色渐变」「CAGradientLayer渐变」「CAGradientLayer」
作者： Xs·H
审校： QiShare团队
在最近的新项目中，设计师在一些UI元素上用了渐变色。比如，渐变色的按钮，如图1：
为了实现如上效果，可以让设计师1:1切图，设置为UIButton的Image属性（-setImage:forState:）;也可以让设计师切出1像素高的渐变图，设置backgroundImage属性填充背景（-setBackgroundImage:forState:）。
当然，我们也可以对控件的layer进行操作，使用CAGradientLayer实现渐变效果。
CAGradientLayer是CALayer的子类，负责处理渐变色的层结构。下面使用CAGradientLayer给一张图片增加渐变色遮罩，如图2。
实现效果：
实现代码：
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"qr_qishare"]];
imageView.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 3);
imageView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self.view addSubview:imageView];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = imageView.bounds;
// 设置渐变颜色数组
gradientLayer.colors = @[(__bridge id)[[UIColor purpleColor] colorWithAlphaComponent:.7].CGColor, (__bridge id)[[UIColor blueColor] colorWithAlphaComponent:.7].CGColor];
// 设置渐变起始点
gradientLayer.startPoint = CGPointMake(.0, .0);
// 设置渐变结束点
gradientLayer.endPoint = CGPointMake(.0, 1.0);
// 设置渐变颜色分布区间，不设置则均匀分布
// gradientLayer.locations = @[@(0.0), @(1.0)];
// 设置渐变类型，不设置则按像素均匀变化
// gradientLayer.type = kCAGradientLayerAxial;// 按像素均匀变化
[imageView.layer addSublayer:gradientLayer];
PS: 代码中的
-colorWithAlphaComponent:方法与CAGradientLayer无直接关系，只是用来控制颜色的透明度，以实现透明效果。
CAGradientLayer可以通过colors属性设置多个有序渐变颜色，并在CALayer的坐标系内对渐变方向和渐变位置做调整。CALayer的坐标系用(x, y)表示，左上角为(0, 0)，右下角为(1, 1)，如图3所示：
基于坐标系，可以通过
startPoint和endPoint两个属性设置渐变方向。下面是一些常用的渐变方向实现方式：
// 从上至下（x相同，y控制方向）
gradientLayer.startPoint = CGPointMake(.0, .0);
gradientLayer.endPoint = CGPointMake(.0, 1.0);
// 从下至上（x相同，y控制方向）
gradientLayer.startPoint = CGPointMake(.0, 1.0);
gradientLayer.endPoint = CGPointMake(.0, .0);
// 从左至右（y相同，x控制方向）
gradientLayer.startPoint = CGPointMake(.0, .0);
gradientLayer.endPoint = CGPointMake(1.0, .0);
// 从右至左（y相同，x控制方向）
gradientLayer.startPoint = CGPointMake(1.0, .0);
gradientLayer.endPoint = CGPointMake(.0, .0);
// 从左上至右下（x和y控制方向）
gradientLayer.startPoint = CGPointMake(.0, .0);
gradientLayer.endPoint = CGPointMake(1.0, 1.0);
基于坐标系，可以通过locations属性设置颜色组的渐变位置。locations的元素个数需要和colors一致，指明第n个颜色在何处与相邻的颜色开始渐变。我们比较两个效果，见图4和图5：
-
红、绿、蓝均匀变化（不设置locations属性）
图4 红、绿、蓝均匀变化 - 红、绿、蓝按照指定的locations变化
gradientLayer.locations = @[@(0.25), @(.5), @(.75)];
从上方两图可知，在不设置locations属性时，相邻颜色会充分渐变，也就是说在渐变方向上，不会存在同色值的相邻像素；而在指定了locations之后，第n个颜色会在第n个location处与相邻的颜色开始渐变，此location之外的区域是纯色（比如图5最左边的红色和最右边的蓝色）。
另外：CAGradientLayer配合CAShapeLayer（iOS 绘制圆角中有用到）可以实现很多渐变的效果。比如：
-
渐变色进度条
渐变色进度条 渐变色圆框
以上渐变色绘制实例的实现方式将在第二篇文章内介绍。
源码可从工程QiGradientLayer中获取。
了解更多iOS及相关新技术，请关注我们的公众号：
关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章：
奇舞周刊279期
