Swift - Working With Gradients

Question

I have encountered a problem involving setting gradients for labels and buttons. I know this question has been asked a lot, but no answer has seemed to solve my problem. Here is the screen as I want it to look:

This is my code:

    @IBOutlet weak var loginButton: UIButton!
    @IBOutlet weak var signUpButton: UIButton!
    @IBOutlet weak var logoLabel: UILabel!


    override func viewDidLoad() {
        super.viewDidLoad()

        loginButton.backgroundColor = UIColor.clear
        let loginButtonGradient = createBlueGreenGradient(from: loginButton.bounds)
        self.view.layer.insertSublayer(loginButtonGradient, at: 0)

        signUpButton.backgroundColor = UIColor.clear
        let signUpButtonGradient = createBlueGreenGradient(from: signUpButton.bounds)
        self.view.layer.insertSublayer(signUpButtonGradient, at: 0)

        logoLabel.backgroundColor = UIColor.clear
        let logoLabelGradient = createBlueGreenGradient(from: logoLabel.bounds)
        self.view.layer.insertSublayer(logoLabelGradient, at: 0)

        loginButton.layer.cornerRadius = 100
        signUpButton.layer.cornerRadius = 100
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
        let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1)
        let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1)
        let gradientColors: [UIColor] = [topColor, bottomColor]

        let gradientLocations: [NSNumber] = [0.0, 1.0]

        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations
        gradientLayer.frame = bounds

        return gradientLayer
    }

And this is the wrong result:

Somebody please help me. I'm not sure what I'm doing wrong.

Possible duplicate of [How to Apply Gradient to background view of iOS Swift App](https://stackoverflow.com/questions/24380535/how-to-apply-gradient-to-background-view-of-ios-swift-app) — Aaron Zheng, Jun 19 '17 at 05:46

Aaron Zheng · Answer 1 · 2017-06-19T05:41:37.977

1

Oh my goodness I had the same problem, but played around with it. This is caused because you didnt add .cgcolor. For example :

 let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor
 let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor
 let gradientColors = [topColor, bottomColor]

Let me know if it works.

edited Jun 19 '17 at 05:41

answered Jun 19 '17 at 05:36

Aaron Zheng

423
3
12

score 1 · Answer 2 · answered Jun 19 '17 at 05:38

Your method like this:

func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
    let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor
    let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor
    let gradientColors = [topColor, bottomColor]

    let gradientLocations: [NSNumber] = [0.0, 1.0]

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations
    gradientLayer.frame = bounds

    return gradientLayer
  }

score 1 · Accepted Answer · answered Jun 19 '17 at 05:54

There are lots of issue with your code.

Divide the color with Float number instead of Int means it should be 255.0 not 255.
Now for colors property of CAGradientLayer you need to set array of CGColor not array of UIColor.
Also set startPoint and endPoint property of CAGradientLayer to make horizontal gradient color.
Currently you are adding this GradientLayer in your self.view instead of its specific button.
Set the cornerRadius of your button on basis of its height not with some constant 100 also after setting cornerRadius you need to also set masksToBounds property of layer to true.
Now for your logo label, you cannot set textColor as Gradient color directly what you need to do is draw the desired gradient on a UIImage and then use that UIImage to set the color pattern for your Label check this SO reference for that.

After making all this changes your code should be like.

func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
    let topColor = UIColor(red: 84/255.0, green: 183/255.0, blue: 211/255.0, alpha: 1).cgColor
    let bottomColor = UIColor(red: 119/255.0, green: 202/255.0, blue: 151/255.0, alpha: 1).cgColor
    let gradientColors = [topColor, bottomColor]

    let gradientLocations: [NSNumber] = [0.0, 1.0]
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations
    //Set startPoint and endPoint property also
    gradientLayer.startPoint = CGPoint(x: 0, y: 0)
    gradientLayer.endPoint = CGPoint(x: 1, y: 0)
    gradientLayer.frame = bounds
    return gradientLayer
}

Now set gradientLayer in viewDidLoad this way.

override func viewDidLoad() {
    super.viewDidLoad()

    let loginButtonGradient = createBlueGreenGradient(from: loginButton.bounds)
    self.loginButton.layer.insertSublayer(loginButtonGradient, at: 0)

    let signUpButtonGradient = createBlueGreenGradient(from: signUpButton.bounds)
    self.signUpButton.layer.insertSublayer(signUpButtonGradient, at: 0)

    loginButton.layer.cornerRadius = loginButton.frame.size.height / 2
    loginButton.layer.masksToBounds = true
    signUpButton.layer.cornerRadius = signUpButton.frame.size.height / 2
    signUpButton.layer.masksToBounds = true
}

Swift - Working With Gradients

3 Answers3