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

时间:2017-04-28 09:38:17

标签: ios swift uisearchbar

我有一个搜索栏,通过界面构建​​器添加到我的视图控制器的中心,我甚至将它与IBOutlet连接。但是,我必须将搜索栏放在视图控制器的中心,因为它上面有重要的信息。

我想要的是,当点击搜索栏时,它应该设置为顶部的动画,并将其自身固定在导航栏下方。我之所以想要它到顶部的原因是因为我需要更多的空间用于结果表View控制器显示结果(当点击搜索栏时它会下降)。

我到处寻找,但无法找到有关如何修复导航栏下方搜索栏的任何信息。请帮忙!

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

1 个答案:

答案 0 :(得分:2)

首先,添加您的约束,如下图所示:

enter image description here enter image description here

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

  1. 将搜索栏固定到视图的垂直中心的那个。
  2. 将搜索栏固定在视图顶部的文件。
  3. 由于我们希望搜索栏最初垂直居中,我们会为该约束(约束编号1)指定 999 的优先级,优先级 1 到另一个。

    您可以通过单击约束并从右侧的尺寸检查器设置其优先级来设置优先级,如下图所示:

    enter image description here

    其次,将这两个约束和搜索栏连接到视图控制器:

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

    第三,让你的视图控制器符合UISearchBarDelegate协议,并将其设置为搜索栏的代表。

    Forth,以下列方式实现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高优先级(我们切换了优先级)。

    希望这有帮助!