Create a search bar like in the iOS 7 Contacts app

Question

I have an application where I have a UITableView with sections which are scrollable on the side through sectionIndexTitlesForTableView:.

In the tableHeaderView of the UITableView I want to add a UISearchBar, which I want to behave like the one Apple is using in their new Contacts app in iOS7. But I can't seem to get it to work.

The search bar is not 100% the width of the screen, but instead has its right side against the section index.

My questions are:

• How do I get the search bar's width to 100% when it's the tableHeaderView of a UITableView that has a visible section index?
• How can I create a transition like in the Contacts app of iOS 7 where the navigation bar hides and the search bar's grey background extends to the status bar?

I have tried several things already, including adding the search bar in the navigation bar, and using UISearchBarController, but I can't find good documentation on the Apple website on how to create this. Also, the transition guide from iOS6 to iOS7 has been no good help for me.

Here are two pictures that illustrate my problem:

Answer 1

Two main differences to the way Apple do their app, which will solve your problems.

First, their UISearchBar isn't the headerView for the tableView. It's a separate view above the table. You'll need to change your UITableViewController to a UIViewController that has a UITableView positioned just below your UISearchBar.

Second, their UISearchBar has an associated Search Display Controller. Assuming you're using a storyboard file, this comes bundled together for you - just add the UISearchBar with the Search Display Controller. This will handle all of the transitioning to underneath the status bar for you.