Gradient color as a Background color of UIButton in Swift4

Question

I have a button and i'm trying to set its background color gradient.I have three hex values which i converted to RGB and written three values in my code and pass all the three values to the button frame. But when i run the app button background not changes according to the color i have set in the code. My code to get three color codes is this,

 let gradientColor = CAGradientLayer()
    gradientColor.frame = loginButton.frame
    let color1 = UIColor(red: 183, green: 46, blue: 79, alpha: 1)
    let color2 = UIColor(red: 232, green: 79, blue: 80, alpha: 1)
    let color3 = UIColor(red: 145, green: 21, blue: 79, alpha: 1)
    gradientColor.colors = [color1,color2,color3]
    self.loginButton.layer.addSublayer(gradientColor)

`gradientColor.frame = loginButton.frame` you may want to do `gradientColor.frame = loginButton.bounds`. Also, `UIColor(red:green:blue:alpha:)` awaits for values between 0 and 1. so `UIColor(red: 183/255., green: 46/255., blue: 79/255., alpha: 1)` (and so on for each color) — Larme, Jan 04 '18 at 13:56
It is not changing background as i followed ur procedure. @Larme — Hamza, Jan 04 '18 at 14:03
`gradientColor.colors` needs to be an array of `CGColor` also: https://stackoverflow.com/questions/24380535/how-to-apply-gradient-to-background-view-of-ios-swift-app — Larme, Jan 04 '18 at 14:05
What's the frame of `loginButton.frame` when you enter that part of code? Could be an Autolayout issue. — Larme, Jan 04 '18 at 14:20

Krunal · Accepted Answer · 2018-01-04T14:17:27.870

Try this and see:

@IBOutlet weak var loginButton: UIButton!
func testGradientButton() -> Void {
    let gradientColor = CAGradientLayer()
    gradientColor.frame = loginButton.frame
    gradientColor.colors = [UIColor.blue.cgColor,UIColor.red.withAlphaComponent(1).cgColor]
    self.loginButton.layer.insertSublayer(gradientColor, at: 0)
}

Here is result:

Also note: Values for RGB colors in your code, are much higher than its normal value. See your console log, it might printed following error:

[Graphics] UIColor created with component values far outside the expected range. Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.

Divide all values with 255.0 and use insertSubLayer function.

let color1 = UIColor(red: 183.0/255.0, green: 46.0/255.0, blue: 79.0/255.0, alpha: 1)
let color2 = UIColor(red: 232.0/255.0, green: 79.0/255.0, blue: 80.0/255.0, alpha: 1)
let color3 = UIColor(red: 145.0/255.0, green: 21.0/255.0, blue: 79.0/255.0, alpha: 1)

Here is result with your color code values:

func testGradientButton() -> Void {
    let gradientColor = CAGradientLayer()
    gradientColor.frame = loginButton.frame
    let color1 = UIColor(red: 183.0/255.0, green: 46.0/255.0, blue: 79.0/255.0, alpha: 1)
    let color2 = UIColor(red: 232.0/255.0, green: 79.0/255.0, blue: 80.0/255.0, alpha: 1)
    let color3 = UIColor(red: 145.0/255.0, green: 21.0/255.0, blue: 79.0/255.0, alpha: 1)
    gradientColor.colors = [color1.cgColor,color2.cgColor,color3.cgColor]
    self.loginButton.layer.insertSublayer(gradientColor, at: 0)
}

it is not covering whole button background area and i have made button corner radius but after applying gradient it is removing curve edges.@Krunal — Hamza, Jan 05 '18 at 07:04
Obvious because of `gradientColor.frame = loginButton.frame` — Krunal, Jan 05 '18 at 07:07
still it is not coming on full button it is stop before right end side and vanishes by edges on button. @Krunal — Hamza, Jan 05 '18 at 07:47

Gradient color as a Background color of UIButton in Swift4

1 Answers1