how do i set the background color of UIViews to be a gradient color in swift?

Question

Im trying to set the color of my button and labels to a gradient color in swift with the following code:

extension UIView {

    func setGradientColor(colorOne: UIColor, colorTwo: UIColor) {

        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
        gradientLayer.locations = [0.0,0.1]
        gradientLayer.startPoint = CGPoint(x: 1.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.0)

        layer.insertSublayer(gradientLayer, at: 0)
   }
}

and then in the sign in form i use the extension like this:

let logo: UILabel = {
    let logo = UILabel()
    logo.text = "Logo"
    logo.setGradientColor(colorOne: UIColor.blue, colorTwo: UIColor.yellow)
    logo.textAlignment = .center
    logo.font = UIFont.boldSystemFont(ofSize: 59)
    return logo
}()

but it still shows up as black. how do i fix this?

This might help? https://stackoverflow.com/questions/37903124/set-background-gradient-on-button-in-swift — Div, Jun 05 '20 at 12:46
Does this answer your question? [Set Background Gradient on Button in Swift](https://stackoverflow.com/questions/37903124/set-background-gradient-on-button-in-swift) — koen, Jun 05 '20 at 16:30

score 1 · Answer 1 · answered Jun 05 '20 at 12:50

What you posted i review that ... call setGradietColor(colorOne: UIColor.blue, colorTwo: UIColor.yellow) after setting the frame or constraints to the logo view

You can add gradient layer in your view

let gradient: CAGradientLayer = CAGradientLayer()

        gradient.colors = [UIColor.black.cgColor, UIColor.blue.cgColor]
        gradient.locations = [0.0 , 1.0]
        gradient.startPoint = CGPoint(x : 0.0, y : 0)
        gradient.endPoint = CGPoint(x :0.0, y: 0.5) // you need to play with 0.15 to adjust gradient vertically
        gradient.frame = view.bounds
        view.layer.addSublayer(gradient)

Frankenstein · Answer 2 · 2020-06-05T13:11:00.517

You're facing this issue because you're not updating the frame of gradientLayer when bounds of logo updates. For example in ViewController you can give this code if you can have the reference to your gradientLayer.

class ViewController: UIViewController {

    var gradient: CAGradientLayer?

    let logo: UILabel = {
        let logo = UILabel()
        logo.text = "Logo"
        gradient = logo.setGradietColor(colorOne: UIColor.blue, colorTwo: UIColor.yellow)
        logo.textAlignment = .center
        logo.font = UIFont.boldSystemFont(ofSize: 59)
        return logo
    }()

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        gradient?.frame = logo.bounds
    }
}

Try returning the layer from your method and modify your function like this:

extension UIView {

    @discardableResult
    func setGradietColor(colorOne: UIColor, colorTwo: UIColor) {

        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
        gradientLayer.locations = [0.0,0.1]
        gradientLayer.startPoint = CGPoint(x: 1.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.0)

        layer.insertSublayer(gradientLayer, at: 0)
        return layer
   }
}

how do i set the background color of UIViews to be a gradient color in swift?

2 Answers2