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 UITableView. I followed this tutorial and it was partially successful. The problem is the gradient. I have a background image behind the UITableView. So as the cell nears the gradient, I want the background to be showing, instead of the white.

I also found this post which which is where I found the tutorial, but I didn't want to hijack that post with my own questions for matt.

Any help in the right direction would be great!

EDIT1: I know I can use another image with the background image and the middle cut out, but I'm looking for a solution which AVOIDS using PNGs, if possible.

EDIT2: Here's an image of what I get now:

EDIT3:

Here is my code:

Header:

@interface MyView : UIViewController  {
    CAGradientLayer *_maskLayer;
    UITableView *_tableView;
}

@property (nonatomic, retain) CAGradientLayer *maskLayer;
@property (nonatomic, retain) IBOutlet UITableView *tableView;

Implementation:

@implementation HighScoresView_iPhone

@synthesize tableView = _tableView;
@synthesize maskLayer = _maskLayer;

- (void)viewWillAppear:(BOOL)animated {

    [super viewWillAppear:animated];

    if (![self maskLayer]) {
        [self setMaskLayer:[CAGradientLayer layer]];
        CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
        CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor;

        [[self maskLayer] setColors:[NSArray arrayWithObjects:
                                     (id)outerColor, 
                                     (id)innerColor, 
                                     (id)innerColor, 
                                     (id)outerColor, 
                                     nil
                                     ]
         ];
        [[self maskLayer] setLocations:[NSArray arrayWithObjects:
                                       [NSNumber numberWithFloat:0.0], 
                                       [NSNumber numberWithFloat:0.2], 
                                       [NSNumber numberWithFloat:0.8], 
                                       [NSNumber numberWithFloat:1.0], 
                                       nil
                                       ]
        ];
        [[self maskLayer] setBounds:CGRectMake(0, 0, [[self scoreTableView] frame].size.width, [[self scoreTableView] frame].size.height)];
        [[self maskLayer] setAnchorPoint:CGPointZero];
        [[[self scoreTableView] layer] addSublayer:[self maskLayer]];
    }
}

Answer 1

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 2

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 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.