UISearchBar Table Section Index Titles Overlap
cocoa-touch, iphone, uisearchbar, uitableview
Solution
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.
Problem
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.