0

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.

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.