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