iOS 绘制渐变·基础篇

级别： ★★☆☆☆
标签：「iOS颜色渐变」「CAGradientLayer渐变」「CAGradientLayer」
作者： Xs·H
审校： QiShare团队

在最近的新项目中，设计师在一些UI元素上用了渐变色。比如，渐变色的按钮，如图1：

图1 渐变色按钮设计图

为了实现如上效果，可以让设计师1:1切图，设置为UIButton的Image属性（-setImage:forState:）;也可以让设计师切出1像素高的渐变图，设置backgroundImage属性填充背景（-setBackgroundImage:forState:）。

当然，我们也可以对控件的layer进行操作，使用CAGradientLayer实现渐变效果。

CAGradientLayer是CALayer的子类，负责处理渐变色的层结构。下面使用CAGradientLayer给一张图片增加渐变色遮罩，如图2。

实现效果：

图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所示：

图3 CALyaer坐标系

基于坐标系，可以通过 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)];

图5 红、绿、蓝按照指定的locations变化

从上方两图可知，在不设置locations属性时，相邻颜色会充分渐变，也就是说在渐变方向上，不会存在同色值的相邻像素；而在指定了locations之后，第n个颜色会在第n个location处与相邻的颜色开始渐变，此location之外的区域是纯色（比如图5最左边的红色和最右边的蓝色）。

---

另外：CAGradientLayer配合CAShapeLayer（iOS 绘制圆角中有用到）可以实现很多渐变的效果。比如：

• 渐变色进度条

  
  
  

  渐变色进度条

• 渐变色圆框

渐变色圆框

以上渐变色绘制实例的实现方式将在第二篇文章内介绍。
源码可从工程QiGradientLayer中获取。

---

了解更多iOS及相关新技术，请关注我们的公众号：

关注我们的途径有：
QiShare()
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
奇舞周刊279期