How to apply Gradient to UIView in iOS 10 on a real device

Question

I have this extension to add a Gradient to a View in Swift:

extension UIView {
    func addGradientWithColor(colorTop: UIColor, colorButton: UIColor){
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = [colorTop.cgColor, colorButton.cgColor]

        self.layer.insertSublayer(gradient, at: 0)
    }
}

Then, I use it like that in my UIViewController:

override func viewDidLoad(){
    self.view.addGradientWithColor(colorTop: UIColor.red, colorButton: UIColor.clear)        
    super.viewDidLoad()
}

I run the simulator and it works great. But when I want use my app on a real device, the Gradient does not work.

PD: I tried many ways to do a Gradient but nothing worked on a real device.

You can see a general answer [here](https://stackoverflow.com/a/68238412/4227328) — Ali A. Jalil, Jul 03 '21 at 17:26

Cristik · Accepted Answer · 2017-12-27T10:43:18.453

The problem is that you are not resizing the layer when the size of the view changes, thus it remains at it's initial value, which mostly depends on how was the view created.

I'd recommend using an UIView subclass, and updating the layer size in the layoutSubviews method, which always gets called when the view resizes:

@IBDesignable
open class GradientView: UIView {
    @IBInspectable
    public var startColor: UIColor = .white {
        didSet {
            gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
            setNeedsDisplay()
        }
    }
    @IBInspectable
    public var endColor: UIColor = .white {
        didSet {
            gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
            setNeedsDisplay()
        }
    }

    private lazy var gradientLayer: CAGradientLayer = {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds
        gradientLayer.colors = [self.startColor.cgColor, self.endColor.cgColor]
        return gradientLayer
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        layer.insertSublayer(gradientLayer, at: 0)
    }

    public required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        layer.insertSublayer(gradientLayer, at: 0)
    }

    open override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
}

The code above also let's you tweak the start and end colour from Xcode so you have an estimate of how the view will look like when deployed.

What is `ToTGradientView`? Googling it only comes up with this StackOverflow post — Will, Aug 03 '17 at 14:47
Can one of the color be .clear? Says fade from black to transparent? — Lim Thye Chean, Nov 09 '17 at 07:47
It works. It ended up it is my problem of not setting the gradient view background as non-opaque. Thanks for the help! — Lim Thye Chean, Nov 15 '17 at 01:29

score 7 · Answer 2 · edited Sep 29 '17 at 13:40

Try this, it's working for me. Code:

let gradientLayer:CAGradientLayer = CAGradientLayer()
gradientLayer.frame.size = self.gradientView.frame.size
gradientLayer.colors = [UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor] //Use diffrent colors
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
self.gradientView.layer.addSublayer(gradientLayer)

For more details explanation see this: Gradient On UIView

score 2 · Answer 3 · edited Jul 01 '19 at 16:53

2

Just make sure that you're using color.cgColor instead of color.

edited Jul 01 '19 at 16:53

baduker

19,152
9
33
56

answered Jul 01 '19 at 14:03

Amir Ardalan

389
3
7

I spent more time than I'd like to admit on this "detail". – nickdnk Jul 09 '21 at 19:20

score 0 · Answer 4 · answered May 31 '19 at 08:56

This code for Gradient with transparent background in Swift 5. [transparent|white mix]

    let gradientLayer:CAGradientLayer = CAGradientLayer()
    gradientLayer.colors = [UIColor.white.withAlphaComponent(0.0).cgColor, UIColor.white.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
    gradientLayer.frame.size = self.gradientView.frame.size

    self.gradientView.layer.addSublayer(gradientLayer)

score 0 · Answer 5 · answered Dec 25 '19 at 21:12

Using the answers from @Cristik and another user (who's answer I can't find, so if you are that user please let me know so I can give you the credit)

I got this (which updates in storyboard/real device/simulator and allows vertical or horizontal):

Tested on Xcode 11, Swift 5:

@IBDesignable class GradientView: UIView {

    @IBInspectable
    public var firstColor: UIColor = .white {
        didSet {
            gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
            setNeedsDisplay()
        }
    }

    @IBInspectable
    public var secondColor: UIColor = .white {
        didSet {
            gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
            setNeedsDisplay()
        }
    }

    @IBInspectable var vertical: Bool = true {
        didSet {
            updateGradientDirection()
        }
    }

    lazy var gradientLayer: CAGradientLayer = {
        let layer = CAGradientLayer()
        layer.colors = [firstColor.cgColor, secondColor.cgColor]
        layer.startPoint = CGPoint.zero
        return layer
    }()

    // MARK: - Lifecycle

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        applyGradient()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        applyGradient()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        applyGradient()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updateGradientFrame()
    }

    // MARK: - Helper

    func applyGradient() {
        updateGradientDirection()
        layer.sublayers = [gradientLayer]
    }

    func updateGradientFrame() {
        gradientLayer.frame = bounds
    }

    func updateGradientDirection() {
        gradientLayer.endPoint = vertical ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0)
    }
}

How to apply Gradient to UIView in iOS 10 on a real device

5 Answers5