Different background colors for the top and bottom of a UITableView

Question

If you look at your Inbox in iPhone OS 3.0's Mail app, you'll see that swiping down displays a grayish background color above the UISearchBar.

Now, if you scroll down to the bottom of the table, you'll see that the background color at that end is white.

I can think of a couple ways of solving this problem, but they're pretty hacky:

• Change the table view's background color depending on the current scrollOffset by overriding -scrollViewDidScroll:
• Give the UITableView a clear background color and then set its superview's backgroundColor to a gradient pattern image.

Does anyone know what the "best practice" solution is for this problem? thanks.

Answer 1

You should look into using the tableHeaderView and tableFooterView properties of the UITableView.

Answer 2

I think you just want to set your cell's BG Color to white, and make the table's BG color the other (gray) color. Im not sure you'd have success trying to do that with transparent cells.

Answer 3

Courtesy of Erica Sadun:

- (void) scrollViewDidScroll: (UIScrollView *) sv
{
    float percent =  sv.contentOffset.y / sv.contentSize.height;
    percent = 0.5 + (MAX(MIN(1.0f, percent), 0.0f) / 2.0f);

    sv.backgroundColor = [UIColor colorWithRed:percent * 0.20392
                                         green:percent * 0.19607
                                          blue:percent * 0.61176 alpha: 1.0f];
}

and then here's the modified version I'm using:

- (void)scrollViewDidScroll:(UIScrollView *)sv
{
     UIColor *backgroundColor = nil;

     float percent = sv.contentOffset.y / sv.contentSize.height;
     percent = 0.5 + (MAX(MIN(1.0f, percent), 0.0f) / 2.0f);

     if (0.5f == percent)
     {
      backgroundColor = RGBCOLOR(233.0f, 235.0f, 237.0f);
     }
     else
     {
      CGFloat r = 233.0f * (1.0f - percent) + 255.0f * percent;
      CGFloat g = 235.0f * (1.0f - percent) + 255.0f * percent;
      CGFloat b = 237.0f * (1.0f - percent) + 255.0f * percent;
      backgroundColor = RGBCOLOR(r,g,b);
     }   
     sv.backgroundColor = backgroundColor;
}

Answer 4

Set the tableFooterView to a view of 0 height and width that draws way outside its bounds. An easy way is to add a big subview to it:

self.tableView.tableFooterView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
UIView *bigFooterView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1000)];
bigFooterView.backgroundColor = [UIColor whiteColor];
bigFooterView.opaque = YES;
[self.tableView.tableFooterView addSubview:bigFooterView];
[bigFooterView release];

adjust [UIColor whiteColor] and the width of your bigFooterView accordingly (if your tableView can go horizontal, you'll want it to be wider than 320). This way at the top you will see whatever your table view background is, and on the bottom whatever you set this view's background to.

Answer 5

This might not be a "best practice," but if you really want to do it like Apple, there's a private UITableView property called tableHeaderBackgroundColor. The grayish color is #e2e7ed.

You could put something like this in the -viewDidLoad method of a UITableViewController:

UIColor *grayishColor = [UIColor colorWithRed:226/255.0
                                        green:231/255.0
                                         blue:237/255.0 alpha:1.0];
[self.tableView setValue:grayishColor forKey:@"tableHeaderBackgroundColor"];

Answer 6

There´s good answers at Light gray background in “bounce area”...

Where i found this codesnipet (slightly modified) that works great:

CGRect frame = self.tableView.bounds;
frame.origin.y = -frame.size.height;
UIView* grayView = [[UIView alloc] initWithFrame:frame];
grayView.backgroundColor = [UIColor grayColor];
[self.tableView addSubview:grayView];
[grayView release];