UISearchController - search bar should be visible always

Question

Aim: To have a search bar that is always visible.

1. View controller is embedded in a navigation controller
2. No table view exists
3. When user taps on search bar, search bar needs to animate from its current position to the top of the navigation bar (move upwards) like in the iOS contacts app.
4. Use UISearchController

What I have done:

1. I have added the search bar to the view controller's view
2. I am manually presenting the search view controller (code below)

Problem:

• I am unable to control the animation, presently the search bar moves downwards from top of the screen to the place of the navigation bar.

Expected behavior:

• To be able to animate the search bar by moving it upwards from the current position to the navigation bar

Question

1. Is my approach correct ?
2. How can i animate and move the search bar upwards from the current position ?

Code:

    func setupSearchController() {
        searchController.searchResultsUpdater = self
        self.definesPresentationContext = false
        searchController.delegate = self
        searchController.hidesNavigationBarDuringPresentation = true

        let searchBar = searchController.searchBar

        view.addSubview(searchBar)

        searchBar.translatesAutoresizingMaskIntoConstraints = false

        searchBar.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
        searchBar.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true
        searchBar.topAnchor.constraintEqualToAnchor(topLayoutGuide.bottomAnchor).active = true

    }

    func presentSearchController(searchController: UISearchController) {
        let searchBar = searchController.searchBar

        searchBar.removeFromSuperview()

        let baseView = searchController.view

        baseView.addSubview(searchBar)

        searchBar.leadingAnchor.constraintEqualToAnchor(baseView.leadingAnchor).active = true
        searchBar.trailingAnchor.constraintEqualToAnchor(baseView.trailingAnchor).active = true
        searchBar.topAnchor.constraintEqualToAnchor(searchController.topLayoutGuide.bottomAnchor).active = true

        self.presentViewController(searchController, animated: true) {

        }
    }

Answer 1

I am not quite following your logic there, but all I can say is that you can implement this really easy.

Solution

• On your Interface Builder create a UIView will be the container of the searchController's searchBar and set the constraints as following:

• Connect that UIView to the UIViewController and name it searchBarContainer
• Create a property of UISearchController that you want to use: var searchController: UISearchController! = nil
• Add searchController.searchBar into the searchBarContainer

Luckily your controller should look like this: (Note that here I have not implemented the delegates here but you can take care of that as this is not related to the animation :))

class SearchViewController: UIViewController {
    var searchController: UISearchController! = nil
    @IBOutlet weak var searchBarContainer: UIView!

    // MARK: - View Lifecycle

    override func viewDidLoad() {
        super.viewDidLoad()

        searchController = UISearchController(searchResultsController: nil)
        self.searchBarContainer.addSubview(searchController.searchBar)
    }

    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)

        // Setup the frame each time that the view appears in order to fit the width of the screen
        // If you use autolayout just call searchController.searchBar.layoutIfNeeded()
        var frame = searchController.searchBar.bounds
        frame.size.width = self.view.bounds.size.width
        searchController.searchBar.frame = frame
    }
}

Output

My Solution

iOS Contacts