iOS - 通过动画将搜索栏从中心移动到导航栏下方（Swift）

Posted 2023-03-13

【中文标题】iOS - 通过动画将搜索栏从中心移动到导航栏下方（Swift）

【英文标题】：iOS - Moving search bar from center to below Navigation Bar by animation (Swift)

【发布时间】：2017-04-28 09:38:16

【问题描述】：

我有一个搜索栏，它通过界面生成器添加到我的视图控制器的中心，我什至将它与 IBOutlet 连接起来。但是，我不得不将搜索栏放在视图控制器的中心，因为它上面有重要信息。

我想要的是，当点击搜索栏时，它应该动画到顶部，并将自身固定在导航栏下方。我希望它排到顶部的原因是因为我需要更多空间让结果表视图控制器显示结果（点击搜索栏时会下降）。

我到处寻找，但找不到任何有关如何修复导航栏下方搜索栏的信息。请帮忙！

P.S - 类似问题链接ios Search bar that appears below navigation

【问题讨论】：

不要以为你的描述和你的链接里的描述很相似，把你的截图放上去会更有帮助

一些屏幕截图让我们直观地了解实际发生的情况。

对不起，我之前从来没有在这里上传过截图，我该怎么做呢？

我只想知道如何将搜索栏固定在导航栏下方，而不管屏幕大小等。

【参考方案1】：

首先，添加您的约束，如下图所示：

如您所见，其中 2 个约束是用破折号绘制的，这些约束的优先级小于 1000，原因是我们希望中心垂直约束和锚点到顶部约束是互斥的：

将搜索栏锚定到视图的垂直中心。 将搜索栏锚定到视图顶部。

因为我们希望搜索栏最初垂直居中，所以我们为该约束（约束编号 1）分配了 999 的优先级，以及 1 的优先级到另一个。

您可以通过单击约束并在右侧的大小检查器中设置其优先级来设置优先级，如下图所示：

其次，将这两个约束和您的搜索栏连接到您的视图控制器：

@IBOutlet weak var searchBar: UISearchBar!  
@IBOutlet weak var searchBarAnchorToTopConstraint: NSLayoutConstraint!
@IBOutlet weak var searchBarCenterVerticallyConstraint: NSLayoutConstraint!

第三，使您的视图控制器符合UISearchBarDelegate 协议，并将其设置为您的搜索栏的委托。

第四，按如下方式实现searchBarTextDidBeginEditing方法：

func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) 

    self.searchBarCenterVerticallyConstraint.priority = 1
    self.searchBarAnchorToTopConstraint.priority = 999

    UIView.animate(withDuration: 1, delay: 0, options: [.curveEaseOut], animations: 

        self.view.layoutIfNeeded()

        , completion: nil)

我们在这里所做的只是给searchBarCenterVerticallyConstraint 一个低优先级和一个高优先级searchBarAnchorToTopConstraint（我们切换了他们的优先级）。

希望这会有所帮助！

【讨论】：

您好，您似乎理解了我的问题，这就是我想要的！但是，导航栏和搜索栏之间的空间中有几个文本字段。这个解决方案还能用吗？

是的，这个解决方案只关心我们正在使用的约束，它不关心中间是否有其他组件。您只需要决定是让您的搜索栏越过其他组件还是从它们后面。

嗨，它工作正常，但后来我不得不再添加两个文本字段，所以不得不将搜索栏推到比视图控制器的中心更远的地方。但是，限制不断使其恢复。我一直在修改优先级值，但还没有。这是我移动搜索栏前后的图片链接 - imgur.com/6BvgHSn ， imgur.com/C68fsqx

通过将容器中的垂直约束替换为从 searchBar 到底部布局的约束来解决此问题。感谢您的帮助@moe