自定义粘性Section Header/Footer时，如何设置TableView的Section间距？

嘿，这个问题我之前做项目时也踩过坑！确实，直接把间距塞进粘性Footer里会让整个Footer（包括空白间距）都跟着粘住，看起来特别突兀。下面给你两种经过验证的靠谱方案，你可以根据自己的项目复杂度选：

方案一：用“空白Section”做间距（逻辑清晰，新手友好） #

这个思路很简单：在你原本的内容Section之间，插入专门用来做间距的空白Section。这样内容Section的粘性Header和Footer完全不受影响，间距独立存在于两个Section之间。

具体步骤： #

1. 先把你的Section数据转换成“内容Section + 间距Section”的组合（最后一个内容Section后面不用加间距）。比如用枚举来区分两种Section：

enum DisplaySection {
    case content(YourSectionModel) // 替换成你的实际Section模型
    case spacing(height: CGFloat)
}

// 构建展示用的Section数组
var displaySections: [DisplaySection] = []
for (index, section) in yourOriginalSections.enumerated() {
    displaySections.append(.content(section))
    // 不是最后一个Section的话，加个间距Section
    if index != yourOriginalSections.count - 1 {
        displaySections.append(.spacing(height: 20)) // 20是你想要的间距大小
    }
}

2. 在TableView的数据源方法里，根据Section类型返回对应的内容：

• 内容Section：正常返回你的Cell、粘性Header和Footer
• 间距Section：返回一个高度为设置值的空Cell，Header和Footer高度设为0

示例代码片段：

func numberOfSections(in tableView: UITableView) -> Int {
    return displaySections.count
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    switch displaySections[section] {
    case .content(let model):
        return model.items.count
    case .spacing:
        return 1
    }
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    switch displaySections[indexPath.section] {
    case .content(let model):
        // 配置你的内容Cell
        let cell = tableView.dequeueReusableCell(withIdentifier: "ContentCell", for: indexPath) as! ContentCell
        cell.setup(with: model.items[indexPath.row])
        return cell
    case .spacing:
        // 返回空Cell，设置透明背景和不可选中
        let cell = tableView.dequeueReusableCell(withIdentifier: "SpacingCell", for: indexPath)
        cell.selectionStyle = .none
        cell.backgroundColor = .clear
        return cell
    }
}

// 设置Header和Footer
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    switch displaySections[section] {
    case .content:
        return 50 // 你的粘性Header高度
    case .spacing:
        return 0
    }
}

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    switch displaySections[section] {
    case .content:
        return 40 // 你的粘性Footer高度
    case .spacing:
        return 0
    }
}

这个方案的好处是完全不影响原有的粘性Header/Footer逻辑，缺点是需要处理Section数据的转换，不过逻辑很直观，新手也能快速上手。

方案二：自定义Footer分离粘性内容和间距（更优雅，无需额外Section） #

如果你不想增加Section数量，可以自定义Footer View，把粘性内容和间距分离，然后通过监听滚动来控制间距的显示/隐藏。

具体步骤： #

1. 创建自定义Footer View，包含两部分：顶部是需要粘性的内容区域，底部是间距区域：

class StickyFooterWithSpacing: UITableViewHeaderFooterView {
    static let reuseID = "StickyFooterWithSpacing"
    
    // 粘性内容区
    private let contentContainer = UIView()
    private let titleLabel = UILabel()
    
    // 间距区（非粘性）
    private let spacingView = UIView()
    
    // 可配置的间距高度
    var spacingHeight: CGFloat = 20 {
        didSet {
            spacingView.heightAnchor.constraint(equalToConstant: spacingHeight).isActive = true
        }
    }
    
    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayout()
    }
    
    private func setupLayout() {
        // 配置内容区样式（比如背景色、文字）
        contentContainer.backgroundColor = .lightGray
        titleLabel.text = "Section Footer"
        titleLabel.textAlignment = .center
        
        // 添加子视图并设置约束
        addSubview(contentContainer)
        addSubview(spacingView)
        contentContainer.addSubview(titleLabel)
        
        [contentContainer, spacingView, titleLabel].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        NSLayoutConstraint.activate([
            // 内容区约束：顶部对齐，高度固定
            contentContainer.topAnchor.constraint(equalTo: topAnchor),
            contentContainer.leadingAnchor.constraint(equalTo: leadingAnchor),
            contentContainer.trailingAnchor.constraint(equalTo: trailingAnchor),
            contentContainer.heightAnchor.constraint(equalToConstant: 40),
            
            // 间距区约束：在内容区下方，高度由spacingHeight控制
            spacingView.topAnchor.constraint(equalTo: contentContainer.bottomAnchor),
            spacingView.leadingAnchor.constraint(equalTo: leadingAnchor),
            spacingView.trailingAnchor.constraint(equalTo: trailingAnchor),
            spacingView.bottomAnchor.constraint(equalTo: bottomAnchor),
            
            // 文字约束：居中
            titleLabel.centerXAnchor.constraint(equalTo: contentContainer.centerXAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: contentContainer.centerYAnchor)
        ])
    }
    
    // 滚动时调用，控制间距区是否显示
    func updateStickyState(isSticky: Bool) {
        spacingView.isHidden = isSticky
        // 粘性时让内容区撑满整个Footer高度
        if isSticky {
            contentContainer.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        } else {
            contentContainer.bottomAnchor.constraint(equalTo: spacingView.topAnchor).isActive = true
        }
        layoutIfNeeded()
    }
}

2. 在ViewController里监听TableView滚动，判断Footer是否进入粘性状态，然后调用updateStickyState方法：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard let tableView = scrollView as? UITableView else { return }
    
    for section in 0..<yourOriginalSections.count {
        guard let footer = tableView.footerView(forSection: section) as? StickyFooterWithSpacing else { continue }
        
        // 计算Footer在TableView中的位置，判断是否进入粘性状态
        let footerFrame = tableView.convert(footer.frame, from: tableView.superview)
        let isSticky = footerFrame.top <= tableView.bounds.height
        
        footer.updateStickyState(isSticky: isSticky)
    }
}

// 设置Footer高度：最后一个Section不需要间距
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    if section == yourOriginalSections.count - 1 {
        return 40 // 仅内容区高度
    } else {
        return 40 + 20 // 内容区高度 + 间距高度
    }
}

这个方案无需额外处理Section数据，代码更优雅，但需要监听滚动并处理视图约束，适合有一定经验的开发者。

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