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)
    }
}
相关推荐
从小就看凹凸曼^o^2 小时前
Python基础5 - 字典与集合:(1)字典
开发语言·python
侧耳倾听1112 小时前
java 日志框架简介
java·开发语言
zlinear数据采集卡3 小时前
数据采集卡从入门到精通(9):分辨率与精度——16位卡不等于1/65536的精度
开发语言·数据库·fpga开发·开源·c#
全栈技术负责人3 小时前
解密 MCP(Model Context Protocol):大模型时代的“Type-C”总线与三驾马车架构深度解析
开发语言·ai·架构
丰锋ff3 小时前
1.7在Qt窗口中添加右键菜单
开发语言·qt
jike_20263 小时前
iPhone日历查看会议纪要APP推荐:按日期查找历史录音更方便
ios·语音识别·iphone
Titan20243 小时前
Linux网络学习:套接字、UDP的封装与应用
linux·服务器·开发语言·网络·c++
流浪0014 小时前
Python基础语法(三):函数
开发语言·python
鸿芯微控科技4 小时前
压电点胶阀出胶量不稳定怎么排查?驱动波形、背压、点胶重量与Python分析
开发语言·python·压电点胶阀·精密点胶·点胶重量·流体控制