CODEWITHSUNDEEP
ioscocoa-touch
user2559108
user2559108

Reputation:

Setting a background layer below UITableView?

i was following this tutorial for gradients:

http://danielbeard.wordpress.com/2012/02/25/gradient-background-for-uiview-in-ios/

But i cant seem to insert the sub layer below my tableView, the layer is inserted as such:

CAGradientLayer *bgLayer = [BackgroundLayer blueGradient];
bgLayer.frame = self.view.bounds;
[self.view.layer insertSublayer:bgLayer atIndex:0];

Why is it going above my storyboard tableView ?

EDIT:

My table view is there, below the layer, i can click it and everything, but i cannot see it

Upvotes: 1

Views: 1863

Answers (3)

Shahriyar
Shahriyar

Reputation: 698

For anyone facing this issue:

If you are using a UITableViewController you need set your custom views in a later stage of the life cycles, such as viewDidLayoutSubviews The reason is in viewDidLoad tableView frame is not being set yet.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    let backgroundView = UIView(frame: tableView.bounds)
    backgroundView.backgroundColor = .white
    backgroundView.layer.insertSublayer(bgLayer, at: 0)
    
    tableView.backgroundView = backgroundView
}

Upvotes: 0

João Pedro Junqueira Candido
João Pedro Junqueira Candido

Reputation: 111

The correct way of doing this in a way that the gradient will stay behind the table view and not scroll when the tableView scrolls is to set the gradient in the backgroundView of the tableView

How to do this in Swift 3

let gradientLayer = CAGradientLayer()
let bgView = UIView.init(frame: self.tableView.frame)
bgView.layer.insertSublayer(gradientLayer, at: 0)
self.tableView.backgroundView = bgView

Upvotes: 6

rdelmar
rdelmar

Reputation: 104092

It should work if you put it in viewDidAppear. However, setting the size to self.view.bounds will only make the gradient go to the bottom of the screen -- when you scroll, your gradient will scroll with it. If you want the gradient to be as long as the table view, you have to set its height to the contentSize's height. You also need to set the background color of the cells to clear to see the gradient (in tableView:willDisplayCell:forIndexPath:)

-(void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    CAGradientLayer *bgGradient = [CAGradientLayer layer];
    bgGradient.frame = CGRectMake(self.tableView.bounds.origin.x, self.tableView.bounds.origin.y, self.tableView.bounds.size.width, self.tableView.contentSize.height);
    bgGradient.colors = @[(id)[[UIColor colorWithRed:150/255.0 green:2150/255.0 blue:233/255.0 alpha:1.0] CGColor], (id)[[UIColor colorWithRed:208/255.0 green:210/255.0 blue:216/255.0 alpha:1] CGColor]];
    bgGradient.locations = @[@0.02f,@1.00f];
    [bgGradient setMasksToBounds:YES];
    [self.view.layer insertSublayer:bgGradient atIndex:0];

}

One problem with this approach is that the length, and thus the look, of the gradient will vary depending on the number of rows in you table view. If you want the gradient to stay the same length, you might want to add it to the window instead (and make the table view's background color clear).

Upvotes: 1

Related Questions