UISearchBar increases navigation bar height in iOS 11

Question

I have my UISearchBar being part of the navigation bar like:

 let searchBar = UISearchBar()
 //some more configuration to the search bar
 .....
 navigationItem.titleView = searchBar

After updating to iOS 11 something weird happened to the search bar in my app. On iOS 10 and prior I had my navigation bar looking like:

Now with iOS 11 I have:

As you can see there is difference in the rounding of the two search bars which does not bothers me. The problem is that the search bar increases the height of the navigation bar. So when I go to another controller it looks weird too:

In fact that weird black line's height plus the current navigation bar's height is equal to the height of navigation bar shown in the second picture ...

Any ideas how to get rid of the black line and having consistent navigation bar height across all view controllers ?

Solution 1

I got black line under NavigationBar with SearchBar in iOS 11 in two cases:

• when i pushed another ViewControllers from ViewController with UISearchBar

• when i dismissed ViewController with UISearchBar with "drag right to dismiss"

My solution was: adding this code to my ViewController with UISearchBar:

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.navigationController.view setNeedsLayout]; // force update layout
    [self.navigationController.view layoutIfNeeded]; // to fix height of the navigation bar
}

Swift 4 Update

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout() // force update layout
    navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
}

Solution 2

You can add a constraint of height 44 to the search bar for iOS 11.

// Swift

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

// Objective-C

if (@available(iOS 11.0, *)) {
    [searchBar.heightAnchor constraintEqualToConstant:44].active = YES;
}

Solution 3

I believe in iOS 11 UISearchBar now has the height equals to 56, and UINavigationBar uses autolayout to fit its subviews hence it increases the height. If you still want to have UISearchBar as titleView as in pre-iOS 11, I found out the best way to do it is to embed UISearchBar in a custom view, and set this view's height to 44, and assign it to navigationItem.titleView

class SearchBarContainerView: UIView {  

    let searchBar: UISearchBar  

    init(customSearchBar: UISearchBar) {  
        searchBar = customSearchBar  
        super.init(frame: CGRect.zero)  

        addSubview(searchBar)  
    }

    override convenience init(frame: CGRect) {  
        self.init(customSearchBar: UISearchBar())  
        self.frame = frame  
    }  

    required init?(coder aDecoder: NSCoder) {  
        fatalError("init(coder:) has not been implemented")  
    }  

    override func layoutSubviews() {  
        super.layoutSubviews()  
        searchBar.frame = bounds  
    }  
}  

class MyViewController: UIViewController {  

    func setupNavigationBar() {  
        let searchBar = UISearchBar()  
        let searchBarContainer = SearchBarContainerView(customSearchBar: searchBar)  
        searchBarContainer.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 44)  
        navigationItem.titleView = searchBarContainer  
    }  
} 

Solution 4

try this code on "ACKNOWLEDGEMENTS" view controller in viewDidLoad

self.extendedLayoutIncludesOpaqueBars = true

Solution 5

Thank you all! I finally found a solution.

Adding the following code to ViewController with UISearchBar.

1. First step: viewDidLoad

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.extendedLayoutIncludesOpaqueBars = YES;
    ...
}

override func viewDidLoad() {
    super.viewDidLoad()
    self.extendedLayoutIncludesOpaqueBars = true
}

2. Second step:viewWillDisappear

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
     // force update layout
    [self.navigationController.view setNeedsLayout]; 
    // to fix height of the navigation bar
    [self.navigationController.view layoutIfNeeded];  
}

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        navigationController?.view.setNeedsLayout() // force update layout
        navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
    }

View more solutions

Comments

[radioaktiv]

Correct. This is how I managed to solved it actually. As well as calling searchBar.sizeToFit() in the viewWillAppear.If you add the call to sizeToFit() I will accept your answer :) .

[zgjie]

@radioaktiv I didn't write sizeToFit() and it works for me.

[Iulian Onofrei]

But what exactly changed that caused this problem?

[zgjie]

@IulianOnofrei it use auto layout now, not before.

[Iulian Onofrei]

I mean, in iOS 11, what did Apple change to UISearchBar.

[zgjie]

@IulianOnofrei made it’s height 56 in iOS 11

[Iulian Onofrei]

Is the change documented somewhere? I couldn't find it here.

[Chris Yim]

This works, but searchBar still has a 56 height. <NSContentSizeLayoutConstraint: UISearchBar.height ＝56>,<NSLayoutConstraint UISearchBar.height of＝44>

[Oscar Apeland]

FYI, you can modify the frame without making a variable for it; CGRect().insetBy(dx:dy:) and CGRect().offsetBy(dx:dy:), in this case - searchController.searchBar.frame = searchController.searchBar.frame.insetBy(dx: 0, dy: -12)

[Michael Pirotte]

I want to do the same thing as you, but I'll wait till a more elegant solution comes up. Thanks for sharing anyway.

[Christopher Smit]

Although this works for bringing the height back to normal, if I tap on my searchbar, for some reason it cuts off the bottom part of the searchbar. Any ideas why this happens or anyone else having this issue?

[Bill Noto]

Here's the obj-c version: [searchBar.heightAnchor constraintEqualToConstant:44].active = YES; but one issue is that while this fixes the height issue, it reeks havoc on the rest of UISearchController's view. E.g., the bar buttons are hidden at first and the magnifying glass looks half drawn, or as if something is on top of it. Anyone else?

[Gustavo_fringe]

This solution worked but when you click the search bar the height is reset.

[OtakuFitness]

Totally weird looking if you use this code because it just narrows the navigation bar but the height of the search bar is still 56.

[Malav Soni]

This will create issue when you do this in landscape orientation.

[Malav Soni]

This work correctly but have issue when you change it to landscape from portrait.

[Ryan H.]

Great solution if you're not using auto layout. So far, this seems to work for landscape mode too, in the simulator.

[Gustavo_fringe]

Did anyone else find a solution? doing this creates a lot of weird behavioral issues with the search bar.

[Ross]

This is not enough answer. When you click on the field, the size is still messed up.

[Jeff]

Life saving answer! Size to fit not needed. If you have issues something else is wrong.

[de.]

I have posted a solution that fixes orientation change issues.

[tanya]

I was able to get rid of the left nav button on top of the searchBar after loading by adding setNeedsUpdateConstraints/setNeedsLayout/layoutIfNeeded for navbar in viewDidLoad (searchBar is assigned to titleView in storyboard). The only way I found to fix layout constraints issues when rotating were in viewWillTransitionToSize:...set titleView to nil and in completion block of coordinator animateAlongsideTransition, re-set titleView to searchBar and update constraints/call setNeedsUpdateConstraints/setNeedsLayout/layoutIfNeeded for navbar.

[Charlie Hung]

This answer solved all problems. zgjie's answer is great but search bar frame still changed after tap the textfield.

[code4latte]

This removed the black view in the new viewcontroller but when returning to this viewcontroller(the one that contains searchBar), the rootView actually moved up a little bit.

[mmh02]

Thanks! This is the solution I ended up going with, since I'm not using translucent bars.

[Amrit Sidhu]

Indeed this should be the answer. But I would like to add that place this piece of code in both the controller that over and below the search bar controller.

[douglasd3]

That worked for me, but a had to add navigationController?.view.layoutSubviews() in viewWillDisappear.

[DrMickeyLauer]

This does not seem to make a UISearchController reappear which – in iOS11 – might be contained in the UINavigationItem. Do you have an idea how to do that?

[Ethan Allen]

I'm pretty sure in iOS 11.4 this doesn't work anymore. Apple sets a hard height constraint on the search bar. If you break it by setting NSAutoresizingMaskLayoutConstraint = false, Apple just enforces a _UITemporaryLayoutHeight to override you.

[Anirudha Mahale]

This works very well, I would really appreciate if you just tell us what extendedLayoutIncludesOpaqueBars property does.

[Admin]

extendedLayoutIncludesOpaqueBars expand your view (self.view) under the navigation and status bar. If you add a subview to the view(For example, UIImageView) and set it constraint to the top-left of the view and run the application, you will see the different when you set this property between true and false.

[Reconquistador]

You are missing calling of super.viewDidAppear(animated)

[Parthpatel1105]

I have been finding solution since long time and finally I get the perfect solution.

[Shivam Pokhriyal]

@Gustavo_fringe Did you find any solution for this.

[Abd Al-rhman Taher Badary]

Use this with caution as for me it made the whole app freeze when is tried to swipe back to pervious view controller

[V V]

This doesnt work in iOS 13. Any workaround for this?

[Sagar Daundkar]

This solution really give a big relief to me thanks @andrew