返回 导航

Swift

hangge.com

Swift - CAGradientLayer使用详解1（实现渐变色背景）

作者：hangge | 2017-08-28 08:10
对于程序主视图 view 或者其它任意的 UIView，通过 backgroundColor 属性可以将其背景设置为指定颜色。但这种方式只能设置纯色背景。如果想要实现渐变色背景，一种方法是使用 Core Graphics 绘图框架来直接绘制填充，这个我之前也写过相关文章：Swift - Core Graphics绘图框架详解3（绘制渐变、填充渐变色）

本文介绍另一种更简单的方法：使用 CAGradientLayer 来实现渐变背景。

1，基本介绍

（1）CAGradientLayer 是 CALayer 的子类，可以理解为一个渐变层。如果使用的是透明的颜色，还可以做到透明渐变。
（2）CAGradientLayer 目前只能实现线性渐变，还不能实现放射性渐变。
（3）CAGradientLayer 对象最主要的就是如下 4 个属性：
  • colors：颜色数组，定义渐变层的各个颜色。
  • locations（可选）：决定每个渐变颜色的终止位置，这些值必须是递增的，数组的长度和 colors 的长度最好一致。
  • startPoint（可选）：渲染的起始位置，默认值是：[.5,0]（具体坐标系参考下图）
  • endPoint（可选）：渲染的终止位置，默认值是：[.5,1]（具体坐标系参考下图）

2，实现一个双色的渐变背景

（1）下面代码将我们主视图 View 的背景设置成从黄色过渡到橙色的渐变色（方向为默认的自上而下）
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //定义渐变的颜色（从黄色渐变到橙色）
        let topColor = UIColor(red: 0xfe/255, green: 0xd3/255, blue: 0x2f/255, alpha: 1)
        let buttomColor = UIColor(red: 0xfc/255, green: 0x68/255, blue: 0x20/255, alpha: 1)
        let gradientColors = [topColor.cgColor, buttomColor.cgColor]
        
        //定义每种颜色所在的位置
        let gradientLocations:[NSNumber] = [0.0, 1.0]
        
        //创建CAGradientLayer对象并设置参数
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations
        
        //设置其CAGradientLayer对象的frame，并插入view的layer
        gradientLayer.frame = self.view.frame
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

（2）效果图如下：

3，多种颜色的渐变

（1）下面代码再多添加几种颜色，实现类似彩虹的渐变效果。同时将渐变方向改成从左到右。 
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //定义渐变的颜色（7种彩虹色）
        let gradientColors = [UIColor.red.cgColor,
                              UIColor.orange.cgColor,
                              UIColor.yellow.cgColor,
                              UIColor.green.cgColor,
                              UIColor.cyan.cgColor,
                              UIColor.blue.cgColor,
                              UIColor.purple.cgColor]
        
        //定义每种颜色所在的位置
        let gradientLocations:[NSNumber] = [0.0, 0.17, 0.33, 0.5, 0.67, 0.83, 1.0]
        
        //创建CAGradientLayer对象并设置参数
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations
        
        //设置渲染的起始结束位置（横向渐变）
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0)
        
        //设置其CAGradientLayer对象的frame，并插入view的layer
        gradientLayer.frame = self.view.frame
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

（2）效果图如下：

4，扩展渐变类实现代码复用

（1）如果有多个 view 需要使用相同的渐变背景，每个视图都重复设置一遍会很麻烦。我们可以对 CAGradientLayer 类进行扩展，增加一个方法实现相关属性的自动设置。
import UIKit

extension CAGradientLayer {

    //获取彩虹渐变层
    func rainbowLayer() -> CAGradientLayer {
        //定义渐变的颜色（7种彩虹色）
        let gradientColors = [UIColor.red.cgColor,
                              UIColor.orange.cgColor,
                              UIColor.yellow.cgColor,
                              UIColor.green.cgColor,
                              UIColor.cyan.cgColor,
                              UIColor.blue.cgColor,
                              UIColor.purple.cgColor]
        
        //定义每种颜色所在的位置
        let gradientLocations:[NSNumber] = [0.0, 0.17, 0.33, 0.5, 0.67, 0.83, 1.0]
        
        //创建CAGradientLayer对象并设置参数
        self.colors = gradientColors
        self.locations = gradientLocations
        
        //设置渲染的起始结束位置（横向渐变）
        self.startPoint = CGPoint(x: 0, y: 0)
        self.endPoint = CGPoint(x: 1, y: 0)
        
        return self
    }
}

（2）使用时只需要调用该方法即可。 
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //获取彩虹渐变层
        let gradientLayer = CAGradientLayer().rainbowLayer()
        
        //设置彩虹渐变层的frame，并插入view的layer
        gradientLayer.frame = self.view.frame
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
评论

全部评论（2）

回到顶部