Swift中如何将添加按钮正确放置在UITableView分区头部标题右侧？

问题分析 #

你的代码存在两个核心问题导致布局异常：

1. 初始化headerView时宽高参数写反，误将tableView的高度作为header宽度、宽度作为高度，直接导致header自身尺寸错误；
2. 同时混用frame布局与AutoLayout，两种布局规则冲突，引发按钮位置偏移。

另外，要实现按钮在"Contacts"标题右侧的效果，需要在headerView中同时添加标题标签和按钮，通过AutoLayout统一控制两者位置。

修正后的自定义Header代码 #

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    // 创建header容器视图，禁用自动布局转换避免冲突
    let headerView = UIView()
    headerView.translatesAutoresizingMaskIntoConstraints = false
    
    // 添加标题标签
    let titleLabel = UILabel()
    titleLabel.text = "Contacts"
    titleLabel.font = UIFont.boldSystemFont(ofSize: 16)
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    headerView.addSubview(titleLabel)
    
    // 添加"+"按钮
    let addButton = UIButton(type: .system)
    addButton.setTitle("+", for: .normal)
    addButton.layer.cornerRadius = 8
    addButton.backgroundColor = .blue
    addButton.setTitleColor(.white, for: .normal)
    addButton.translatesAutoresizingMaskIntoConstraints = false
    headerView.addSubview(addButton)
    
    // 配置AutoLayout约束
    NSLayoutConstraint.activate([
        // 固定header高度，可按需调整
        headerView.heightAnchor.constraint(equalToConstant: 44),
        
        // 标题居左、垂直居中
        titleLabel.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: 16),
        titleLabel.centerYAnchor.constraint(equalTo: headerView.centerYAnchor),
        
        // 按钮居右、垂直居中，固定宽高
        addButton.trailingAnchor.constraint(equalTo: headerView.trailingAnchor, constant: -16),
        addButton.centerYAnchor.constraint(equalTo: headerView.centerYAnchor),
        addButton.widthAnchor.constraint(equalToConstant: 36),
        addButton.heightAnchor.constraint(equalToConstant: 36)
    ])
    
    return headerView
}

// 必须实现该方法指定header高度
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 44
}

备选方案：复用系统默认Header添加按钮 #

如果想保留系统默认的header样式，仅在右侧追加按钮，可以用以下代码：

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    // 获取或创建系统默认header
    let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "DefaultHeader") ?? UITableViewHeaderFooterView(reuseIdentifier: "DefaultHeader")
    headerView.textLabel?.text = "Contacts"
    
    // 添加按钮
    let addButton = UIButton(type: .system)
    addButton.setTitle("+", for: .normal)
    addButton.layer.cornerRadius = 8
    addButton.backgroundColor = .blue
    addButton.setTitleColor(.white, for: .normal)
    addButton.translatesAutoresizingMaskIntoConstraints = false
    headerView.addSubview(addButton)
    
    // 设置约束
    NSLayoutConstraint.activate([
        addButton.trailingAnchor.constraint(equalTo: headerView.trailingAnchor, constant: -16),
        addButton.centerYAnchor.constraint(equalTo: headerView.centerYAnchor),
        addButton.widthAnchor.constraint(equalToConstant: 36),
        addButton.heightAnchor.constraint(equalToConstant: 36)
    ])
    
    return headerView
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return UITableView.automaticDimension
}

关键注意事项 #

• 所有通过AutoLayout布局的子视图，必须设置translatesAutoresizingMaskIntoConstraints = false，避免与系统自动布局规则冲突；
• 禁止混用frame和AutoLayout，保持布局规则统一；
• 必须实现heightForHeaderInSection方法，明确header高度或使用自动高度计算。

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