Apply gradient on a UIView not working

Question

I am trying to add gradient to a UIView programmatically but it is not working. It just appears to have no color at all. I have attached the relevant code as well as a screenshot. Notice the bottom square over which i am applying the gradient. Can someone help me figure out what I'm doing wrong here?

let sundayView = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
    setupViews()
    setupSundayView()
}

func setupViews() {
    sundayView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(sundayView)
}

func setupSundayView() {
    sundayView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activateConstraints([
        sundayView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor),
        sundayView.topAnchor.constraintEqualToAnchor(fridayView.bottomAnchor, constant: 16.0),
        sundayView.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor, constant: -8.0),            
        sundayView.heightAnchor.constraintEqualToAnchor(mondayView.heightAnchor),
        sundayView.widthAnchor.constraintEqualToAnchor(mondayView.widthAnchor)
        ])

    let gradient = CAGradientLayer()
    gradient.frame = sundayView.bounds
    gradient.colors = [
        UIColor(red:1.00, green:0.37, blue:0.23, alpha:1.0).CGColor,
        UIColor(red:1.00, green:0.16, blue:0.41, alpha:1.0).CGColor
    ]
    sundayView.layer.insertSublayer(gradient, atIndex: 0)
}

Marinna

Did not you forget to import QuartzCore framework? – Encyclopedic

I guess its not necessary. I tried applying gradient to my superview. It worked without importing. – Marinna

Answer 1

Your gradient isn't showing because the bounds for sundayView will not be set until Auto Layout runs. Override viewDidLayoutSubviews and set the gradient frame there.

Add this property to your viewController:

var sundayGradient: CAGradientLayer?

In setupSundayView save the gradient to the property:

let gradient = CAGradientLayer()
sundayGradient = gradient

Then set the frame in viewDidLayoutSubviews:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    sundayGradient?.frame = sundayView.bounds
}

Lunge

Ummm.. Sorry, I am having trouble understanding Set the gradient to it code. Please, can you please explain again? :) – Marinna

in setupSundayView after the line let gradient = CAGradientLayer() add the line sundayGradient = gradient. – Lunge

Thanks! It worked :) But it is breaking another line of code i added: sundayView.layer.cornerRadius = 5 . – Marinna

set sundayView.clipsToBounds = true. – Lunge

Answer 2

It seems that you forgot to add locations to gradient layer, try it like this:

func setupSundayView() {
    sundayView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activateConstraints([
        sundayView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor),
        sundayView.topAnchor.constraintEqualToAnchor(fridayView.bottomAnchor, constant: 16.0),
        sundayView.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor, constant: -8.0),            
        sundayView.heightAnchor.constraintEqualToAnchor(mondayView.heightAnchor),
        sundayView.widthAnchor.constraintEqualToAnchor(mondayView.widthAnchor)
        ])

    let gradient = CAGradientLayer()
    gradient.frame = sundayView.bounds
    gradient.colors = [
        UIColor(red:1.00, green:0.37, blue:0.23, alpha:1.0).CGColor,
        UIColor(red:1.00, green:0.16, blue:0.41, alpha:1.0).CGColor
    ]
    gradient.locations = [0.0, 0.5]
    sundayView.layer.insertSublayer(gradient, atIndex: 0)
}

Encyclopedic

Ok, in your viewDidLoad try to call setupSundayView() function before setupViews(). – Encyclopedic

It is the sundayView frames. I tried adding sundayView.frame.size = CGSize(width: 130, height: 130) It worked. – Marinna

But that is overriding my heightAnchor and widthAnchor now. Is there any way by which initialize frame without defining size? – Marinna