Broken UISearchBar animation embedded in NavigationItem

Question

I am experiencing a problem with the new way of adding search bar to the navigation item.

As you can see in the picture below, there are two UIViewControllers one after the other, and both have the search bar. The problem is the animation, which is ugly when search bar is visible on the first view controller but not on the second one. The area occupied by the search bar stays on the screen and suddenly disappears.

The code is very basic (no other changes in the project were made):

(I write primarily in C#, so there might be errors in this code.)

ViewController.swift:

import UIKit

class ViewController: UITableViewController, UISearchResultsUpdating {

override func loadView() {
    super.loadView()

    definesPresentationContext = true;

    navigationController?.navigationBar.prefersLargeTitles = true;
    navigationItem.largeTitleDisplayMode = .automatic;
    navigationItem.title = "VC"

    tableView.insetsContentViewsToSafeArea = true;
    tableView.dataSource = self;

    refreshControl = UIRefreshControl();
    refreshControl?.addTarget(self, action: #selector(ViewController.handleRefresh(_:)), for: UIControlEvents.valueChanged)
    tableView.refreshControl = refreshControl;

    let stvc = UITableViewController();
    stvc.tableView.dataSource = self;

    let sc = UISearchController(searchResultsController: stvc);
    sc.searchResultsUpdater = self;
    navigationItem.searchController = sc;
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    var cell = tableView.dequeueReusableCell(withIdentifier: "cell1");
    if (cell == nil) {
        cell = UITableViewCell(style: .default, reuseIdentifier: "cell1");
    }
    cell?.textLabel?.text = "cell " + String(indexPath.row);
    return cell!;
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 20;
}

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let vc = ViewController();
    navigationController?.pushViewController(vc, animated: true);
}

@objc func handleRefresh(_ refreshControl: UIRefreshControl) {
    DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(2), execute: {
        refreshControl.endRefreshing();
    })
}

func updateSearchResults(for searchController: UISearchController) {
}
}

AppDelegate.swift:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

    window = UIWindow(frame: UIScreen.main.bounds);
    window?.rootViewController = UINavigationController(rootViewController: ViewController());
    window?.makeKeyAndVisible();

    UINavigationBar.appearance().barTintColor = UIColor.red;

    return true
}
}

Ideas?

Answer 1

It looks like Apple still needs to iron out the use of the UISearchBar in the new large title style. If the UIViewController you push to doesn't have its navigationItem.searchController set, the animation works fine. When navigating between two instances of UIViewController that both have a searchController set, you get the issue you describe where the height of the navigation bar jumps.

You can solve (work around) the problem by creating the UISearchController every time viewDidAppear gets called (instead of creating it in loadView) and setting navigationItem.searchController to nil on viewDidDisappear.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    DispatchQueue.main.async {
        let stvc = UITableViewController()
        stvc.tableView.dataSource = self

        let sc = UISearchController(searchResultsController: stvc)
        sc.searchResultsUpdater = self
        self.navigationItem.searchController = sc
    }
}

override func viewDidDisappear(_ animated: Bool) {
    super.viewDidDisappear(animated)

    self.navigationItem.searchController = nil
}

The reason for the asynchronous dispatch is that when setting the navigationItem.searchController inline in the viewDidAppear method, an exception is raised:

Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Only one palette with a top boundary edge can be active outside of a transition. Current active palette is <_UINavigationControllerManagedSearchPalette: 0x7fad67117e80; frame = (0 116; 414 0); layer = <CALayer: 0x60400002c8e0>>'

I know this is only a work around, but hopefully this will help you for now, until Apple solves the issue with navigating between two view controllers that both have a UISearchController set on their navigationItem.

Answer 2

The accepted answer does solve the problem for some situations, but I was experiencing it resulting in the complete removal of the navigationItem in the pushed view controller if the first search bar was active.

I've come up with another workaround, similar to the answer by stu, but requiring no meddling with constraints. The approach is to determine, at the point of the segue, whether the search bar is visible. If it is, we instruct the destination view controller to make its search bar visible from load. This means that the navigation item animation behaves correctly:

Assuming the two view controllers are called UIViewController1 and UIViewController2, where 1 pushes 2, the code is as follows:

class ViewController1: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let searchController = UISearchController(searchResultsController: nil)
        searchController.obscuresBackgroundDuringPresentation = false
        navigationItem.searchController = searchController

        definesPresentationContext = true
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let viewController2 = segue.destination as? ViewController2, let searchController = navigationItem.searchController {

            // If the search bar is visible (but not active, which would make it visible but at the top of the view)
            // in this view controller as we are preparing to segue, instruct the destination view controller that its
            // search bar should be visible from load.
            viewController2.forceSearchBarVisibleOnLoad = !searchController.isActive && searchController.searchBar.frame.height > 0
        }
    }
}

class ViewController2: UITableViewController {

    var forceSearchBarVisibleOnLoad = false

    override func viewDidLoad() {
        super.viewDidLoad()

        let searchController = UISearchController(searchResultsController: nil)
        searchController.obscuresBackgroundDuringPresentation = false
        navigationItem.searchController = searchController

        // If on load we want to force the search bar to be visible, we make it so that it is always visible to start with
        if forceSearchBarVisibleOnLoad {
            navigationItem.hidesSearchBarWhenScrolling = false
        }
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // When the view has appeared, we switch back the default behaviour of the search bar being hideable.
        // The search bar will already be visible at this point, thus achieving what we aimed to do (have it
        // visible during the animation).
        navigationItem.hidesSearchBarWhenScrolling = true
    }
}