How to set gradient colour to UIButton in background?

Question

Am trying to set CAGradientLayer for UIButton.

But it is not getting exactly. am I doing any wrong ?

am getting output like

You can see there is some horizontal line

Here is the code which I tried

let topColor = UIColor(red: 0.62, green: 0.38, blue: 1, alpha: 1).cgColor
let bottomColor = UIColor(red: 0.87, green: 0.51, blue: 0.93, alpha: 1).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = myButton.bounds
gradientLayer.colors = [topColor, bottomColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
myButton.layer.insertSublayer(myButton, at: 0)

it's happen because applying gradient before the constraints loaded for view. — Pratik Sodha, Sep 26 '18 at 05:44
you can embedded button in GradientView of subclass UIButton and override layer property — SPatel, Sep 26 '18 at 05:52
@PratikSodha, Then how should i fix this issue ? even am writing that code in viewDidLayoutSubviews() — Bhanuteja, Sep 26 '18 at 06:53
@SPatel... tried that it didn't work. am getting same output as earlier — Bhanuteja, Sep 26 '18 at 06:54
@ammateja number of ways to fix this.. Like you can use create gradient local variable and reframe it in `viewDidLayoutSubviews ` also gradient can be apply using `delay` or also apply in `viewDidApper`. But i prefer using delay block... :) — Pratik Sodha, Sep 26 '18 at 07:03

score 2 · Answer 1 · answered Sep 26 '18 at 07:34

2

Create a Designable custom class like this

import Foundation
import  UIKit
@IBDesignable class CustomButton:UIButton {

    @IBInspectable var firstColor:UIColor = UIColor.clear {
        didSet {
            updateUI()
        }
    }
    @IBInspectable var secondColor:UIColor = UIColor.clear {
        didSet{
            updateUI()
        }
    }

    override class var layerClass: AnyClass {
        get {
            return CAGradientLayer.self
        }
    }
    func updateUI(){
        let gradient: CAGradientLayer = self.layer as! CAGradientLayer
        gradient.frame = self.bounds
        gradient.colors = [firstColor,secondColor].map { $0.cgColor }
        gradient.locations = [0.0,1.0]
        gradient.startPoint =  CGPoint(x: 0.0, y: 1.0)
        gradient.endPoint = CGPoint(x: 1.0, y: 1.0)

    }
}

from your Identity inspector set your UIbutton class to CustomButtom like this

from your Attribute inspector change your gradient color to whatever you want to set

and finally your button will be like this

if you want to change the starting and endpoint to those colors just play around with these two values

gradient.startPoint = CGPoint(x: 0.0, y: 1.0) gradient.endPoint = CGPoint(x: 1.0, y: 1.0)

answered Sep 26 '18 at 07:34

Shakti

986
12
22

thank you for explaining clearly. i gave my custom color on Attribute inspector. But it is not reflecting to button. i mean background of button remains same. I don't know how to show to you here. we can't attach screenshot here – Bhanuteja Sep 26 '18 at 09:38
@ammateja which color did you change gradient color or button backgroundcolor – Shakti Sep 26 '18 at 09:42
gradient color...i mean first color, second color. already background color is in clear color – Bhanuteja Sep 26 '18 at 09:43
Ok add this in your custom button class override func layoutSubviews() { super.layoutSubviews() updateUI() } – Shakti Sep 26 '18 at 09:47
@ammateja did that work for you or else you can share your query here https://chat.stackoverflow.com/rooms/26424/iosandroidchaosoverflow here you can share screenshots – Shakti Sep 26 '18 at 09:53
wrote. same issue – Bhanuteja Sep 26 '18 at 09:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180787/discussion-between-shakti-and-amma-teja). – Shakti Sep 26 '18 at 09:57

score 0 · Answer 2 · answered Sep 26 '18 at 06:11

0

You have to update the gradient's frame when the view is laid out:

override func viewDidLayoutSubviews() {
    myButton.layer.sublayers?.first?.frame = myButton.bounds
}

answered Sep 26 '18 at 06:11

André Slotta

13,774
2
22
34

How to set gradient colour to UIButton in background?

2 Answers2