Swift自定义Section Header Cell的块选中实现及问题咨询

嘿，我来帮你搞定这个自定义section header的块选中功能！因为你是用UITableViewCell来做section header的，默认它没有自带的选中交互逻辑，所以我们需要手动来实现，步骤很清晰，往下看：

第一步：给HeaderViewCell添加选中状态的UI控制 #

首先在你的HeaderViewCell类里，我们需要一个自定义的选中状态属性，并且根据这个属性来切换UI样式（比如背景色、文字样式）。同时要关闭cell默认的选中样式，避免冲突：

class HeaderViewCell: UITableViewCell {
    @IBOutlet weak var sectionTitle: UILabel!
    
    // 自定义选中状态标识，监听值变化来更新UI
    var isSelectedHeader: Bool = false {
        didSet {
            updateSelectionAppearance()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // 关闭cell默认的选中样式，我们自己处理
        selectionStyle = .none
    }
    
    // 根据选中状态更新UI样式
    private func updateSelectionAppearance() {
        if isSelectedHeader {
            // 这里改成你想要的选中样式，比如背景变灰、文字加粗
            backgroundColor = .systemGray5
            sectionTitle.font = .boldSystemFont(ofSize: sectionTitle.font.pointSize)
        } else {
            // 恢复默认样式
            backgroundColor = .systemBackground
            sectionTitle.font = .systemFont(ofSize: sectionTitle.font.pointSize)
        }
    }
}

第二步：在ViewController中跟踪选中状态并添加点击交互 #

接下来回到你的ViewController，我们需要一个变量来记录当前选中的section，然后给header cell添加点击手势，处理选中逻辑：

1. 定义选中状态变量 #

// 记录当前选中的section索引，nil表示没有选中任何section
private var selectedSectionIndex: Int?

2. 完善viewForHeaderInSection方法 #

在这个方法里，我们要给header cell设置初始选中状态，并且添加点击手势（注意要先移除旧的手势，避免重复添加）：

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerCell = tableView.dequeueReusableCell(withIdentifier: "headerCell") as! HeaderViewCell
    headerCell.sectionTitle.text = viewModel.items[section].sectionTitle
    
    // 设置初始选中状态：如果当前section是已选中的，就标记为选中
    headerCell.isSelectedHeader = (selectedSectionIndex == section)
    
    // 先移除之前的手势，防止重复添加导致多次触发
    headerCell.gestureRecognizers?.forEach { headerCell.removeGestureRecognizer($0) }
    
    // 添加点击手势，绑定section索引到view的tag上
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleHeaderTap(_:)))
    headerCell.tag = section
    headerCell.addGestureRecognizer(tapGesture)
    
    return headerCell
}

3. 实现点击回调方法 #

处理header的点击事件，切换选中状态并刷新对应的section header：

@objc private func handleHeaderTap(_ gesture: UITapGestureRecognizer) {
    guard let tappedSection = gesture.view?.tag else { return }
    
    // 切换选中状态：如果已经选中就取消，否则选中当前section
    if selectedSectionIndex == tappedSection {
        selectedSectionIndex = nil
    } else {
        selectedSectionIndex = tappedSection
    }
    
    // 刷新对应的section，让header的UI更新
    tableView.reloadSections(IndexSet(integer: tappedSection), with: .automatic)
    
    // 如果你需要同时展开/收起section的内容，也可以在这里调用reloadSections刷新内容行
    // tableView.reloadSections(IndexSet(integer: tappedSection), with: .automatic)
}

可选：支持多选功能 #

如果需要支持同时选中多个section，只需要把selectedSectionIndex改成一个集合，然后调整逻辑即可：

// 用集合记录所有选中的section索引
private var selectedSections = Set<Int>()

@objc private func handleHeaderTap(_ gesture: UITapGestureRecognizer) {
    guard let tappedSection = gesture.view?.tag else { return }
    
    if selectedSections.contains(tappedSection) {
        // 已选中，移除
        selectedSections.remove(tappedSection)
    } else {
        // 未选中，添加
        selectedSections.insert(tappedSection)
    }
    
    // 刷新对应的section
    tableView.reloadSections(IndexSet(integer: tappedSection), with: .automatic)
}

// 同时在viewForHeaderInSection里修改初始状态判断
headerCell.isSelectedHeader = selectedSections.contains(section)

这样就能完美实现自定义section header的块选中功能啦！

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