如何使用 CAGradientLayer 创建渐变色

原文:How to create gradient color using CAGradientLayer @Swift Development Center

CAGradientLayer 类定义在 QuartzCore 框架下,它继承自 CALayer。为了应用渐变色,你只需要写四行代码即可。

swift 复制代码
let gradientLayer = CAGradientLayer() // 1
gradientLayer.frame = self.view.bounds // 2
gradientLayer.colors = [UIColor.magenta.cgColor, UIColor.black.cgColor] // 3
self.view.layer.addSublayer(gradientLayer) // 4
  1. 创建一个 CAGradientLayer 对象的实例。
  2. 给这个图层设置一个位置和尺寸,在我们的例子中,设置了视图的尺寸。
  3. 渐变色属性接受一个 CGColor 类型的数组,否则将无法使用。你必须提供至少两个 CGColor
  4. 将此渐变层作为子层添加到视图层中。

渐变色位置

Locations 属性接受一个 NSNumber 类型的数组。使用该属性我们可以改变渐变色的位置,默认值为 [0, 1],即从顶部开始到底部结束。0 是上,1 是下,这意味着它只接受 01 之间的值。默认情况下,位置的方向是从上往下。

swift 复制代码
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.bounds
gradientLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
gradientLayer.locations = [0.0, 1.0];
self.view.layer.addSublayer(gradientLayer)

对于第一张图片,我们使用下面的代码来定位:

swift 复制代码
gradientLayer.locations = [0.0, 1.0]

对于第二张图片,我们使用下面的代码来定位:

swift 复制代码
gradientLayer.locations = [0.6, 1.0]

在上面的图片中,第一张图片的默认颜色位置是 [0.0, 1.0],而第二张图片的颜色位置是 [0.6, 1.0],即从顶部的 0.6 开始。在图片中,你可以清楚地看到颜色是如何随着给定的位置而变化的。

渐变色方向

如上图所示,默认的渐变色方向是从上到下。CAGradientLayer 有两个属性 startPointendPoint,利用这个点我们可以改变渐变色的方向,比如从上到下、从下到上、从左到右、从右到左。在进行下一步之前,我们首先要了解坐标系。请看下图。左上角从 (0, 0) 开始,右上角是 (1, 0)...

从上往下

swift 复制代码
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)

从下往上

swift 复制代码
gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)

从左往右

swift 复制代码
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

从右往左

swift 复制代码
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.5)

CAGradientLayer 的 UIView 扩展

最后使用下面的 UIView 扩展来绘制渐变色,只需编写一行代码。

swift 复制代码
extension UIView {
    enum Direction: Int {
        case topToBottom = 0
        case bottomToTop
        case leftToRight
        case rightToLeft
    }
    
    func applyGradient(colors: [Any]?, locations: [NSNumber]? = [0.1, 1.0], direction: Direction = .topToBottom) {
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds
        gradientLayer.colors = colors
        gradientLayer.locations = locations
        
        switch direction {
        case .topToBottom:
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
            
        case .bottomToTop:
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
            
        case .leftToRight:
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
            
        case .rightToLeft:
            gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
            gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.5)
        }
        
        self.layer.addSublayer(gradientLayer)
    }
}

现在,为了在任何视图上绘制渐变色,只需写下下面一行代码,你的渐变色就实现了:

swift 复制代码
self.view.applyGradient(colors: [UIColor.red.cgColor, UIColor.blue.cgColor],
                                locations: [0.0, 1.0],
                                direction: .topToBottom)

你可以从 GitHub 下载源代码。

相关推荐
veteranJayBrother4 天前
uniapp实现书架
微信小程序·uni-app·app·书架
胡西风_foxww6 天前
高考相关 APP 案例分享
算法·app·志愿·高考
YesPMP259 天前
短剧小程序,打造专属短剧观看平台
小程序·app·html5·平台·短剧·影视
飞飞_圆代码22 天前
iOS安卓渠道归因分析在App推广矩阵中的场景应用
android·ios·app
Amd79422 天前
Nuxt.js 应用中的 app:resolve 事件钩子详解
中间件·app·生命周期·nuxt·插件·resolve·钩子
四川掌上时代科技有限公司23 天前
校园圈子论坛系统该如何搭建配置?可打包APP小程序H5源码交付支持二开
前端·游戏·小程序·uni-app·app·php
乌南竹1 个月前
原生 App 上架 Mac App Store 过程总结
app
wfh1321 个月前
国际 Android WPS Office v18.13 解锁版
app
YesPMP平台官方2 个月前
动动手指探索世界,旅游APP如何定制开发?
大数据·小程序·数据分析·app·旅游·软件开发
guanpinkeji2 个月前
加油卡APP定制搭建,让加油更便捷!
app·团队开发·软件开发·app开发·加油卡·加油卡app