Shawn Frank
Shawn Frank

Reputation: 5213

Custom UISearchController transition

I have an app which has a search bar that appears in the navigation bar and my set up is a hybrid of SwiftUI and UIKit.

I don't think this has bearing on the question at hand but here is my set up:

I have a custom hosting controller to control handle my searches, set up something like this:

class IndexSearchHostingController<Content: View>: UIHostingController<Content>, UISearchControllerDelegate, UISearchBarDelegate {

    init(rootView: Content) {
        super.init(rootView: rootView)
        addSearchBar()
    }

    private lazy var searchController: UISearchController = {
        let viewController =  UIHostingController(rootView: SearchResultsView())
        let search = UISearchController(searchResultsController: viewController)
        search.delegate = self
        search.showsSearchResultsController = true
        search.obscuresBackgroundDuringPresentation = true
        search.searchBar.delegate = self
       
        return search
    }()

    private func addSearchBar() {
        let image = UIImage(named: "iconName")?.withRenderingMode(.automatic)
        searchController.searchBar.placeholder = "Search"
        searchController.searchBar.setImage(image, for: .search, state: .normal)
        searchController.searchBar.autocapitalizationType = .none
        navigationItem.searchController = searchController
        navigationItem.hidesSearchBarWhenScrolling = false
    }
}

// Somewhere else in my code:
let viewController = IndexSearchHostingController(rootView: SwiftUIHomeView())
viewController.tabBarItem = tabBarItem.value
let navigationController = UINavigationController(rootViewController: viewController)

This works fine and I get the standard iOS search experience

However, because we want to add some more things to the navigation bar, it is getting quite crowded, I want to remove the search bar from the navigation bar and add a right bar button for search instead. Tapping this would launch the search experience.

How could we customize the transition / navigation experience to the search results controller be like spotify?

SwiftUI UIKit custom search controller transition experience

To try and replicate,

  1. I did not add the searchController to the navigation item initially
  2. I then added the search controller to the navigation item only on tapping the search button and then setting the search controller to active after a delay
@objc func showSearch() {
    navigationItem.searchController = searchController

    // Without the delay, I had to tap the button twice
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        self.searchController.isActive = true
        self.searchController.becomeFirstResponder()
    }
}

This again works but the transition / animation is not very nice and a bit delayed.

Within the dispatch block I tried messing with some scale properties of the search bar but it looks nothing close to like what we see in Spotify.

So How could we customize the transition / navigation experience to the search results controller be like spotify which seems like the search bar transitions out from the button.

Upvotes: 0

Views: 27

Answers (0)

Related Questions