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?
To try and replicate,
- I did not add the searchController to the navigation item initially
- 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.
