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 view's contents has a light gray background color (see screenshot).

(Notice that the search bar has a slightly darker edge line at its top. This is not there for the default UISearchBar, but subclassing should take care of that.)

I tried setting the background color of the UITableView, but that affects the rows as well. Does anyone know how to achieve this effect? Am I going to have to override implement drawRect: or is there a built in way?

Answer 1

Setting transparencies is bad for performance. What you want is the gray area above the search bar, but it should still be white beyond the end of the list.

You can add a subview to your UITableView that lives above the content instead.

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

You could add more fancy stuff to the view if you like, perhaps a fade, or a divider line without subclassing UISearchBar.