Add UISearchBar fix on top of a View in iOS7?

Question

I have a UIViewController and want to add a UISearchBar fix at the top like here:

When I tap into the search bar I want it to look like this:

It should be displayed over the navigation bar.

How can I do this using InterfaceBuilder or in Code instead of a Storyboard?

Answer 1

If you are building for iOS 8 you can use a UISearchController , if you are building for anything below iOS 8 you will have to use the now deprecated UISearchDisplayController .

Apple Documentation - UISearchController

Apple Documentation - UISearchDisplayController

Answer 2

I don't think it's possible to do all of that via the Interface Builder but if you change your mind and decide to use code, insert this in viewDidLoad() after declaring var resultSearchController = UISearchController() globally:

self.resultSearchController = ({
            let controller = UISearchController(searchResultsController: nil)
            controller.searchResultsUpdater = self
            controller.dimsBackgroundDuringPresentation = true
            controller.searchBar.sizeToFit()
            controller.dimsBackgroundDuringPresentation = false

            self.tableView.tableHeaderView = controller.searchBar
            self.definesPresentationContext = true
            return controller
        })()

This will do exactly what you want for iOS 8 and above.

Update: For interface builder, drag a UITableViewController and embed it in a Navigation Controller (select it, Editor > Embed In > Navigation Controller). Set the Navigation Controller as the initial view controller. Next drag in a Search Bar and Search Display Controller into the TableView Controller inside the table view positioning it at the top of the table view. There you go 😊