转载

通过 Core Graphics 绘制渐变颜色

作者：Arthur Knopper，原文链接，原文日期：2016-10-18

译者：冬瓜；校对：星夜暮晨；定稿： CMB

Core Graphics 是一套非常强大的底层 API 接口集合。在这篇教程中，我们将借助 Core Graphics 来创建渐变颜色。出于简便起见，我们将创建线性渐变 (linear gradients)。所谓线性渐变，是从一个点到另外一个点颜色过渡的描述。我们将会创建一个从左向右渐变的视图。该教程的实验环境是 Xcode 8 和 iOS 10。

首先打开 Xcode 创建一个 Single View Application 。

点击 Next 。输入 product name ，填写 IOS10DrawGradientsTutorial 然后将 Organization Name 和 Organization Identifier 这两项按照你的习惯来填写。将 Language 设置为 Swift ，并且确定 Devices 选项为 iPhone 。

通过 Core Graphics 绘制渐变颜色

在我们的工程中添加一个新文件。选择 iOS->Source->Cocoa Touch Class 。将新的 Class 命名为 GradientView 并且确定其继承自 UIView 类。

通过 Core Graphics 绘制渐变颜色

转到 storyboard 中，在 Document Outline 选择要编辑的视图，然后点击 Identity Inspector 选项卡，在 Custom Class 一栏中将 Class 选择 GradientView 。

通过 Core Graphics 绘制渐变颜色

打开文件 gradientView.swift ，并修改 drawRect 方法：

override func draw(_ rect: CGRect) {
    // 1
    guard let currentContext = UIGraphicsGetCurrentContext() else { return }
       
    // 2
    currentContext.saveGState()
        
    // 3
    let colorSpace = CGColorSpaceCreateDeviceRGB()
        
    // 4
    let startColor = UIColor.red
    guard let startColorComponents = startColor.cgColor.components else { return }
        
    let endColor = UIColor.blue
    guard let endColorComponents = endColor.cgColor.components else { return }
        
    // 5
    let colorComponents: [CGFloat]
            = [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]]
        
    // 6
    let locations:[CGFloat] = [0.0, 1.0]
        
    // 7
    guard let gradient = CGGradient(colorSpace: colorSpace,colorComponents: colorComponents,locations: locations,count: 2) else { return }
        
    let startPoint = CGPoint(x: 0, y: self.bounds.height)
    let endPoint = CGPoint(x: self.bounds.width,y: self.bounds.height)
        
    // 8
    currentContext.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: CGGradientDrawingOptions(rawValue: UInt32(0)))
        
    // 9
    currentContext.restoreGState()
}