UITableView fade to background

Question

I have seen many people all over the internet asking the question of how to fade their tableview at the edges. There are certain solutions which almost work. An example is:

CAGradientLayer *maskLayer = [CAGradientLayer layer];

CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor;

maskLayer.colors = [NSArray arrayWithObjects:(__bridge id)innerColor, (__bridge id)outerColor, nil];
maskLayer.locations = [NSArray arrayWithObjects:
                       [NSNumber numberWithFloat:0.8], 
                       [NSNumber numberWithFloat:1.0], nil];


maskLayer.bounds = CGRectMake(0, 0,
                              self.historyTable.frame.size.width,
                              self.historyTable.frame.size.height + self.headerLabel.frame.size.height);
maskLayer.anchorPoint = CGPointZero;

[self.view.layer addSublayer:maskLayer];

This code works well, but it has the issue that it can only fade it to a solid colour. What I want to be able to do is fade away to the background image (which will have patterns and can change screen to screen). Is there any way of doing this?

Thanks.

Answer 1

Had the same problem, assuming we are talking about the Cocoanetics tutorial, replace your last line:

[self.view.layer addSublayer:maskLayer];

With this one:

self.historyTable.layer.mask = maskLayer;

Basically skip the last step of the tutorial but attach the mask to the tableView's layer.

Also check this answer for complete solution including handling top and bottom of table..