UISearchBar Table Section Index Titles Overlap

Question

How do I change the width of the UISearchBar when it is inside a table header so that the section index doesn't overlap the textfield? I want to recreate the same layout you find in the contacts view of the phone app.

Answer 1

One possible solution is to add a custom view to the tableHeaderView. This is what I did:

searchBar is a UISearchBar I declared in the header file. I created a UIView and add a UINavigationBar for the entire width and add the short UISearchBar on top of it. Then, I finally assigned the UIView to tableHeaderView.

searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0.0, 0.0, 290.0, 44.0)];

UIView *customTableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 44.0)];
UINavigationBar *dummyNavigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 44.0)];
[customTableHeaderView addSubview:dummyNavigationBar];
[customTableHeaderView addSubview:searchBar];
[dummyNavigationBar release];

self.tableView.tableHeaderView = customTableHeaderView;
[customTableHeaderView release];

A more elegant solution can be to stretch the UISearchBar using the contentStretch property. I still have to try that and check if it works.

Answer 2

If you use a UISearchDisplayController, the desired behavior will work automagically as noted in this answer.