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

Do you mean the A-Z of the index letters on the right side of screen overrun into the search bar, as seen in this screenshot where the 'A' and the 'B' appear in the search bar's right edge?

(a) I cannot find any way to avoid this alphabet-overrun problem. The approach linked by Scott McCammon's answer here is forbidden by Apple (and even then I'm not sure it solves this problem).

(b) I see this behavior in Apple's Contacts apps in iOS 6.0.1 on my iPod touch (4th gen).

(c) I suppose logically it is a feature not a bug, as the search bar is in the header of the table view. The header is part of the table view, and scrolls like part of the table view, so perhaps it makes sense for the index alphabet to be drawn as it does over the rest of the table view.

This issue becomes more of a problem when you have scope buttons. No space is reserved on the right for scope buttons so the index alphabet draws right on top of the right-most button.