CODEWITHSUNDEEP
iosswiftuibutton
Sayalee Pote
Sayalee Pote

Reputation: 523

UIButton colors have gradient in iphone 8 plus and iphone X (iOS version independent issue)

I have used simple UIButton with my usecase being: 3 different background colors for states - Normal, Highlighted and Disabled. I have achieved this by the following code:

@IBOutlet var myButton: UIButton!{
    didSet{
        myButton.setBackgroundImage(UIImage.imageWithColor(color: #colorLiteral(red: 0, green: 0.3803921569, blue: 0.6196078431, alpha: 1)), for: .normal)
        myButton.setBackgroundImage(UIImage.imageWithColor(color: #colorLiteral(red: 0, green: 0.4745098039, blue: 0.7725490196, alpha: 1)), for: .highlighted)
        myButton.setBackgroundImage(UIImage.imageWithColor(color: .gray), for: .disabled)
    }
}

Extension function for UIImage---

class func imageWithColor(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 0.5)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        color.setFill()
        UIRectFill(rect)
        let image : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }

But my button appears as follows in iphone8 and iphone X

enter image description here

Instead of gray, it is giving me a gradient of gray and blue

Upvotes: 0

Views: 325

Answers (3)

avsmirnov567
avsmirnov567

Reputation: 186

Recently, I have faced with this issue too, using exactly the same code. Solution was pretty simple: in your extension, change CGRect height value to 1.0 instead of 0.5. Now, everything will be rendered properly on every device. Strange issue, maybe somebody has ideas, why it works that way?

Your updated extension code:

class func imageWithColor(color: UIColor) -> UIImage {
    let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0)
    UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
    color.setFill()
    UIRectFill(rect)
    let image : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image
}

Upvotes: 1

Ahmad F
Ahmad F

Reputation: 31645

If you aiming to let the button to has a solid background color, you would need to change:

myButton.setBackgroundImage(UIImage.imageWithColor(color: .gray), for: .disabled)

Note that this line of code doesn't compile for me.

to:

myButton.backgroundColor = .gray

There is no need to set a background image for the button in your case, instead you should change directly the button background color (solid).

Upvotes: 0

devang bhatt
devang bhatt

Reputation: 470

 func addGradientToBackground() {
        let layer = CAGradientLayer()
        layer.frame = CGRect(origin: .zero, size: self.frame.size)
        layer.colors = [color1, color2, color3]
        layer.startPoint = CGPoint(x: 0.0, y: 0.0)
        layer.endPoint = CGPoint(x: 1.0, y: 0.0)
        view.layer.insertSublayer(layer, at: 0)
     }

Instead of color1, color2, color3 you can add your color respectively.

Upvotes: 0

Related Questions