渐变层未显示在 UIButton 上

Question

我正在尝试创建一个我可以在整个应用程序中使用的自定义 UIButton。我想应用渐变作为背景，但是使用这个非常简单的代码没有显示渐变。如果有人能指出我在下面的代码中的错误，那将非常有帮助。

class GradientBtn: UIButton {

    let gradientLayer = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)

        themeConfig()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        themeConfig()
    }

    private func themeConfig() {
        //shadow
        layer.shadowOffset = CGSize.zero
        layer.shadowColor = UIColor.gray.cgColor
        layer.shadowOpacity = 1.0

        //titletext
        setTitleColor(Theme.colorWhite, for: .normal)
        titleLabel?.font = UIFont(name: Theme.fontAvenir, size: 18)

        //rounded corners
        layer.cornerRadius = frame.size.height / 2

        //gradient
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.colors = [Theme.colorlightBlue, Theme.colorMidBlue]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
        gradientLayer.frame = bounds
        layer.insertSublayer(gradientLayer, at: 0)

    }

}

Answer 1

替换

gradientLayer.colors = [Theme.colorlightBlue, Theme.colorMidBlue]

与

gradientLayer.colors = [Theme.colorlightBlue.cgColor, Theme.colorMidBlue.cgColor]

添加总是好的

override func layoutSubviews() {
    super.layoutSubviews()
    gradientLayer.frame = self.bounds
}

Answer 2

Sh_Khan 关于 CGColor 参考是正确的，但还有一些额外的改进：

与其将渐变添加为子层，不如将其设为 UIButton 的 layerClass。这使动画效果更好（例如，如果按钮在设备旋转时改变大小）。

执行此操作时，请删除所有尝试设置 gradientLayer 的 frame 的尝试。
在 layoutSubviews 中，您将不再需要更新 gradientLayer.frame，因此请将其完全删除，但您确实希望将圆角放在那里。
这不太可能有任何关系，但是当您设置 layer.cornerRadius（或视图的任何属性、它的层或该层的子层）时，您永远不应该参考self.frame。视图的frame是父视图坐标系中的CGRect。只在子类内部引用view的bounds；从来没有 frame.

因此：

class GradientBtn: UIButton {
    
    override class var layerClass: AnyClass { return CAGradientLayer.self }
    private var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }
    
    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        
        themeConfig()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        themeConfig()
    }
    
    private func themeConfig() {
        //shadow
        layer.shadowOffset = .zero
        layer.shadowColor = UIColor.gray.cgColor
        layer.shadowOpacity = 1
        
        //titletext
        setTitleColor(Theme.colorWhite, for: .normal)
        titleLabel?.font = UIFont(name: Theme.fontAvenir, size: 18)
        
        //gradient
        gradientLayer.locations = [0, 1]
        gradientLayer.colors = [Theme.colorlightBlue, Theme.colorMidBlue].map { [=10=].cgColor }
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        layer.cornerRadius = min(bounds.height, bounds.width) / 2
    }
}

渐变层未显示在 UIButton 上

Gradient Layer not showing on UIButton

swift

uibutton

swift4

cagradientlayer