美文网首页
JPGradient:可设置渐变背景色、文字色的控件(包括 UI

JPGradient:可设置渐变背景色、文字色的控件(包括 UI

作者: 健了个平_24 | 来源:发表于2020-09-30 17:57 被阅读0次

    Demo

    使用

    let gLabel: GradientLabel = {
        let label = GradientLabel(frame: CGRect(x: 50, y: 100, width: 300, height: 100))
        return label
    }()
    
    let gBtn: GradientButton = {
        let btn = GradientButton(type: .system)
        btn.frame = CGRect(x: 50, y: 200, width: 300, height: 100)
        btn.setImage(UIImage(named: "denim_jacket")?.withRenderingMode(.alwaysOriginal), for: .normal)
        btn.imageEdgeInsets = .init(top: 0, left: 0, bottom: 0, right: 10)
        return btn
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        gLabel.setText("爽歪歪", font: .boldSystemFont(ofSize: 70))
            .startPoint(.zero)
            .endPoint(.init(x: 1, y: 1))
            .colors([.systemYellow, .systemPurple, .systemTeal])
        view.addSubview(gLabel)
        
        gBtn.setText("我是按钮", font: .boldSystemFont(ofSize: 40))
            .startPoint(.init(x: 0, y: 0.5))
            .endPoint(.init(x: 1, y: 0.5))
            .colors([.blue, .yellow, .red, .green])
        view.addSubview(gBtn)
    }
    
    effect

    简单实现

    使用了CAGradientLayer,再使用UILabel作为图层的mask,这样只要设置CAGradientLayercolors属性即可实现动态修改文字的渐变背景色,也可单色。

    为什么不绘制渐变色图片,再通过 UIColor.init(patternImage: image) 去获取渐变色?

    这的确是一个更加优雅的实现方案,不过最近发现旧版本(iOS13以下)的系统,如果使用了第三方键盘(如搜狗输入法),只要调用过该函数就会崩溃,目前还不清楚具体原因,只好使用该方案以兼容旧版本。

    使用这种方案也是有好处的,例如颜色可以随时修改,也可以添加渐变动画等,还可以扩展更多功能(陆续新增)。

    相关文章

      网友评论

          本文标题:JPGradient:可设置渐变背景色、文字色的控件(包括 UI

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