iOS UILabel 添加 CAGradientLayer

在开发当中产品有时候要求文字背景有渐变效果,当然这个需求很简单,也有很多种实现方法,通常我们想到的做法就是通过 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

完美!!!

你可能感兴趣的:(iOS UILabel 添加 CAGradientLayer)