美文网首页UILabel相关
iOS UILabel 添加 CAGradientLayer

iOS UILabel 添加 CAGradientLayer

作者: 心至靜行至遠 | 来源:发表于2019-09-26 11:08 被阅读0次

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

        本文链接:https://www.haomeiwen.com/subject/ipgquctx.html