swiftuibuttonuikitcagradientlayer

custom UIButton class - gradient going out off button borders


I'm doing custom UIButton class and I want it to have gradient background. My gradient color is looking perfect but it goes out of button borders

My code:

class CustomButton: UIButton{
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    func setup(){
        layer.cornerRadius = 25.0
        layer.borderWidth = 1
        gradientLayer.frame = layer.bounds
        addShadow()
    }
    
    private lazy var gradientLayer: CAGradientLayer = {
        let color1 = UIColor(red: 254.0/255.0, green: 79.0/255.0, blue: 50.0/255.0, alpha: 1.0).cgColor
        let color2 = UIColor(red: 255.0/255.0, green: 26.0/255.0, blue: 107.0/255.0, alpha: 1.0).cgColor
        let gradient = CAGradientLayer()
        gradient.frame = layer.bounds
        gradient.colors = [color1, color2]
        gradient.startPoint = CGPoint(x: 0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1, y: 0.5)
        gradient.locations = [0,1]
        gradient.cornerRadius = 25
        layer.insertSublayer(gradient, at: 0)
        return gradient
    }()
    
    func addShadow(){
        layer.shadowOpacity = 1
        layer.shadowRadius = 1.0
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 1
        layer.shadowOffset = CGSize(width: 0, height: 3)
    }
    
}

And here's how it looks: enter image description here


Solution

  • Remove gradientLayer.frame from setup and add in layoutSubviews.

    Also set self.bounds instead of layer.bounds.

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

    Note : Remove gradient.frame = layer.bounds from var gradientLayer. Not needed.