CODEWITHSUNDEEP
swiftuiviewcagradientlayer
Gino Sesia
Gino Sesia

Reputation: 393

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

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?

Upvotes: 0

Views: 7940

Answers (2)

Frankenstein
Frankenstein

Reputation: 16381

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
   }
}

Upvotes: 1

Jawad Ali
Jawad Ali

Reputation: 14427

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)

enter image description here

Upvotes: 1

Related Questions