Light gray background in “bounce area” of a UITableView

Question

Apple\'s iPhone apps such as Music and Contants use a search bar in a UITableView. When you scroll down so that the search bar moves down, the empty space above the scroll v

Answer 1

If you are using a tableviewcell, you can set the view background to be opaque white. Then use

self.tableView.backgroundColor = [UIColor grayColor];

in the view did load method.

Answer 2

This is one of my very favorite tricks.

UIView *topview = [[[UIView alloc] initWithFrame:CGRectMake(0,-480,320,480)] autorelease];
topview.backgroundColor = [UIColor colorWithRed:226.0/255.0 green:231.0/255.0 blue:238.0/255.0 alpha:1];

[self.tableView addSubview:topview];

Basically you're creating a big view the size of the screen and placing it "above" the content area. You'll never be able to scroll up past it.

And don't worry about the memory impact of a UIView that's 320x480 pixels, it won't consume any significant memory because the CALayer doesn't have any meaningful content.

NOTE: Why is this answer relevant when the "accepted" answer is so much simpler? Why not just set the backgroundView on the table view? It's because, in the case of the Contacts app as shown in the original question, the area "above" the table view has a different background color (light blue) than the area "below" the table view (white). This technique allows you to have two different colors above and below the table view, which cannot be accomplished by a simple background.

EDIT 1/2018: As Tom in the comments pointed out, this answer is quite old and assumes that all iOS devices have the same screen size (seems crazy but it was the case in 2009 when I answered this). The concept I present here still works, but you should use UIScreen.main.bounds to figure out the actual screen size, or you could get into some fancy auto layout stuff (suggestions welcome). I don't recommend using tableView.bounds as in another answer, because typically in viewDidLoad the size of your views is not necessarily the size that they will become after the controller resizes them. Sometimes they start out as 0x0!

Answer 3

For anyone who's wondering how to do the same for the bottom bounce area:

First add a subview with your desired background color to your table view's background view:

self.bottomView = [[UIView alloc] initWithFrame:CGRectOffset(self.tableView.frame, 0, self.tableView.frame.size.height)];
self.bottomView.backgroundColor = whateverColorYouLike;

[self.tableView.backgroundView addSubview:self.bottomView];

And then in your table view's delegate:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGRect frame = self.bottomView.frame;
    frame.origin.y = self.tableView.contentSize.height - self.tableView.contentOffset.y;
    self.bottomView.frame = frame;
}

Answer 4

As of iOS 7, you can tinker this by changing the tableview background view.

[self.tableView setBackgroundView:view];

make the view's background colour the same as your parent view colour.