Swift Control View,Label渐变颜色(源码)

一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。

要用frame约束方式

文章目录

使用

参数说明

参数说明:

colors: 颜色数组

locations:控制颜色过渡的位置

startPoint: 渐变起点

endPoint: 渐变终点

注意:颜色数组有3个颜色,控制颜色过渡的位置数组对应要有3个参数,渐变起点就是颜色于颜色过渡的位置

坐标系说明

bash 复制代码
(0,0) ─────────── (1,0)
  │                  │
  │    UIView        │
  │                  │
(0,1) ─────────── (1,1)

View - 示例代码

bash 复制代码
let box = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
box.az_setGradientBackground(
    colors: [UIColor.red, UIColor.blue],
    locations: [0.0, 1.0],
    startPoint: CGPoint(x: 0, y: 0.5),
    endPoint: CGPoint(x: 1, y: 0.5)
)
view.addSubview(box)
box.center = view.center

效果

Label - 示例代码

bash 复制代码
let label = GradientLabel()
label.frame = CGRect(x: 50, y: 100, width: 300, height: 60)
label.text = "渐变文字效果"
label.font = UIFont.boldSystemFont(ofSize: 30)
label.textAlignment = .center

// 设置渐变(通过关联属性)
label.az_colors = [UIColor.systemPink.cgColor, UIColor.systemPurple.cgColor]
label.az_locations = [0.0, 1.0]
label.az_startPoint = CGPoint(x: 0, y: 0.5)
label.az_endPoint = CGPoint(x: 1, y: 0.5)

view.addSubview(label)
label.center = view.center

效果

封装代码

GradientLabel

bash 复制代码
import UIKit

class GradientLabel: UILabel {

    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
}

GradientView

bash 复制代码
import UIKit

class GradientView: UIView {

    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
}

UIView+AZGradient

bash 复制代码
import UIKit
import ObjectiveC.runtime

private var azColorsKey: UInt8 = 0
private var azLocationsKey: UInt8 = 0
private var azStartPointKey: UInt8 = 0
private var azEndPointKey: UInt8 = 0

extension UIView {

    // MARK: - Associated Properties

    var az_colors: [CGColor]? {
        get {
            return objc_getAssociatedObject(self, &azColorsKey) as? [CGColor]
        }
        set {
            objc_setAssociatedObject(self, &azColorsKey, newValue, .OBJC_ASSOCIATION_COPY_NONATOMIC)
            if let layer = self.layer as? CAGradientLayer {
                layer.colors = newValue
            }
        }
    }

    var az_locations: [NSNumber]? {
        get {
            return objc_getAssociatedObject(self, &azLocationsKey) as? [NSNumber]
        }
        set {
            objc_setAssociatedObject(self, &azLocationsKey, newValue, .OBJC_ASSOCIATION_COPY_NONATOMIC)
            if let layer = self.layer as? CAGradientLayer {
                layer.locations = newValue
            }
        }
    }

    var az_startPoint: CGPoint {
        get {
            return (objc_getAssociatedObject(self, &azStartPointKey) as? NSValue)?.cgPointValue ?? .zero
        }
        set {
            objc_setAssociatedObject(self, &azStartPointKey, NSValue(cgPoint: newValue), .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            if let layer = self.layer as? CAGradientLayer {
                layer.startPoint = newValue
            }
        }
    }

    var az_endPoint: CGPoint {
        get {
            return (objc_getAssociatedObject(self, &azEndPointKey) as? NSValue)?.cgPointValue ?? .zero
        }
        set {
            objc_setAssociatedObject(self, &azEndPointKey, NSValue(cgPoint: newValue), .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            if let layer = self.layer as? CAGradientLayer {
                layer.endPoint = newValue
            }
        }
    }

    // MARK: - 创建渐变View
    static func az_gradientView(
        colors: [UIColor]?,
        locations: [NSNumber]?,
        startPoint: CGPoint,
        endPoint: CGPoint
    ) -> UIView {

        let view = GradientView()
        view.az_setGradientBackground(colors: colors,
                                      locations: locations,
                                      startPoint: startPoint,
                                      endPoint: endPoint)
        return view
    }

    // MARK: - 设置渐变
    func az_setGradientBackground(
        colors: [UIColor]?,
        locations: [NSNumber]?,
        startPoint: CGPoint,
        endPoint: CGPoint
    ) {

        guard let colors = colors else { return }

        let gradient = CAGradientLayer()
        gradient.colors = colors.map { $0.cgColor }
        gradient.locations = locations
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.frame = self.bounds
        
        gradient.cornerRadius = self.layer.cornerRadius

        self.layer.insertSublayer(gradient, at: 0)
    }
}
相关推荐
kruptos23 分钟前
分布式系统怎么“选主“?Raft 共识一次讲清
开发语言·分布式·php·共识算法
吴声子夜歌35 分钟前
ApacheCommons——commons-cli(命令行参数解析)
java·开发语言·apache
benchmark_cc2 小时前
REST API 和 Python SDK 应该怎么选?量化交易数据接口选型实战
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
王的宝库2 小时前
Go 项目结构:从单文件到标准工程布局
开发语言·后端·golang
CocoaKier2 小时前
苹果续费成功,几天后付费协议突然失效,导致线上苹果支付全部失败
ios·apple
Tairitsu_H2 小时前
[C++] 深入理解红黑树:封装set与map
开发语言·c++·set·map·红黑树·模拟实现
泡海椒2 小时前
JQuick-Curl 性能分析:并发场景下的性能表现与调优,第三方接口调用不只要快写也要稳跑
java·开发语言·okhttp
小智老师PMP2 小时前
2026深度解析|PMP第八版与NPDP核心侧重点本质区别(管理类证书怎么选)
开发语言·分布式·算法·职场和发展·产品经理
江畔柳前堤3 小时前
前台·中台·后台:2026年AI原生时代的架构全景图
开发语言·人工智能·算法·机器学习·架构·scala·ai-native
Figo_Cheung3 小时前
Figo基于RNC理论的宇宙演化第七纪元猜想
开发语言·php