UITableView with Transparent Gradient at Top and Bottom

Question

I have searched this forum, Google and other forums and have not found an the answer to my particular issue.

Basically, I have a UIView which contains

Answer 1

Swift 3 version of rob mayoff's answer:

let gradient = CAGradientLayer()
gradient.frame = tableMaskView.bounds
gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, 
                   UIColor.white.cgColor, UIColor.clear.cgColor]
gradient.locations = [0 as NSNumber, 1.0/16.0 as NSNumber, 
                      15.0/16.0 as NSNumber, 1 as NSNumber]
tableMaskView.layer.mask = gradient

Answer 2

You can do this with the CALayer mask property. But you can't set the mask on the table view's own layer because that mask will scroll with the rows of the table. Instead, put your table view inside a new superview (of class UIView) that you create just for this. Call it tableMaskView.

The new superview should have its backgroundColor property set to UIColor.clearColor and its opaque property set to NO. Then you can set its mask like this:

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.tableMaskView.bounds;
gradient.colors = [NSArray arrayWithObjects:
    (__bridge id)UIColor.clearColor.CGColor,
    UIColor.whiteColor.CGColor,
    UIColor.whiteColor.CGColor,
    UIColor.clearColor.CGColor,
    nil];
gradient.locations = [NSArray arrayWithObjects:
    [NSNumber numberWithFloat:0],
    [NSNumber numberWithFloat:1.0/16],
    [NSNumber numberWithFloat:15.0/16],
    [NSNumber numberWithFloat:1],
    nil];
self.tableMaskView.layer.mask = gradient;

Using a layer mask is not the most efficient way, but it's the easiest to program. Test whether it's fast enough.

Answer 3

Sounds like the background color of your table view is set to white. Try setting the background of your table view to transparent:

tableView.backgroundColor = [ UIColor clearColor ] ;
tableView.opaque = NO ;

Answer 4

Replace this line:

[[[self scoreTableView] layer] addSublayer:[self maskLayer]];

With this one:

self.scoreTableView.layer.mask = self.maskLayer;

(Or if you insist on your syntax-styling even thought I can't see why) :

[[[self scoreTableView] layer] setMask:[self maskLayer]];

Also this answer might help you.