UITableView with transparent gradient above and below

Question

I searched this forum, Google and other forums and did not find an answer to my specific problem.

Basically, I have a UIView that contains a UITableView . I followed this tutorial and it was partially successful. The problem is the gradient. I have a background image behind a UITableView . As the cell approaches the gradient, I want the background to appear instead of white.

I also found this post in which I found the tutorial, but I did not want to grab this post with my questions for the mat.

Any help in the right direction would be great!

EDIT1: I know I can use another image with a background image and a middle cut, but I'm looking for a solution that AVOIDS uses PNG if possible.

EDIT2: Here is an image of what I am getting now:

EDIT3:

Here is my code:

Title:

 @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 using the CALayer mask property. But you cannot set the mask to your own view of the table, because this mask will scroll with the rows of the table. Instead, place the table view inside the new supervisor (of the UIView class) that you create just for that. Name it tableMaskView .

The new supervisor must have the backgroundColor property set to UIColor.clearColor and its opaque property set to NO . Then you can set the mask as follows:

 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 is easiest to program. Check if this is enough.

Answer 2

It looks 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 3

Replace this line:

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

With the help of this:

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

(Or, if you insist on your syntax style, even think that I don't understand why):

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

Also this answer may help you.

Answer 4

Swift 3 version rob mayoff 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