iOS SearchDisplayController prevents tableview from background color change (background stays gray)

Question

This might be a bug in iOS 7: I used storyboard to drag in Search Bar and Search Display Controller in my tableview controller. The background color of my tableview is altered after that. I am using an example from AppCoda's "how-to-add-search-bar-uitableview" to demo this issue. I only changed the example code with 1-line add-on in ViewDidLoad:

   [_tableView setBackgroundColor:[UIColor blackColor]];

See my screenshots here:

1. The bottom of the tableview has already changed to black:

2. But the top stays as gray though tableview's background was set to black: This only happens when I drag in "Search Bar and Search Display Controller". If I remove the "Search Display Controller" from storyboard, it's all good.

Answer 1

When using a UISearchDisplayController in a UITableViewController, it is very important to remember that you are dealing with two table views.

So when you drag a "Search Bar and Search Display Controller" into a UITableView (and assuming you are doing this drag in a UIStoryboard), you are actually added another UITableView that, when activated, must be managed by code in your UITableViewController file in the same manner as any other UITableView.

Consider this:

The UITableView that represents the complete data set can be called using self.tableView (or as you have written, the synthesised _tableView).

The UITableView that represents the filtered data set (filtered using your search criteria) can be called using self.searchDisplayController.searchResultsTableView

If you'd like both your default UITableView and search UITableView background colour to display a black colour, I can suggest this code (works in a TVC in my app)...

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.tableView setBackgroundView:nil];
    [self.tableView setBackgroundColor:[UIColor blackColor]];

    [self.searchDisplayController.searchResultsTableView setBackgroundView:nil];
    [self.searchDisplayController.searchResultsTableView setBackgroundColor:[UIColor blackColor]];
}

...

UPDATE

Now that I have finished my long-winded lecture, I agree that there is in fact a "bug" of sorts in Xcode. If you delete the original UISearchBar and then add a new one to a UITableViewController, before you connect it, do a Build & Run. A black background is visible below and above the table view. It is only after you set the UISearchBar as an outlet for the UISearchDisplayController that the black background is "replaced" with a grey background.

So the solution...

With thanks to Olof's answer to Different background colors for the top and bottom of a UITableView.

REPLACE the code I have written above with this code, at the end of your viewDidLoad method:

- (void)viewDidLoad {
    [super viewDidLoad];

    ...<other code>...

    CGRect frame = self.tableView.bounds;
    frame.origin.y = -frame.size.height;
    UIView* viewBackgroundBlack = [[UIView alloc] initWithFrame:frame];
    [viewBackgroundBlack setBackgroundColor:[UIColor blackColor]];
    [self.tableView addSubview:viewBackgroundBlack];

    [self.tableView setBackgroundView:nil];
    [self.tableView setBackgroundColor:[UIColor blackColor]];

    [self.searchDisplayController.searchResultsTableView setBackgroundView:nil];
    [self.searchDisplayController.searchResultsTableView setBackgroundColor:[UIColor blackColor]];
}

Answer 2

The problem arise when UISearchBar set as header view from Storyboard. Wrapping UISearchBar in UIView seems to solve the problem but brings other problems regarding compatibility with UISearchDisplayController.

I hacked into UI and basically found that UITableView positions a stub view between its top edge and header view and it's the first subview in UITableView hierarchy. Changing its background color won't work because it's updated on each scroll position change.

So my solution is to simply zero the alpha value for it. Therefore we delegate the background color to UITableView itself. It works perfectly fine on iOS 7.1 and seems to be a light-weight patch in this situation.

//
// Fix background color bug
// This patch can be applied once in viewDidLoad if you use UITableViewController
// http://stackoverflow.com/q/23026531/351305
//
- (void)_fixSearchBarHeaderViewBackgroundColorBug {
    // First subview in UITableView is a stub view positioned between table's top edge and table's header view.
    UIView* stubView = [self.tableView.subviews firstObject];

    // Make sure it's stub view and not anything else
    if([NSStringFromClass([stubView class]) isEqualToString:@"UIView"]) {
        // Set its alpha to zero to use background color from UITableView
        stubView.alpha = 0.0f;
    }
}