UIButton 渐变背景在 swift 4 中不起作用

Question

this is my code for a uibutton which isnt working.Im doing autolayout programatically,have tried many solution on the internet but its not working.Any suggestions?

let ButtonSignUp: UIButton = {
        let btn = UIButton()
        btn.translatesAutoresizingMaskIntoConstraints = false
        btn.setTitleColor(.white, for: .normal)
        btn.titleLabel?.font = AppThemeFonts.buttonFonts
        btn.layer.cornerRadius = 6
        btn.setTitle("SIGNUP", for: .normal)
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = btn.bounds
        gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
        btn.layer.insertSublayer(gradientLayer, at: 0)
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
        gradientLayer.locations = [0.0, 1.0]
        return btn
    }()

following is how im setting constraint in viewdidload

let buttonsView: UIStackView = {
                let view = UIStackView()
                view.distribution = .fillEqually
                view.axis = .horizontal
                view.spacing = 10
                view.addArrangedSubview(ButtonSignUp)
                view.addArrangedSubview(ButtonLogin)
                view.translatesAutoresizingMaskIntoConstraints = false
                return view
            }()

            self.view.addSubview(buttonsView)

            let xConstraintButtonView = NSLayoutConstraint(item: buttonsView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
            let yConstraintButtonView = NSLayoutConstraint(item: buttonsView, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1.75, constant: 0)
            let widthConstraintButtonView = NSLayoutConstraint(item: buttonsView, attribute: .width, relatedBy: .equal, toItem: self.view, attribute: .width, multiplier: 0.9, constant: 0)
            let heightConstraintButtonView = NSLayoutConstraint(item: buttonsView, attribute: .height, relatedBy: .equal, toItem: self.view, attribute: .height, multiplier: 0.068, constant: 0)

        self.view.addConstraints([xConstraintButtonView,yConstraintButtonView,widthConstraintButtonView,heightConstraintButtonView])

Answer 1

• You need to set btn width and height.
• btn.layer.insertSublayer(gradientLayer, at: 0) call before return btn.

your code like this :-

let ButtonSignUp: UIButton = {
                    let btn = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 50))
                    btn.translatesAutoresizingMaskIntoConstraints = false
                    btn.setTitleColor(.white, for: .normal)
                    btn.titleLabel?.font = AppThemeFonts.buttonFonts
                    btn.layer.cornerRadius = 6
                    btn.setTitle("SIGNUP", for: .normal)
                    let gradientLayer = CAGradientLayer()
                    gradientLayer.frame = btn.bounds
                    gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]

                    gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
                    gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
                    gradientLayer.locations = [0.0, 1.0]
                    btn.layer.insertSublayer(gradientLayer, at: 0)
                    return btn
                }()

Answer 2

You need override layoutSubviews() function before set gradient for button.
Inside class SomeButton: UIButton {} add bellow code:

override open func layoutSubviews() {
    super.layoutSubviews()
    gradient?.frame = self.layer.bounds
}

end then set gradient color like:

func customGradient() {
    gradient?.removeFromSuperlayer()

    gradient = CAGradientLayer()
    guard let gradient = gradient else { return }

    gradient.frame = self.layer.bounds
    gradient.colors = [gradientStartColor.cgColor, gradientEndColor.cgColor]
    gradient.startPoint = CGPoint(x: 0, y: 0)
    gradient.endPoint = CGPoint(x: 1, y: 0)
    gradient.cornerRadius = self.cornerRadius
    self.layer.insertSublayer(gradient, below: self.imageView?.layer)
}