UISearchBar 增加了 iOS 11 中的导航栏高度

UISearchBar increases navigation bar height in iOS 11

提问by radioaktiv

I have my UISearchBarbeing part of the navigation bar like:

我已经UISearchBar成为导航栏的一部分，例如：

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

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

更新到iOS 11我的应用程序中的搜索栏发生了奇怪的事情后。在此iOS 10之前，我的导航栏看起来像：

Now with iOS 11I have:

现在iOS 11我有：

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 ?

任何想法如何摆脱黑线并在所有视图控制器中具有一致的导航栏高度？

采纳答案by Andrew

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

在两种情况下，我在 iOS 11 中带有 SearchBar 的 NavigationBar 下出现黑线：

• when i pushed another ViewControllers from ViewController with UISearchBar

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

• 当我使用 UISearchBar 从 ViewController 推送另一个 ViewControllers

• 当我用 UISearchBar 用“向右拖动关闭”关闭 ViewController 时

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

我的解决方案是：使用 UISearchBar 将此代码添加到我的 ViewController：

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

斯威夫特 4 更新

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

回答by zgjie

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

您可以向 iOS 11 的搜索栏添加高度为 44 的约束。

// Swift

// 斯威夫特

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

// Objective-C

// 目标-C

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

回答by Mai Mai

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

我相信在 iOS 11 UISearchBar 现在的高度等于 56，并且 UINavigationBar 使用自动布局来适应其子视图，因此它增加了高度。如果您仍然希望像在 iOS 11 之前一样将 UISearchBar 作为 titleView，我发现最好的方法是将 UISearchBar 嵌入自定义视图中，并将此视图的高度设置为 44，并将其分配给 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  
    }  
} 

回答by Silverwind

try this code on "ACKNOWLEDGEMENTS" view controller in viewDidLoad

在 viewDidLoad 中的“ACKNOWLEDGEMENTS”视图控制器上试试这个代码

self.extendedLayoutIncludesOpaqueBars = true

回答by BlessNeo

Thank you all! I finally found a solution.

谢谢你们！我终于找到了解决方案。

Adding the following code to ViewController with UISearchBar.

使用 UISearchBar 将以下代码添加到 ViewController。

1. First step: viewDidLoad

1. 第一步： viewDidLoad

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

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

1. Second step:viewWillDisappear

2. 第二步：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
    }

回答by Hassy

In Objective-C

在 Objective-C 中

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

回答by Avendi Sianipar

This happen to me too, all running well in iOS 12.4 and getting weird in 13 above. The problem is in iOS 13 navigation bar height increase from 88 to 100 after jump from UIViewController that implement searchBar.

这也发生在我身上，在 iOS 12.4 中运行良好，在 13 上面变得奇怪。问题是在从实现 searchBar 的 UIViewController 跳转后，iOS 13 导航栏的高度从 88 增加到 100。

Try this in your UIViewController that implement searchBar.

在实现 searchBar 的 UIViewController 中试试这个。

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout()
    navigationController?.view.layoutIfNeeded()
}

Preview after fixing:

修复后预览：

Preview before fixing:

修复前预览：

回答by Ohifriend

Unable to comment, but wanted to share some additional issues I ran into while spending many hours trying to get to the bottom of this issue even after using one of the other solutions.

无法发表评论，但想分享一些我遇到的其他问题，即使在使用其他解决方案之一后，我也花了很多时间试图深入了解这个问题。

It appears the best fix for me was Andrew's answer:

对我来说最好的解决办法是安德鲁的回答：

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

However, at the very least in iOS 12.1, if your UINavigationBar:

但是，至少在 iOS 12.1 中，如果您UINavigationBar：

• has isTranslucentset to false, the View Controller with the search bar appears to not get it's view's layout adjusted back when interactively dismissing (normal dismissing via back button appears to work).
• has it's background image set using setBackgroundImage(UIImage(), for: .default), the transition animation doesn't work properly and will jump back to its position after finishing.

• 已isTranslucent设置为false，带有搜索栏的视图控制器在交互式关闭时似乎没有调整回其视图的布局（通过后退按钮正常关闭似乎有效）。
• 使用 设置背景图像setBackgroundImage(UIImage(), for: .default)，过渡动画无法正常工作，完成后会跳回其位置。

These particular properties were set to get the Navigation Bar to appear in a certain way however, so I need to do some adjusting to get it back, or put up with the weird behaviour. Will try to remember to update the above if I run into anything else or find other solutions or differences in other OS versions.

这些特定的属性被设置为让导航栏以某种方式出现，所以我需要做一些调整才能让它恢复，或者忍受奇怪的行为。如果我遇到任何其他问题或在其他操作系统版本中找到其他解决方案或差异，将尝试记住更新上述内容。

回答by Mantas Laurinavi?ius

All solution didn't work for me so before I pushed view controller I did:

所有解决方案对我都不起作用，所以在我推送视图控制器之前，我做了：

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

    self.navigationItem.titleView = UIView()
}

And to make search bar present when going back:

并在返回时显示搜索栏：

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

    self.navigationItem.titleView = UISearchBar()
}

回答by alemorgado

EDIT: The @zgjie answer is a better solution for this problem: https://stackoverflow.com/a/46356265/1713123

编辑：@zgjie 答案是这个问题的更好解决方案：https://stackoverflow.com/a/46356265/1713123

It seems this happens because in iOS 11 the default height value of SearchBar was changed to 56, instead 44 on previous iOS versions.

之所以会发生这种情况，是因为在 iOS 11 中，SearchBar 的默认高度值更改为 56，而不是之前的 iOS 版本中的 44。

For now, I've applied this workaround, setting searchBar height back to 44:

现在，我已应用此解决方法，将 searchBar 高度设置回 44：

let barFrame = searchController.searchBar.frame
searchController.searchBar.frame = CGRect(x: 0, y: 0, width: barFrame.width, height: 44)    

Another solution could be use the new searchController property on navigationItem in iOS 11:

另一种解决方案是在 iOS 11 中对 navigationItem使用新的 searchController 属性：

navigationItem.searchController = searchController

But this way da searchBar appears below navigation title.

但是这样da searchBar出现在导航标题下方。