iOS 11 search bar in tableViewHeader jumps to the top of the screen on focus

Question

There are 2 unanswered posts already on this topic here and here, where no one provided a working solution to this problem.

First image shows iOS 10 behaviour of search controller, where you can see hierarchy on the left side and search controller frame on the right framed in red. View at the center in blue is the one displayed correctly in the table.

Second image shows iOS 11 behaviour where search controller exits the bounds of the tableView header, and moves to the top of the screen which has no sense, because table view is positioned at 230 pixels from the top of the screen.

The code I used to display all of this is following (in viewDidLoad ):

self.definesPresentationContext = YES;
self.searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
self.searchController.searchResultsUpdater = self;
self.searchController.dimsBackgroundDuringPresentation = NO;
self.searchController.searchBar.delegate = self;
self.searchController.searchBar.clipsToBounds = YES;
self.tableView.tableHeaderView = self.searchController.searchBar;
self.searchController.searchBar.placeholder = @"Enter name or email";
[self.searchController.searchBar sizeToFit];

Bilk

Answer 1

Since iOS11, search control is part of navigation bar. You will need something like the following

Objective-C if (@available(iOS 11.0, *)) { self.navigationItem.searchController = searchController } else { self.tableView.tableHeaderView = searchController.searchBar }

Swift

if #available(iOS 11.0, *) {

Wheeling

And they are completely dropping support for tableView header section used for search bar? I see that it works until it gets focused as expected. Any documentation reference on this that proves this claim? – Bilk

It's not saying header view is removed from table, but search should now be implemented in navigation item. See this WWDC talk Updating Your App for iOS 11 slides page 23. – Wheeling

This is what Apple recommend, but it doesn't always work: iOS11 UISearchBar missing in UINavigationBar when embedded in UISplitViewController. You can still use tableHeaderView, but not without some tweaking... Using UISearchController with UISearchBar in tableHeaderView in iOS11 – Outfoot

Answer 2

Here is constraints of tableView from in view controller from the storyboard.

 var tableConstraints: [NSLayoutConstraint]  {
            var constraints = [NSLayoutConstraint]()
            constraints.append(NSLayoutConstraint(item: self.tableViewMyMedia, attribute: .left, relatedBy: .equal,
                                                  toItem: self.view, attribute: .left, multiplier: 1.0, constant: 1.0))
            constraints.append(NSLayoutConstraint(item: self.tableViewMyMedia, attribute: .right, relatedBy: .equal,
                                                  toItem: self.view, attribute: .right, multiplier: 1.0, constant: 1.0))
            constraints.append(NSLayoutConstraint(item: self.tableViewMyMedia, attribute: .top, relatedBy: .equal,
                                                  toItem: self.view, attribute: .top, multiplier: 1.0, constant: 1.0))
            constraints.append(NSLayoutConstraint(item: self.tableViewMyMedia, attribute: .bottom, relatedBy: .equal,
                                                  toItem: self.view, attribute: .bottom, multiplier: 1.0, constant: 1.0))
            return constraints
        }

Now add searchbar and add this constrains like this

  let search = UISearchController(searchResultsController: nil)
            search.searchResultsUpdater = self
            self.navigationItem.searchController = search
            NSLayoutConstraint.activate(tableConstraints) // important

And check, its not jumping when scroll up and down.

Antinode

Answer 3

Try to use

searchController.hidesNavigationBarDuringPresentation = NO;

Result will surprise you!

Cavuoto