Complete animation of user tapping UISearchBar off screen

Question

When a UISearchBar is tapped, the cancel button slides in and the TextField lies over to accommodate the button. I will call this the cancel-button-animation.

In my app, when the user taps the search button, a view with a UISearchController and a UITableView fades in. I want the view to fade in with the cancel-button-animation already finished. Similar to the iOS music app. I have tried this:

self.myTableView.frame = CGRectMake(0, 20, self.view.bounds.width, self.view.bounds.height - 20)
self.resultSearchController.searchBar.becomeFirstResponder()

UIView.animateWithDuration(0.3, delay: 0.0, options: .CurveLinear, animations: {
    self.myTableView.alpha = CGFloat(1.0)

        }, completion: nil)

When I make the searchBar first responder off screen, shouldn't that complete the cancel-button-animation finish? It doesn't.

Right now, the cancel-button-animation happens while on screen, THEN the view (TableView) fades in. How can I make the cancel-button-animation happen while the view's alpha is at 0?

[You can present a UISearchController](http://stackoverflow.com/a/26796991/4151918) which will slide down in place, with its cancel button already visible. Calendar does this, as well as Music. — , Aug 29 '15 at 03:48
I am having trouble figuring out how to apply this Objective-C code to my `UISearchBar` implementation. — MortalMan, Aug 29 '15 at 04:06

score 7 · Accepted Answer · answered Aug 29 '15 at 04:30

7

Here's Apple's Swift version from UICatalog sample code.

It animates a search controller into place over the navigation bar, exactly like Music and Calendar do.

As you can see from that project, the searchBar cancel button is already visible, during the animation, as you desired.

When the user taps your search button, just call similar code, as illustrated in by this sample's IBAction.

/*
    Copyright (C) 2015 Apple Inc. All Rights Reserved.
    See LICENSE.txt for this sample’s licensing information

    Abstract:
    A view controller that demonstrates how to present a search controller over a navigation bar.
*/

import UIKit

class SearchPresentOverNavigationBarViewController: SearchControllerBaseViewController {
    // MARK: Properties

    // `searchController` is set when the search button is clicked.
    var searchController: UISearchController!

    // MARK: Actions

    @IBAction func searchButtonClicked(button: UIBarButtonItem) {
        // Create the search results view controller and use it for the UISearchController.
        let searchResultsController = storyboard!.instantiateViewControllerWithIdentifier(SearchResultsViewController.StoryboardConstants.identifier) 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)
    }
}

answered Aug 29 '15 at 04:30

This is how I currently make my search bar. Would this method still work for me? http://stackoverflow.com/q/32282401/3711622 – MortalMan Aug 29 '15 at 04:34
That won't do what you're asking to do in this question, regarding the animation. That code puts a searchBar in the tableView header, which is a different technique. If you want the search bar to animate down, like the Music app, with its cancel button already visible, you'll have to change from that way to this new way. – Aug 29 '15 at 04:41
OK I follow. I am trying this implementation and I have a problem with this line: `let searchResultsController = storyboard!.instantiateViewControllerWithIdentifier(SearchResultsViewController.StoryboardConstants.identifier) as! SearchResultsViewController` I don't have `SearchResultsViewController.StoryboardConstants.identifier)` nor `SearchResultsViewController` What am I supposed to do? – MortalMan Aug 29 '15 at 13:56
Your old implementation had a hidden tableView that you animated into view. So, your existing view controller has code to handle displaying its search results. You don't need to provide a different searchResultsController to your search controller, if you want your current view controller to continue to handle the search results. – Aug 29 '15 at 14:28
Do I just provide no controller? Or which one do I provide? I only have one controller, my UIViewController. I am really stuck. – MortalMan Aug 29 '15 at 14:32
From the [documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchController/): *Set the searchResultsController parameter to nil to display the search results in the same view that you are searching.* Apple has sample code you can try which shows how to display results in the same view controller. I encourage you to download, compile, and run, then study the sample projects to see and learn how the code works, so you understand the code you're trying to use in your app. – Aug 29 '15 at 14:43
Thanks, I got the transition looking right. One small issue, when the cancel button is pressed, the animation is different from the one in the music app. Not the biggest deal, but do know how I can make the animation the same? – MortalMan Aug 29 '15 at 15:22
2

Better to post that as a separate question so you can show your new code and we can see how/where you are dismissing the presentation. – Aug 29 '15 at 15:29
http://stackoverflow.com/questions/32287894/make-uisearchbar-dismiss-like-music-app – MortalMan Aug 29 '15 at 15:54

Complete animation of user tapping UISearchBar off screen

1 Answers1