UITableView section with clearColor background?

Question

I have a ViewController with a radial background gradient. Inside I have a UITableView with cells and sections. Now I want to show the gradient behind the table view while scrolling. The problem is that when the section locks at the top, you can see cells behind the section. I would set the background color of the section, but if I do this, it will not match the background of the radial gradient. Is there anyway that the cells are trimmed under the partitions while maintaining a clearColor background?

Answer 1

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

You can achieve this by setting the table as background

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

as well as a 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 create a custom view (for example, create an image view with transparent .png for the background)

I hope I understood your question correctly.

---

change after clarification

to show that cells stop before going under the section heading:

create 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 want you to either customize it or use CALayer , and instead of creating a mask programmatically, create a .png with the correct width / height of the section title.

ANYWAY: if you use 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 the controller:

  CustomTableView *_tableView; //ivar _tableView = [[CustomTableView alloc] initWithFrame:YOUR_FRAME]; 

The main idea is a mask, you create a mask form at the top of the table, which is the same size as the section heading. the cells will seem to “disappear” behind him. It is a bit complicated, but it will work.

Answer 2

An easy way to get the title of a transparent section without creating your own header views.

 - (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section { if ([view isKindOfClass:[UITableViewHeaderFooterView class]]) { UITableViewHeaderFooterView *headerView = (UITableViewHeaderFooterView *)view; headerView.contentView.backgroundColor = [UIColor clearColor]; headerView.backgroundView.backgroundColor = [UIColor clearColor]; } } 

This piece of code works great in iOS 7.

EDIT I know this is a bit late, but along with this you need to add 2 lines, making sure that the background color (and the background color of the background image?) Of the Uitableview is also clear.

 tableView.backgroundColor = [UIColor clearColor]; tableView.backgroundView.backgroundColor = [UIColor clearColor];