如何避免SearchBar使用后自动扩展？并设置其为TableView宽度的一半

嘿，我来帮你搞定这个问题！你的核心问题有两个：一是搜索后SearchBar自动占满全屏，二是要把固定宽度改成TableView宽度的一半。咱们一步步来解决：

问题根源分析 #

你现在直接把searchBar和textfieldView添加到tableView上，并且用固定frame布局。但UISearchController的searchBar在搜索状态下会被系统重新布局，直接覆盖你手动设置的frame，导致宽度异常。另外固定frame完全不适应屏幕旋转、不同设备尺寸的场景，必须改用Auto Layout来实现动态宽度。

完整解决方案代码 #

替换你原来的两个方法，用下面的实现：

// 初始化并配置SearchController
func setupSearchController() {
    searchController.searchResultsUpdater = self
    searchController.dimsBackgroundDuringPresentation = false
    definesPresentationContext = true
    // 关闭searchBar的自动布局掩码，让我们能自定义约束
    searchController.searchBar.translatesAutoresizingMaskIntoConstraints = false
    searchController.searchBar.setBackgroundImage(#imageLiteral(resourceName: "Rectangle"), for: .any, barMetrics: .default)
}

// 创建并配置HeaderView
func setupTableHeaderView() {
    // 1. 创建一个容器视图作为Header的根视图
    let headerContainer = UIView()
    headerContainer.translatesAutoresizingMaskIntoConstraints = false
    
    // 2. 创建文本输入框
    let textfieldView = UITextField()
    textfieldView.translatesAutoresizingMaskIntoConstraints = false
    textfieldView.placeholder = "输入内容"
    // 可以加个背景色方便调试布局
    textfieldView.backgroundColor = .lightGray
    
    // 3. 将两个子视图添加到容器
    headerContainer.addSubview(textfieldView)
    headerContainer.addSubview(searchController.searchBar)
    
    // 4. 添加Auto Layout约束
    NSLayoutConstraint.activate([
        // 容器视图的高度固定为40
        headerContainer.heightAnchor.constraint(equalToConstant: 40),
        
        // 文本框：左对齐容器，上下贴边，宽度为容器的一半
        textfieldView.leadingAnchor.constraint(equalTo: headerContainer.leadingAnchor),
        textfieldView.topAnchor.constraint(equalTo: headerContainer.topAnchor),
        textfieldView.bottomAnchor.constraint(equalTo: headerContainer.bottomAnchor),
        textfieldView.widthAnchor.constraint(equalTo: headerContainer.widthAnchor, multiplier: 0.5),
        
        // SearchBar：右对齐容器，上下贴边，宽度为容器的一半
        searchController.searchBar.trailingAnchor.constraint(equalTo: headerContainer.trailingAnchor),
        searchController.searchBar.topAnchor.constraint(equalTo: headerContainer.topAnchor),
        searchController.searchBar.bottomAnchor.constraint(equalTo: headerContainer.bottomAnchor),
        searchController.searchBar.widthAnchor.constraint(equalTo: headerContainer.widthAnchor, multiplier: 0.5)
    ])
    
    // 5. 设置tableView的HeaderView
    tableView.tableHeaderView = headerContainer
    // 强制HeaderView更新布局，避免布局异常
    headerContainer.layoutIfNeeded()
}

关键要点说明 #

• 容器视图封装：把两个子视图放到一个容器里，再设置为tableView.tableHeaderView，这样系统不会直接修改子视图的布局，而是通过容器来管理。
• 关闭自动布局掩码：所有自定义添加的视图都要设置translatesAutoresizingMaskIntoConstraints = false，否则Auto Layout不会生效。
• 动态宽度约束：用multiplier: 0.5来让每个子视图的宽度等于容器的一半，而容器的宽度会自动匹配tableView的宽度，完美实现tableView.width / 2的需求。
• 避免直接操作frame：手动设置frame在系统布局更新时会被覆盖，Auto Layout能保证布局始终符合你的约束规则。

使用方式 #

在viewDidLoad()里调用这两个方法即可：

override func viewDidLoad() {
    super.viewDidLoad()
    setupSearchController()
    setupTableHeaderView()
}

这样修改后，不管是首次加载还是搜索状态，两个视图都会保持TableView宽度的一半，再也不会出现宽度异常的问题啦！

内容的提问来源于stack exchange，提问作者Maruta