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

I'm sure that that is [UITableView backgroundColor]. You have affected rows, because rows have backgroundColor == clear (or semi-transparent). So, If you'll make rows non-trasparent, all will work fine. This will be solution.

Answer 2

In Swift (tested on iOS9)

    let backView = UIView(frame: self.tableView.bounds)
    backView.backgroundColor = UIColor.clearColor() // or whatever color
    self.tableView.backgroundView = backView

Answer 3

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.

Answer 4

EASIEST SOLUTION

The easiest way to create different colors in the bottom and in the top of a bouncing area of a table view is to set the key tableHeaderBackgroundColor of the table view. Doing this way you set the top color. I'm not sure, but maybe there is another key for the footer, take a look. If you don't find anything, you just have to set the background of the table view with the color that you want to show in the bottom. Above you can see an example code:

self.table.setValue(UIColor.blue , forKey: "tableHeaderBackgroundColor")

Hope it help you. If yes, let other people know about this easy way giving an up in the answer :)

Answer 5

I've only found one way to do this. You have to set the backgroundColor of the UITableView to be transparent, set the backgroundColor of the cell's contentView to whatever colour you want the actual cells to be, then crucially you have to get the light grey colour to appear behind the UITableView. That last step you can do by either setting the backgroundColour of the UIWindow, or of whatever is containing or your tableViewController.

So, assuming you have a view controller that is derived from UITableViewController, insert these lines in the -(void)viewDidLoad method:-

// sets the background of the table to be transparent
self.tableView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.0];
// assuming we are inside a navigation or tab controller, set the background
self.parentViewController.view.backgroundColor = [UIColor lightGrayColor];

Then inside the part of tableView:cellForRowAtIndexPath: that creates new cells, add:-

// set an opaque background for the cells 
cell.contentView.backgroundColor = [UIColor whiteColor];

Answer 6

I followed the tip outlined by Peylow, for a UITableView, by simply adding a subview. My only change from the code was to grab a color a bit closer to the one used in Apple apps, plus I got it a bit closer to Apple's look of having a line above the UISearchbar by reducing the frame origin y coordinate by one pixel:

frame.origin.y = -frame.size.height - 1