Adding subviews to tableHeaderView with UISearchBar in iOS7 misbehaves

Question

How can one add two simple UILabels to a TableHeaderView and retain the default searchbar behavior of the search display controller in iOS7?

Or, visually:

Why does this code:

UIView *tableHeadView = self.tableView.tableHeaderView;   

UILabel *tableHeaderLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 36, 320, 30)];
[tableHeaderLabel setTextAlignment:NSTextAlignmentCenter];
tableHeaderLabel.font = [UIFont fontWithName:@"HelveticaNeue" size:18];
tableHeaderLabel.text = @"Questions"

UILabel *tableHeaderPrononce = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 320, 30)];
[tableHeaderPrononce setTextAlignment:NSTextAlignmentCenter];
tableHeaderPrononce.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];
tableHeaderPrononce.text = @"test test test test";

[tableHeadView addSubview:tableHeaderLabel];
[tableHeadView addSubview:tableHeaderPrononce];

added to a UITableViewController viewDidLoad event (which contains a UISearchDisplayerController) gives this lovely result in iOS6:


and this horrible terrible result in iOS7:

The behavior: During normal mode the UILabels I added are not shown. while search is active the UILabels suddenly appear ON TOP OF the table cells and does not scroll away

In addition I am getting crashes while searching in iOS 7 which never occurred on iOS6. Probably not related to this piece of code but nevertheless I should mentioned that.

I tried all I could find on SO about fixing this issue but always something else breaks or disappears (mainly the UISearchBar).

Help

Answer 1

Look dude, before you modify your code or get frustrated with the behavior of the iOS7, it is advised to go through the UI Transition Guide given by apple.

After reading this you will get to know, why the grouped style tableView is looking annoying is not at all annoying from ios7 point of view. Each group extends the full width of the screen.

Moreover the UISearchBar behavior can be controlled if you read through Search Bar and Scope Bar

I hope that helps. Should you need all the code, please let us know. we can provide sample.

Here is Sample Code as Required Adding UISearchBar to View rather than TableViewHeader

• Adding UISearchBar to self.view

  searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0.0f,0.0f, 320, 44.0f)];
  searchBar.delegate         = self;
  searchBar.autoresizingMask = UIViewAutoresizingFlexibleWidth;
  searchBar.searchBarStyle = UISearchBarStyleMinimal;
  [self.view addSubview:searchBar];
  

• Adding UITableView to self.view

  tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 44, self.view.bounds.size.width, self.view.bounds.size.height) style:UITableViewStylePlain];
  tableView.delegate         = self;
  tableView.dataSource       = self;
  tableView.backgroundColor = [UIColor clearColor];
  tableView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
  [self.view addSubview:tableView];
  

• Creating and Adding UITableView.tableHeaderView

  UILabel *tableHeaderLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 15)];
  [tableHeaderLabel setTextAlignment:NSTextAlignmentCenter];
  tableHeaderLabel.font = [UIFont fontWithName:@"HelveticaNeue" size:18];
  tableHeaderLabel.text = @"Questions";
  tableHeaderLabel.alpha = 0.9;
  
  UILabel *tableHeaderPrononce = [[UILabel alloc] initWithFrame:CGRectMake(0, 14, 320, 15)];
  [tableHeaderPrononce setTextAlignment:NSTextAlignmentCenter];
  tableHeaderPrononce.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];
  tableHeaderPrononce.text = @"test test test test";
  tableHeaderPrononce.alpha = 0.7;
  
  UIView *aHeaderView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 30)];
  [aHeaderView setBackgroundColor:[UIColor clearColor]];
  [aHeaderView addSubview:tableHeaderLabel];
  [aHeaderView addSubview:tableHeaderPrononce];
  tableView.tableHeaderView = aHeaderView;
  

Here are the results:

SearchDisplayController

// Create search controller
searchController = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];
searchController.searchResultsDataSource = self;
searchController.searchResultsDelegate   = self;
searchController.delegate                = self;

Answer 2

You can do this simply by UITableViewDelegate method shown below:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{

    UIView *sectionHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 40)];
    sectionHeaderView.backgroundColor = [UIColor grayColor];
    UILabel *headerLabel = [[UILabel alloc] init];
    [sectionHeaderView addSubview:headerLabel];

    return sectionHeaderView;
}