点击Search Bar时隐藏Segment Control并更新TableView布局的实现方法

嘿，我给你整理了一套简洁又完善的实现方案，结合Storyboard和少量代码就能搞定你的需求，操作起来很顺手：

第一步：Storyboard 准备工作 #

• 先给你的 TableView 添加两个顶部约束：
  • 第一个约束：TableView.top 关联到 SegmentControl.bottom，设置好你需要的间距（比如8pt），默认保持激活状态，然后把这个约束拖成 IBOutlet，命名为 tableViewTopToSegmentConstraint
  • 第二个约束：TableView.top 关联到 SearchBar.bottom，间距设为0，然后在属性面板里把这个约束的激活状态关掉，同样拖成 IBOutlet，命名为 tableViewTopToSearchBarConstraint
• 把 SearchBar 的 delegate 连线到你的 ViewController（在Storyboard里按住Ctrl从SearchBar拖到ViewController，选择delegate即可）
• 分别把 SearchBar 和 SegmentControl 拖成 IBOutlet 到代码里

第二步：代码实现逻辑 #

直接在你的 ViewController 里添加下面的代码，逻辑很清晰：

import UIKit

class YourViewController: UIViewController {
    // 替换成你自己的ViewController类名
    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var segmentControl: UISegmentedControl!
    @IBOutlet weak var tableViewTopToSegmentConstraint: NSLayoutConstraint!
    @IBOutlet weak var tableViewTopToSearchBarConstraint: NSLayoutConstraint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 也可以在这里手动设置delegate，避免Storyboard连线出错
        searchBar.delegate = self
    }
}

// 扩展实现UISearchBarDelegate方法
extension YourViewController: UISearchBarDelegate {
    // 点击搜索栏开始编辑时触发
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
        // 用动画实现平滑过渡
        UIView.animate(withDuration: 0.3) {
            self.segmentControl.isHidden = true
            // 切换约束：禁用原约束，启用新约束
            self.tableViewTopToSegmentConstraint.isActive = false
            self.tableViewTopToSearchBarConstraint.isActive = true
            // 强制刷新布局，让动画生效
            self.view.layoutIfNeeded()
        }
        // 显示取消按钮，方便用户退出搜索状态
        searchBar.showsCancelButton = true
    }
    
    // 点击取消按钮时恢复原布局
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        UIView.animate(withDuration: 0.3) {
            self.segmentControl.isHidden = false
            self.tableViewTopToSearchBarConstraint.isActive = false
            self.tableViewTopToSegmentConstraint.isActive = true
            self.view.layoutIfNeeded()
        }
        // 结束编辑状态，清空搜索内容，隐藏取消按钮
        searchBar.resignFirstResponder()
        searchBar.showsCancelButton = false
        searchBar.text = ""
    }
    
    // 可选：处理搜索按钮点击事件
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        // 这里写你的搜索逻辑
        searchBar.resignFirstResponder()
    }
}

方案优势 #

• 用动画过渡，用户体验更流畅，不会有突兀的布局跳转
• 通过约束的激活/禁用切换布局，完全符合AutoLayout的规范，不会出现约束冲突
• 完整处理了搜索状态的进入和退出，逻辑闭环，用户操作更友好
• 代码量少，结构清晰，后期维护起来也很方便

内容的提问来源于stack exchange，提问作者Usama bin Attique