Horizontal Gradient colour Showing Half only in Swift?

Question

I I am trying to give the Gradient color for Button Baground, I am trying with following code

func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
        layer.insertSublayer(gradientLayer, at: 0)
    }

@IBOutlet weak var loginbtn: UIButton!
loginbtn.setGradientBackground(colorOne: UIColor.red, colorTwo: UIColor.blue)

I am trying to access this method it will show the output like this How to we fix this,

If I add following code

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        loginbtn.setGradientBackground(colorOne: UIColor.red, colorTwo: UIColor.green)
    }

it will show the following error.

See: [this answer](https://stackoverflow.com/a/38411237/1630618) — vacawama, Feb 12 '20 at 15:52

DonMag · Answer 1 · 2020-02-12T18:27:09.577

Make sure you are setting the gradient frame after auto-layout has set the size of the button.

If you subclass the button, you can do so in layoutSubviews().

Otherwise, A good place to do this in your view controller is in viewDidLayoutSubviews():

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    loginbtn.setGradientBackground(colorOne: UIColor.red, colorTwo: UIColor.blue)
}

Edit

Based on the second image you posted - getting over-lapping gradients when called from viewDidLayoutSubviews()... As auto-layout "does its thing," that can be called more than once, and you are adding a new layer each time that is called.

I don't know what else you might be doing in your custom class, but give it a try like this:

class GradButton: UIButton {

    let gradientLayer = CAGradientLayer()

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

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    func commonInit() -> Void {

        gradientLayer.locations = [0.0, 1.0]

        // top-right to bottom-left
        gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)

        // we only add the layer once, here when called from init    
        layer.addSublayer(gradientLayer)

    }

    func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
        gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
    }

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

}

class MyTest: UIViewController {

    @IBOutlet var loginbtn: GradButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        loginbtn.setGradientBackground(colorOne: .red, colorTwo: .yellow)
    }

}

Result:

Your code is working but in ending part it shows like as a joint — ghrix ghrix, Feb 12 '20 at 15:27

Horizontal Gradient colour Showing Half only in Swift?

1 Answers1