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?

Screenshot

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)
}

I guess its not necessary. I tried applying gradient to my superview. It worked without importing. — Ryan Cyrus, Jul 16 '16 at 11:28

vacawama · Accepted Answer · 2016-07-16T12:45:34.847

16

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
}

edited Jul 16 '16 at 12:45

answered Jul 16 '16 at 12:33

vacawama

150,663
30
266
294

Ummm.. Sorry, I am having trouble understanding _Set the gradient to it_ code. Please, can you please explain again? :) – Ryan Cyrus Jul 16 '16 at 12:43
1

in `setupSundayView` after the line `let gradient = CAGradientLayer()` add the line `sundayGradient = gradient`. – vacawama Jul 16 '16 at 12:44
Thanks! It worked :) But it is breaking another line of code i added: `sundayView.layer.cornerRadius = 5` . – Ryan Cyrus Jul 16 '16 at 12:49
1

set `sundayView.clipsToBounds = true`. – vacawama Jul 16 '16 at 12:53

score 1 · Answer 2 · answered Jul 16 '16 at 11:29

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)
}

Ok, in your `viewDidLoad` try to call `setupSundayView()` function before `setupViews()`. — Evgeny Karkan, Jul 16 '16 at 11:33
It is the sundayView frames. I tried adding sundayView.frame.size = CGSize(width: 130, height: 130) It worked. — Ryan Cyrus, Jul 16 '16 at 11:33
But that is overriding my heightAnchor and widthAnchor now. Is there any way by which initialize frame without defining size? — Ryan Cyrus, Jul 16 '16 at 11:36

Apply gradient on a UIView not working

2 Answers2

Linked