iOS视图添加渐变方法？Swift4渐变代码其余行含义解析

Hi there! 既然你已经搞懂了渐变颜色定义的那一行，那我就针对常见的Swift 4渐变实现代码，给你拆解其余部分的作用，再讲讲iOS里给视图加渐变的几种常用方法。

示例代码及逐行解析 #

先贴一段最常见的Swift 4实现视图渐变的代码（应该和你找到的版本类似）：

1. let gradientLayer = CAGradientLayer()
2. gradientLayer.frame = view.bounds
3. gradientLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor] // 你已理解的行
4. gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
5. gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
6. gradientLayer.locations = [0.0, 1.0]
7. view.layer.insertSublayer(gradientLayer, at: 0)

下面是除第3行外的代码解析：

• 第1行：let gradientLayer = CAGradientLayer()
  创建一个CAGradientLayer实例，这是Core Animation框架专门用来实现渐变效果的图层，能直接添加到任意UIView的图层层级中，靠硬件加速渲染，性能很靠谱。
• 第2行：gradientLayer.frame = view.bounds
  把渐变图层的尺寸设置成和目标视图的边界完全一致，这样渐变才能覆盖整个视图。要是不设置frame，图层默认是零尺寸，你啥也看不到。
• 第4行：gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
  定义渐变的起始点，这里用的是单位坐标系：(0,0)对应图层左上角，(1,1)对应右下角。这行代码表示渐变从左上角开始。
• 第5行：gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
  定义渐变的结束点，这里设为右下角，所以渐变是对角线方向的。你可以调整这两个点改变渐变方向，比如设startPoint(0,0)、endPoint(0,1)就是垂直从上到下的渐变。
• 第6行：gradientLayer.locations = [0.0, 1.0]
  这个数组指定每个渐变颜色的位置，取值范围0到1。这里的[0.0,1.0]表示红色从图层最开头（0位置）开始，蓝色到图层最末尾（1位置）结束。要是想让红色占前30%，蓝色从30%开始到末尾，就写成[0.0, 0.3]。
• 第7行：view.layer.insertSublayer(gradientLayer, at: 0)
  把渐变图层插入到目标视图图层层级的最底部（at:0），这样渐变会作为背景，不会遮挡视图上的按钮、标签这些内容。要是用addSublayer，渐变图层会跑到最上层，挡住其他子视图，所以这里用insertSublayer更合理。

iOS中为视图添加渐变的常用方法 #

除了上面用CAGradientLayer的方法，还有两种实用方式：

1. 自定义UIView重写draw(_ rect:)方法 #

你可以创建一个UIView子类，用Core Graphics手动绘制渐变，适合需要精细控制绘制过程的场景：

class GradientView: UIView {
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }
        let colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let colorLocations: [CGFloat] = [0.0, 1.0]
        
        let gradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: colorLocations)!
        let startPoint = CGPoint(x: 0, y: 0)
        let endPoint = CGPoint(x: bounds.width, y: bounds.height)
        
        context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
    }
}

使用时直接把这个自定义视图加到界面上就行，不过性能上不如CAGradientLayer，毕竟Core Animation是硬件加速的。

2. SwiftUI中的渐变实现 #

如果用SwiftUI开发，实现渐变就更简单了，原生支持多种渐变类型：

struct GradientView: View {
    var body: some View {
        LinearGradient(
            gradient: Gradient(colors: [.red, .blue]),
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .edgesIgnoringSafeArea(.all)
    }
}

这种方式代码简洁，自动适配布局，不需要手动管理图层，很适合SwiftUI项目。

额外小提示 #

• 如果视图尺寸会变化（比如屏幕旋转、自适应布局），记得更新CAGradientLayer的frame，你可以在视图的layoutSubviews()方法里重新设置frame。
• 你可以在colors数组里添加更多颜色，实现多色渐变，比如[UIColor.red.cgColor, UIColor.yellow.cgColor, UIColor.blue.cgColor]。

内容的提问来源于stack exchange，提问作者Vijayachandran Chettiar