Question

I have a ViewController with a radial gradient background. Inside that I have a UITableView with cells and sections. Now I want to show the gradient behind the table view as you scroll. The issue is that when the section locks at the top you can see the cells behind the section. I would set the section background color but if I do that it does not match the radial gradient background. Is there anyway to have the cells clip under the sections while keeping the clearColor background?

Answer 1

if I understand it, you want a completely clear tableview and tableview cell so you can see the background of your view controller.

You can achieve this by setting the tableview as having no background

tableview.backgroundColor = [UIColor clearColor];
tableView.opaque = NO;
tableView.backgroundView = nil;

and also the cell

cell.backgroundColor = [UIColor clearColor]

if you also want the section to be transparent, you can use this method:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

to make a custom view (for example create an image view with a transparent .png for the background)

I hope I understand your question correctly.

---

edit after clarification

to give the appearance that the cells stop before going underneath the section header:

make a class that is a subclass of uitableview with this ivar:

@interface CustomTableView : UITableView
{
        CAGradientLayer* maskLayer;
}

obviously this will create a gradient but if you wanted you could either tweak it or use CALayer and instead of programmatically creating the mask, create a .png with the correct width/height of your section header.

ANYWAY: if you use the CAGradientLayer:

- (id)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) 
    {
        [self setupGradients]; //call your method
    }
    return self;
}

- (void)setupGradients
{
    [self addObserver:self forKeyPath:@"contentOffset" options:0 context:nil];

    */ ***** if you choose to use CALayer instead of CAGradient ****** */
    //maskLayer = [[CALayer layer] retain]; 
    //maskLayer.contents = (id) [UIImage imageNamed:@"maskLayer.png"].CGImage; 
    //maskLayer.backgroundColor = [UIColor clearColor].CGColor; 
    */ ***** if you choose to use CALayer instead of CAGradient ****** */

    maskLayer = [[CAGradientLayer layer] retain];

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

    maskLayer.colors = [NSArray arrayWithObjects:(id)outerColor, 
                        (id)innerColor, (id)innerColor, (id)outerColor, nil];
    maskLayer.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], 
                           [NSNumber numberWithFloat:0.0], 
                           [NSNumber numberWithFloat:0.9], 
                           [NSNumber numberWithFloat:1.0], nil]; //this creates a gradient     effect. Tweak these numbers for a hard line. 

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

    self.layer.mask = maskLayer;
    }

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{        
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    maskLayer.position = CGPointMake(0, self.contentOffset.y);
    [CATransaction commit];
}

then in your view controller:

   CustomTableView *_tableView; //ivar

   _tableView = [[CustomTableView alloc] initWithFrame:YOUR_FRAME];

The basic idea is a mask, you create a mask shape on the top of your tableview that is the same size as your section header. it will appear that the cells “disappear” behind it. It’s a bit tricky, but it will work.