Core Graphics是一个强大的底层API,在这篇教程中我们主要使用Core Graphics
来实现渐变效果,为了简单起见,我们采用线性渐变。线性渐变是从起点到终点颜色进行顺序渐变。教程在iOS8.1及Xcode6.1下编译通过。
打开Xcode,新建项目选择Single View Application,Product Name填写IOS8SwiftGradientsCoreGraphicsTutorial,Organization Name和Organization Identifier自行填写,选择Swift语言与iPhone设备。
项目增加一个新文件iOS->Source->Cocoa Touch Class
,创建gradientView类并且继承于UIView
打开Storyboard,选中View然后打开Identity Inspector
面板,将Custom Class
选择为gradientView
打开gradientView.swift文件,修改drawRect
方法如下:
// 1
var currentContext = UIGraphicsGetCurrentContext()
// 2
CGContextSaveGState(currentContext);
// 3
var colorSpace = CGColorSpaceCreateDeviceRGB()
// 4
var startColor = UIColor.redColor();
var startColorComponents = CGColorGetComponents(startColor.CGColor)
var endColor = UIColor.blueColor();
var endColorComponents = CGColorGetComponents(endColor.CGColor)
// 5
var colorComponents
= [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]]
// 6
var locations:[CGFloat] = [0.0, 1.0]
// 7
var gradient = CGGradientCreateWithColorComponents(colorSpace,&colorComponents,&locations,2)
var startPoint = CGPointMake(0, self.bounds.height)
var endPoint = CGPointMake(self.bounds.width, self.bounds.height)
// 8
CGContextDrawLinearGradient(currentContext,gradient,startPoint,endPoint, 0)
// 9
CGContextRestoreGState(currentContext);
1.CGContextRef
是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作
2.将graphical context
保持,这样稍后可以恢复
3.CGColorSpaceRef
这是一个色彩范围的容器,通常我们需要用到RGB色彩空间
4.定义了开始渐变与结束渐变点颜色,CGColor是一个低级别的Color Components
,调用CGColorGetcomponents
可以从CGColor
结构体中获取Color Components
5.创建颜色分量数组(数组包含CGFloat类型的红、绿、蓝和alpha值)
6.设置渐变位置
7.使用CGGradientCreateWithColorComponents
创建包含渐变的CGGradientRef
对象
8.调用CGContextDrawLinearGradient
绘制渐变
9.恢复Graphical Context
状态
编译运行项目后,效果如下
原文:http://www.ioscreator.com/tutorials/draw-gradients-core-graphics-ios8-swift