iOS 11 SearchBar in NavigationBar

https://stackoverflow.com/questions/45350035/ios-11-searchbar-in-navigationbar

With iOS 11 Apple has redesigned the UISearchBar by making the corners rounder and the height bigger. Adding a UISearchBar to the navigationBar is pretty simple by just setting it as the titleView of the navigationItem using navigationItem.titleView = searchBar.

However, in iOS 11 it does not seem to work anymore as expected. Have a look at the screens where we compare the same setup using iOS 10 and iOS 11

iOS 10 

iOS 11 

You can clearly see that the SearchBar increases the size of the NavigationBar but the bar buttons do not get aligned correctly. Also the searchBar does not use the available space on the left anymore.

Putting the searchBar into a wrapper view to get the cancel button on iPad as described here Cancel button is not shown in UISearchBar also does not seem work anymore since the searchBar is then not visible at all.

If anyone has similar issues or already knowns how to fix/improve this I would be very thankful.

This was built using Xcode 9 Beta 4. Maybe future releases will fix this issue.

UPDATE:

Since this does not get "fixed" we now decided to use following solution: We added a new UIBarButtonItem in the NavBar and when the user presses this button we then present a new ViewController where we only put a searchBar into the NavBar which looks good now. Using the selected answer may be the best solution.

uinavigationbar uisearchbar ios11

shareimprove this question

edited Sep 21 at 18:59

asked Jul 27 at 11:52

PatrickDotStar

447614

 

add a comment

4 Answers

activeoldestvotes

up vote20down voteaccepted

There's a new searchController property on navigationItem in iOS 11.

https://developer.apple.com/documentation/uikit/uinavigationitem/2897305-searchcontroller

Use like this...

if #available(iOS 11.0, *) {     navigationItem.searchController = searchController} else {     // Fallback on earlier versions     navigationItem.titleView = searchController?.searchBar}

shareimprove this answer

answered Aug 22 at 20:08

Justin Domnitz

1,3511124

 

1 

My answer is similar to @cook answer, but I thought the link and the code might help clarify a bit. – Justin Domnitz Aug 22 at 20:35

6 

This will not give the results as original described. Using the searchController property will put the search bar below the navigation. – Molanda Sep 26 at 1:08

 

This works on iPhone but doesn't work on iPad for me. – Starchand Oct 4 at 9:59

add a comment

up vote9down vote

You can change the height of UISearchBar in iOS 11 by adding a constraint of height 44:

if #available(iOS 11.0, *) {    searchBar.heightAnchor.constraint(equalToConstant: 44).isActive = true}

shareimprove this answer

edited Oct 4 at 11:59

Christian Ascone

498111

answered Sep 22 at 3:17

zgjie

7681819

 

 

This makes top and bottom bezel shorter. I tried this objective-c solution: [[self.notesSearchBar.heightAnchor constraintEqualToConstant:44.0] setActive:YES], but I dont like this solution because it makes top bottom margin thinner and weird. – coolcool1994 Sep 30 at 12:59

 

This worked for me. It repositions my search bar maintaining the correct layout. – Christian Ascone Oct 4 at