CODEWITHSUNDEEP
iosswiftuisearchcontroller
MortalMan
MortalMan

Reputation: 2612

Make UISearchBar dismiss like Music App

Notice how the searchBar magnifying glass and placeholder text both shift over on dismissal:

Is there any way I could dismiss this search bar without the text and icon moving over? See the animation of the Music app for the animation I am trying to achieve.

I have a UISeachBar that gets presented when the search button is clicked in a nav bar.

@IBAction func searchButtonPressed(sender: AnyObject) {

    searchController = UISearchController(searchResultsController: nil)
    searchController.searchResultsUpdater = self
    searchController.searchBar.delegate = self
    searchController.hidesNavigationBarDuringPresentation = false
    searchController.dimsBackgroundDuringPresentation = false
    presentViewController(searchController, animated: true, completion: nil)
}

Now when the cancel button is pressed, I want the whole view to move up without seeing the SearchBar icon and placeholder text slide to the center of the searchBar as the view moves up off screen.

I know there is the method searchBarCancelButtonClicked(searchBar:), but this seems to automatically dismiss the SearchBar and I don't know how to control that.

How can I make the SearchBar dismiss like the one in the Music app?

EDIT: Here is the only delegate method I am using:

func updateSearchResultsForSearchController(searchController: UISearchController) {
    masterFilter.removeAll()
    filterContentForSearchText(searchController.searchBar.text!)
    tableView.reloadData()
}

Upvotes: 4

Views: 1593

Answers (3)

iBug
iBug

Reputation: 2352

This is how I have achieved this. It is simple and easy.

extension UIViewController {


    func setNavigationBarItem() {

        let searchaButton = UIButton.init(frame: CGRectMake(0, 0, 30, 30))
        searchaButton.setBackgroundImage(UIImage(named: "search.png"), forState: UIControlState.Normal)
        searchaButton.addTarget(self, action: #selector(self.searchPressed), forControlEvents: UIControlEvents.TouchUpInside)


        let rightButton: UIBarButtonItem = UIBarButtonItem.init(customView: searchaButton)

        navigationItem.rightBarButtonItem = rightButton

    }


    public func searchPressed(){

        var searchController: UISearchController!

        // Create the search results view controller and use it for the UISearchController.
        let searchResultsController = storyboard!.instantiateViewControllerWithIdentifier("SearchResultController") as! SearchResultsViewController

        // Create the search controller and make it perform the results updating.
        searchController = UISearchController(searchResultsController: searchResultsController)
        searchController.searchResultsUpdater = searchResultsController
        searchController.hidesNavigationBarDuringPresentation = false

        // Present the view controller.
        presentViewController(searchController, animated: true, completion: nil)

    }

}

Note:

This code is for old swift version.

enter image description here

I hope this will help you.

Upvotes: 1

pxpgraphics
pxpgraphics

Reputation: 1357

To make this animation work, you'll need to understand custom UIViewController transitions. Within the UISearchBarDelegate method -searchBarCancelButtonClicked(searchBar:), you'll need to do a few things:

  1. Hide the UINavigationBar on the UISearchController dismissal
  2. Animate the UITableView to the bottom of the frame and fade out.
  3. If you're presenting search modally, ensure that you're setting the modalPresentationStyle to UIModalPresentationCurrentContext.

Upvotes: 0

user4151918
user4151918

Reputation:

The searchBar expands to the right because the search is being cancelled, and the cancel button is disappearing.

Instead of canceling the search and triggering that animation, simply explicitly dismiss the search controller.

You can do this by setting

searchController.active = false

Upvotes: 0

Related Questions