在开发当中产品有时候要求文字背景有渐变效果,当然这个需求很简单,也有很多种实现方法,通常我们想到的做法就是通过
label.layer.addSublayer
添加CAGradientLayer
的实例去实现。但是你会发现渐变的效果是有了,文字却没有了。
因为图层也存在层级关系,所以我猜想是被渐变图层遮挡了,通过 insertSublayer
和设置 CAGradientLayer
实例的 zPosition
属性都不能解决这个问题。
既然改变层级解决不了,那我索性就把 UILabel
的图层直接替换为 CAGradientLayer
:
open class var layerClass: AnyClass { get }
自定义一个GradientLabel继承于UILabel,重写类属性 layerClass
:
import UIKit
class GradientLabel: UILabel {
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
override init(frame: CGRect) {
super.init(frame: frame)
if let gradLayer = layer as? CAGradientLayer {
gradLayer.colors = [UIColor.red.cgColor, UIColor.cyan.cgColor]
gradLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
使用和UILabel没什么区别:
let label = GradientLabel(frame: CGRect(x: 20, y: 100, width: view.bounds.width - 30, height: 50))
label.text = "这是UILabel上的文字"
label.textAlignment = .center
label.textColor = UIColor.white
view.addSubview(label)
看一下效果:
渐变背景的label
完美!!!
网友评论