Applying gradient background for UIView using auto layout

Question

I extended UIView to add a addGradientWithColor() method to get the gradient background:

 extension UIView {
   func addGradientWithColor() {
     let gradient = CAGradientLayer()
     gradient.frame = self.bounds
     gradient.colors = [gradientEndColor.CGColor,  gradientStartColor.CGColor]
     gradient.startPoint = CGPointMake(1,0)
     gradient.endPoint = CGPointMake(0.2,1)
    self.layer.insertSublayer(gradient, atIndex: 0)
  } }

My issue is when I run landscape mode, the UIView is not stretched

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    self.view.addGradientWithColor() }

I tried to calling viewDidLayoutSubviews() but its not working properly

Here is the screen shot:

after removing viewDidLayoutSubviews()

Have you checked this [ios8-auto-layout-and-gradient](http://stackoverflow.com/questions/31172151/ios8-auto-layout-and-gradient) — rob180, Sep 19 '16 at 12:21
Why you just don't subclass the UIView and override drawRect method. In that method just add the gradient. Then to the UIView just add the constraints that you need and it will work. — TomCobo, Sep 19 '16 at 12:37
@tomCobo thanks your suggestion is the best. Please give it as a answer — Aravind, Sep 20 '16 at 10:17
@TomCobo hey, this code is not working after updating xcode 8.but it works xcode 7.3. — Aravind, Nov 01 '16 at 06:47

TomCobo · Accepted Answer · 2019-05-09T11:49:56.777

You can subclass the UIView and override drawRect method where you add your gradient.

Updated to Swift 4


class GradientView: UIView {

    private let gradient : CAGradientLayer = CAGradientLayer()
    private let gradientStartColor: UIColor
    private let gradientEndColor: UIColor

    init(gradientStartColor: UIColor, gradientEndColor: UIColor) {
        self.gradientStartColor = gradientStartColor
        self.gradientEndColor = gradientEndColor
        super.init(frame: .zero)
    }

    required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }

    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: layer)
        gradient.frame = self.bounds
    }

    override public func draw(_ rect: CGRect) {
        gradient.frame = self.bounds
        gradient.colors = [gradientEndColor.cgColor, gradientStartColor.cgColor]
        gradient.startPoint = CGPoint(x: 1, y: 0)
        gradient.endPoint = CGPoint(x: 0.2, y: 1)
        if gradient.superlayer == nil {
            layer.insertSublayer(gradient, at: 0)
        }
    }
}

After you create your UIView you just need to add your constraints to that view.

I'd add `if (!self.gradient.superlayer) { self.layer.insertSublayer(self.gradient, atIndex: 0) }` — Iulian Onofrei, Jun 08 '17 at 14:06
`if self.gradient.superlayer != nil {` should be `if self.gradient.superlayer == nil {` — thijsonline, Oct 03 '17 at 14:52

score 6 · Answer 2 · edited Jun 11 '17 at 22:40

you could save a reference to the layer, and adjust it's frame in the views layoutSublayersOfLayer method. this could be outsourced in an UIView subclass:

class GradientView: UIView {

private let gradient : CAGradientLayer = CAGradientLayer()

/**
 displays a gradient on the view
 */
func addGradient() {

    self.gradient.frame     = self.bounds
    self.gradient.colors    = [gradientEndColor.CGColor, gradientStartColor.CGColor]
    gradient.startPoint     = CGPointMake(1,0)
    gradient.endPoint       = CGPointMake(0.2,1)        
    self.layer.insertSublayer(self.gradient, atIndex: 0)
}

/**
 resizes the gradient with the view size
 */
override func layoutSublayers(of layer: CALayer) {
    super.layoutSublayers(of: layer)
    self.gradient.frame = self.bounds
}
}

score 3 · Answer 3 · answered Sep 19 '16 at 12:25

3

Layers do not autoresize them self. To fix this issue you should change layer frame. This is one way how it is possible to implement:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    //Update you're layer based on the new frame
    self.view.addGradientWithColor()

 }

answered Sep 19 '16 at 12:25

Oleg Gordiichuk

15,240
7
60
100

1

in my case after adding viewdidlayoutsubviews() method. I am getting two gradient views in the same view. I attached the screenshot in the question itself – Aravind Sep 19 '16 at 13:18

score 2 · Answer 4 · answered Jul 17 '17 at 09:48

Inspired from solutions here, I've created the following class.

Usage examples:

// Simple usage. From clear to black.
let gradientView1 = GradientView(colors: [.clear, .black])

// Tweak locations. Here the gradient from red to green will take 30% of the view.
let gradientView2 = GradientView(colors: [.red, .green, .blue], locations: [0, 0.3, 1])

// Create your own gradient.
let gradient = CAGradientLayer()
gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
let gradientView3 = GradientView(gradient: gradient)

The class:

import UIKit

/**
 * View with a gradient layer.
 */
class GradientView: UIView {

    let gradient : CAGradientLayer

    init(gradient: CAGradientLayer) {
        self.gradient = gradient
        super.init(frame: .zero)
        self.gradient.frame = self.bounds
        self.layer.insertSublayer(self.gradient, at: 0)
    }

    convenience init(colors: [UIColor], locations:[Float] = [0.0, 1.0]) {
        let gradient = CAGradientLayer()
        gradient.colors = colors.map { $0.cgColor }
        gradient.locations = locations.map { NSNumber(value: $0) }
        self.init(gradient: gradient)
    }

    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: layer)
        self.gradient.frame = self.bounds
    }

    required init?(coder: NSCoder) { fatalError("no init(coder:)") }
}

Applying gradient background for UIView using auto layout

4 Answers4

Linked