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。
在我们的工程中添加一个新文件。选择 iOS->Source->Cocoa Touch Class。将新的 Class 命名为 GradientView 并且确定其继承自 UIView 类。
转到 storyboard 中，在 Document Outline 选择要编辑的视图，然后点击 Identity Inspector 选项卡，在 Custom Class 一栏中将 Class 选择 GradientView 。
打开文件 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()
}
-
UIGraphicsGetCurrentContext得到了图形上下文 (graphical context)，这里可以当做一个新的画布。 - 图形上下文将被存储，以便于之后的存储操作。
-
CGColorSpace描述的是颜色的域值范围。大多情况下你会使用到 RGB 模式来描述颜色。 - 这里我们定义一个渐变样式的起始颜色和结束颜色。
CGColor对象是底层颜色接口的定义。这个接口方法会从CGColor中获取指定颜色。 - 在这个数组中，将 RGB 颜色分量和 alpha 值写入。
- 在此处可以定义各种颜色的相对位置。
-
CGGradient用来描述渐变信息。 - 这里渐变将沿纵轴 (vertical axis) 方向绘制。
- 存储图形上下文。
编译并运行我们的工程：
可以从我的 Github 上下载本篇文章的示例代码。
本文由 SwiftGG 翻译组翻译，已经获得作者翻译授权，最新文章请访问 http://swift.gg。
