TableView background gradient glitching

Question

I have a gradient layer set for a table view, using the following code:

func setGradientToTableView(_ topColor:UIColor, _ bottomColor:UIColor) {

    let gradientBackgroundColors = [topColor.cgColor, bottomColor.cgColor]
    let gradientLocations = [0.0,1.0]

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientBackgroundColors
    gradientLayer.locations = gradientLocations as [NSNumber]

    gradientLayer.frame = tableView.bounds
    let backgroundView = UIView(frame: tableView.bounds)
    backgroundView.layer.insertSublayer(gradientLayer, at: 0)
    tableView.backgroundView = backgroundView

}

And this:

setGradientToTableView(UIColor(red: 125/255.0, green: 125/255.0, blue: 125/255.0, alpha: 1.0), UIColor(red: 125/255.0, green: 125/255.0, blue: 0/255.0, alpha: 1.0)).

The problem is coming when I run the app. The gradient layer will be the size of the table view for the device and orientation that is selected in the storyboard.

Does anyone know how to fix this? - btw my constraints for the table view are navigation bar bottom, leading, trailing, and safe area bottom

Edit: Here is a screenshot

Cannot understand what do you need? You don't want the gradient layer to be the full size of the tableView or you want? Try to add a screen shot of the issue you have. — Kegham K., Dec 31 '17 at 17:06
@KeghamK. I have added a screenshot, and I want the gradient layer to be the full size of the table view. — D-A UK, Dec 31 '17 at 17:07

score 4 · Answer 1 · edited Dec 31 '17 at 19:21

4

Probably the problem is that you set the gradient in the viewDidLoad() method, where the table view has not been drawn yet and its frame is the default frame from XIB/storyboard. You should call this in didLayoutSubviews() like this:

var gradientLayer: CAGradientLayer?
func didLayoutSubviews() {
    if (gradientLayer == nil) {
        setGradientToTableView(UIColor(red: 125/255.0, green: 125/255.0, blue: 125/255.0, alpha: 1.0), UIColor(red: 125/255.0, green: 125/255.0, blue: 0/255.0, alpha: 1.0))
    }
}

Keep the reference to the gradient layer in your class to make sure you only set the gradient once, because didLayoutSubviews is called multiple times.

edited Dec 31 '17 at 19:21

D-A UK

1,084
2
11
24

answered Dec 31 '17 at 17:18

Dog

474
8
25

This is the correct way to do it and is what I was getting at in my comments on your previous question. – Upholder Of Truth Dec 31 '17 at 17:23
Hi. Solution works, but when the device titled (orientation changes), it displays as the previous orientation. Is there a way to fix this? – D-A UK Dec 31 '17 at 18:47
See this post for orientation changes: https://stackoverflow.com/questions/25666269/how-to-detect-orientation-change. Whenever an orientation change is detected, call `gradientLayer.frame = tableView.frame`. The frame of the table view gets changed whenever the orientation changes. – Dog Dec 31 '17 at 19:25
@WonderDog would I call a notification centre alert and receive it in the other file? – D-A UK Jan 01 '18 at 09:29
No, register the observer in the view controller where you have the table view and also handle the notification there. – Dog Jan 01 '18 at 13:24

TableView background gradient glitching

1 Answers1