無法在 HeaderView 中添加 UISearchBar（tableview 的 header 視圖）？

Question

無法在 tableView 部分中看到 searchBar header 一切都是以編程方式完成的，沒有使用故事板

import UIKit

class ConversationsViewController: UITableViewController {
    
    
    
    let searchBar:UISearchBar = {
        let bar = UISearchBar()
        bar.placeholder = "search conversations"
        bar.translatesAutoresizingMaskIntoConstraints = false
        return bar
    }()
    let headerView:UIView = {
        let hView = UIView()
//        hView.backgroundColor = .red
        hView.translatesAutoresizingMaskIntoConstraints = false
        return hView
        
    }()
    //    we want custom cell and header view
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view.
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

    }
//    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
//        return "section \(section)"
//    }
    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        headerView.addSubview(searchBar)
        searchBar.centerXAnchor.constraint(equalTo: headerView.centerXAnchor).isActive = true
        searchBar.centerYAnchor.constraint(equalTo: headerView.centerYAnchor).isActive = true
        searchBar.heightAnchor.constraint(equalToConstant: 100).isActive = true
        searchBar.widthAnchor.constraint(equalToConstant: 40).isActive = true
        return headerView
    }
    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 70
    }
}

這是 output 照片

我嘗試了不同的方法，但我發現這種方法可以在 tableView 中添加 headerView，現在我無法弄清楚如何在 headerView 中添加該搜索欄，我在上面嘗試了但它不起作用，請幫助謝謝

Answer 1

幾件事...

header 部分的視圖不應將.translatesAutoresizingMaskIntoConstraints設置為false 。 將其保留為默認值true 。

不要給UISearchBar一個高度約束——讓它使用它的固有高度。

我們確實需要給搜索欄一個寬度限制。 如果您希望它適合表格的寬度，請使用：

searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, constant: 0.0).isActive = true

如果您希望它只是部分寬度，請為該線指定負值constant ，或使用乘數：

// this will make the search bar 90% of the width of the table
searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, multiplier: 0.9).isActive = true

這是您的 class 進行了這些修改：

class ConversationsViewController: UITableViewController {
    
    let searchBar:UISearchBar = {
        let bar = UISearchBar()
        bar.placeholder = "search conversations"
        bar.translatesAutoresizingMaskIntoConstraints = false
        return bar
    }()

    let headerView:UIView = {
        let hView = UIView()

        // give it a background color so we can easily see
        //  if it is laying out correctly
        hView.backgroundColor = .red

        // section header view should leave this at the default TRUE
        //hView.translatesAutoresizingMaskIntoConstraints = false

        return hView
    }()

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

    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        // add the searchBar
        headerView.addSubview(searchBar)
        
        // center it horizontally and vertically
        searchBar.centerXAnchor.constraint(equalTo: headerView.centerXAnchor).isActive = true
        searchBar.centerYAnchor.constraint(equalTo: headerView.centerYAnchor).isActive = true
        
        // don't set height constraint - use UISearchBar intrinsic height
        //searchBar.heightAnchor.constraint(equalToConstant: 100).isActive = true
        
        // constrain width equal to headerView width
        //  we can adjust the constant if we don't want it to span the entire width of the table
        //  by using a negative value for the constant, or using a mulitplier to get a percent of the width
        searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, constant: 0.0).isActive = true
        
        return headerView
    }
    
    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 70
    }
    
}