UITableView extend different background color below cells

Question

I have a UITableView that I have given a headerView that has a green background. I have also given the UITableView that same green background color so that when the tableView is pulled down it feels like a seemless color above the tableView. Works perfectly.

The problem is my tableView only has 4 rows, and below that it shows the green color again.

How can I show white below the rows instead so that I only see the green background color when pulling down the tableView?

Answer 1

You could add a fifth cell with no content, and make it, say 400 points high, and limit the size of the table's contentView so that you can't scroll to the bottom of that cell.

-(void)viewWillLayoutSubviews {
    self.tableView.contentSize = CGSizeMake(self.tableView.frame.size.width, 500);
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat h = (indexPath.row == 4)? 400:44;
    return h;
}

Putting the contentSize setting in viewWillLayoutSubviews ensures that it will be reset to that value if you rotate your device.

Answer 2

You can add an extra top view, same as in this answer to UIRefreshControl Background Color:

CGRect frame = self.tableView.bounds;
frame.origin.y = -frame.size.height;

UIView *bgView = [[UIView alloc] initWithFrame:frame];
bgView.backgroundColor = [UIColor greenColor];

[self.tableView insertSubview:bgView atIndex:0];