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?

Olives

Check in device.. It may be simulator issue. Try with viewDidLoad() (instead of loadView() ) – Megillah

Nope, on device it is the same. – Olives

And viewDidLoad has the same result. – Olives

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.

Dys

iOS 11...nice miss Apple.. 😂 – Roussel

Still get the same crash when switching between tabs in at TabBarController :( Any tips? – Backed

@Dys Do you have any idea how to handle the back action - when on the first screen the search bar is under the navigation bar and on the second the search bar is visible and you tap back - you there is the same glitch – Sackcloth

Have you tried setting the navigationItem.searchController to nil on viewWillAppear and viewDidDisappear? – Dys

still present on iOS 12 – Squill

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
    }
}

Mufti

Hii, can you pls check this once.. #58428443 – Honest

Answer 3

My solution for this problem is to update the constraint that is keeping the UISearchBar visible, when the UIViewController is being dismissed. I was not able to use silicon_valley's solution as even with the asynchronous dispatch I was getting the crash he mentioned. This is admittedly a pretty messy solution but Apple hasn't made this easy.

The code below assumes you have a property containing a UISearchController instance within your UIViewController subclass called searchController

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

    if
        animated
            && !searchController.isActive
            && !searchController.isEditing
            && navigationController.map({$0.viewControllers.last != self}) ?? false,
        let searchBarSuperview = searchController.searchBar.superview,
        let searchBarHeightConstraint = searchBarSuperview.constraints.first(where: {
            $0.firstAttribute == .height
                && $0.secondItem == nil
                && $0.secondAttribute == .notAnAttribute
                && $0.constant > 0
        }) {

        UIView.performWithoutAnimation {
            searchBarHeightConstraint.constant = 0
            searchBarSuperview.superview?.layoutIfNeeded()
        }
    }
}

You can remove the performWithoutAnimation and layoutIfNeeded, and it will still animate; however I found the animation was never triggered the first time, and it doesn't look that great anyway.

I hope Apple fixes this in a later iOS release, the current release is 12.1.4 at the time of writing.

Mitchelmitchell

Answer 4

In the VC1:

override func viewDidLoad() {
   if #available(iOS 11.0, *) {
        navigationItem.hidesSearchBarWhenScrolling = false
        navigationItem.searchController = searchController
    }
}
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    if #available(iOS 11.0, *) {
        navigationItem.hidesSearchBarWhenScrolling = true
    }
}

In the VC2, use the same code.

This will solve your problem more clearly, than set serchController to nil

Roller

Answer 5

This issue was fixed in iOS 13 beta 1. Check your workarounds before update app for new verison.

Inhabiter

Answer 6

I got the same issue, after spent some days to workaround and investigate. Finally, I create a custom view, and replace the titleView by this view. It means, I don't use the search controller. iOS 11 is a bad, Apple.

Loree

Answer 7

I have added this code in viewDidLoad() and it's working, when I moved in b/w of tabs

searchController.dimsBackgroundDuringPresentation

Hydrogenolysis

How can this change something? Did you forget appending = false in your line of code? – Acroterion