How to set clear background for UITableView Header with opaque body

Question

How do I make the background for a tableHeaderView clear, but keep the rest of the UITableView background opaque?

I'm using a transparent tableHeaderView for a paralax effect. The object behind the tableView is a longer than the clear tableHeaderView "window" so I can center the visible data. This works well for longer lists as I can use the tableView as a mask, but when I don't have enough cells in the table the background object displays below the cells.

Relevant code:

self.tableView.backgroundView = nil;
self.tableView.backgroundColor = [UIColor whiteColor];

UIView *tableHeaderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 0.0, 320.0, 250.0)];
tableHeaderView.backgroundColor = [UIColor clearColor];
self.tableView.tableHeaderView = tableHeaderView;

I've tried setting a background color for the tableView, but that makes the whole UITableView opaque (including the tableHeaderView), removing the "window" I have at the top.

Any ideas on how I can keep my transparent tableHeaderView while setting the body of the UITableView opaque?

Thanks!

Answer 1

After a couple days I was able to figure it out. The premise of the solution is to add a subview to the backgroundView of your table and change the subview's frame as you scroll.

The relevant code in viewDidLoad:

...
// Create the UIView that will become the tableView backgroundView
UIView *tableViewBackground = [[UIView alloc] initWithFrame:self.tableView.frame];
tableViewBackground.backgroundColor = [UIColor clearColor];

// Create the opaque backgroundView and set the frame so that it starts below the headerView
partialBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 250, 320.0, self.view.frame.size.height)];
partialBackgroundView.backgroundColor = [UIColor redColor];

// Add the partial background to the main background view and apply it to the tableView
[tableViewBackground addSubview:solidTableBodyBackgroundView];
self.tableView.backgroundView = tableViewBackground;
...

And then as you scroll, you can update the "visible window" in scrollViewDidScroll:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat scrollOffset = scrollView.contentOffset.y;
    partialBackgroundView.frame = CGRectMake(0, 250 - scrollOffset, 320, self.view.frame.size.height);
    // Other parallax code for scrolling
}

There may be better ways of doing this, but I found this to be pretty simple and it worked well.

Answer 2

A simpler way of doing the accepted answer for multiple sections

// Set the view for each cell with a clear color
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, SectionHeaderHeight)]; //
    view.backgroundColor = [UIColor clearColor];
    return view;
}

// Set the height of your desired header
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 10;
}

Answer 3

Here's a super late but quick and simple answer to this if like me you're returning a subclass of UITableViewHeaderFooterView as header view in your viewForHeaderInSection delegate method.

Setting myHeaderView.backgroundColor = UIColor.clear not helping you?

Try setting myHeaderView.layer.backgroundColor = UIColor.clear.cgColor instead.

Answer 4

Unless I'm misunderstanding something, you should be able to do this in two steps:

1. You will need to make the cells in your table opaque. Leave the tableView's background color set to [UIColor clearColor], and same goes for the views for your table header (and section headers if that applies).

2. Then take your table footer view (tableFooterView property of the UITableView), make it opaque, and make it very tall. When you only have a few cells in the table, the table footer will take up the rest of the screen.

Again, I might be misunderstanding something, but give that a go and see what you get. Good luck!

Answer 5

Swift-5, Transparent Section Header

1. Add a view and set its background as transparent
2. then return this view in ViewForSectionHeader method in tableView

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return viewForSection
}