如何在UICollectionView自定义布局中为空section添加补充头部视图

我太懂这个痛点了——自定义布局不像UICollectionViewFlowLayout有现成的配置开关，iOS默认只给有item的section渲染头部，得自己动手修改布局逻辑才能实现需求。下面是我实际项目里验证过的方案，一步步来：

1. 先把数据源的基础配置做对 #

不管section有没有item，你得在数据源方法里明确返回头部的相关信息，不能让系统觉得这个section不需要头部：

• 在 collectionView(_:viewForSupplementaryElementOfKind:at:) 中，哪怕对应section的item数为0，也要正常返回复用的头部视图。
• 在头部尺寸的计算方法里（不管是代理方法还是自定义布局内部逻辑），给空section的头部设置有效尺寸，不能是CGSize.zero，否则布局会直接忽略它。

示例代码：

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    guard kind == UICollectionView.elementKindSectionHeader else {
        return UICollectionReusableView()
    }
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "SectionHeader", for: indexPath) as! SectionHeaderView
    header.titleLabel.text = "Section \(indexPath.section)"
    return header
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    // 不管section是否为空，都返回固定高度的头部
    return CGSize(width: collectionView.bounds.width, height: 50)
}

2. 修改自定义布局的核心逻辑 #

自定义布局的灵魂是prepare()和布局属性生成方法，你需要主动为所有section（包括空section）生成头部的布局属性：

步骤1：遍历所有section生成头部属性 #

在prepare()方法里，不要只遍历有item的section，而是遍历全部section，为每个section创建头部的UICollectionViewLayoutAttributes：

override func prepare() {
    super.prepare()
    
    guard let collectionView = collectionView else { return }
    
    // 清空旧的布局属性缓存
    layoutAttributes = []
    
    let totalSections = collectionView.numberOfSections
    for section in 0..<totalSections {
        // 先处理当前section的头部
        let headerIndexPath = IndexPath(item: 0, section: section)
        if let headerAttrs = layoutAttributesForSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, at: headerIndexPath) {
            layoutAttributes.append(headerAttrs)
        }
        
        // 再处理当前section的item（保留你原有的item布局逻辑）
        let itemCount = collectionView.numberOfItems(inSection: section)
        for item in 0..<itemCount {
            let itemIndexPath = IndexPath(item: item, section: section)
            if let itemAttrs = layoutAttributesForItem(at: itemIndexPath) {
                layoutAttributes.append(itemAttrs)
            }
        }
    }
}

步骤2：正确计算空section头部的位置 #

实现layoutAttributesForSupplementaryView(ofKind:at:)方法时，要确保空section的头部能正确排在布局流里，比如垂直布局时，要累加前面所有section的头部+内容高度：

override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
    guard elementKind == UICollectionView.elementKindSectionHeader, let collectionView = collectionView else {
        return nil
    }
    
    let attrs = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: elementKind, with: indexPath)
    let headerSize = collectionView.delegate?.collectionView?(collectionView, layout: self, referenceSizeForHeaderInSection: indexPath.section) ?? CGSize(width: collectionView.bounds.width, height: 50)
    
    // 计算头部的Y坐标：累加前面所有section的头部+内容高度
    var yOffset: CGFloat = 0
    let sectionSpacing: CGFloat = 10 // 替换成你布局的section间距
    
    for prevSection in 0..<indexPath.section {
        // 加前面section的头部高度
        let prevHeaderSize = collectionView.delegate?.collectionView?(collectionView, layout: self, referenceSizeForHeaderInSection: prevSection) ?? .zero
        yOffset += prevHeaderSize.height
        
        // 加前面section的所有item高度（如果有的话）
        let prevItemCount = collectionView.numberOfItems(inSection: prevSection)
        for item in 0..<prevItemCount {
            let itemIndexPath = IndexPath(item: item, section: prevSection)
            if let itemAttrs = layoutAttributesForItem(at: itemIndexPath) {
                yOffset += itemAttrs.frame.height + 8 // 替换成你的item间距
            }
        }
        // 加section间距
        yOffset += sectionSpacing
    }
    
    attrs.frame = CGRect(x: 0, y: yOffset, width: headerSize.width, height: headerSize.height)
    return attrs
}

步骤3：修正contentSize的计算 #

最后在collectionViewContentSize方法里，要把所有section的头部高度（包括空section的）都算进去，不然滚动范围会出错：

override var collectionViewContentSize: CGSize {
    guard let collectionView = collectionView else { return .zero }
    
    var totalHeight: CGFloat = 0
    let totalSections = collectionView.numberOfSections
    let sectionSpacing: CGFloat = 10 // 同上面的section间距
    
    for section in 0..<totalSections {
        // 加当前section的头部高度
        let headerSize = collectionView.delegate?.collectionView?(collectionView, layout: self, referenceSizeForHeaderInSection: section) ?? .zero
        totalHeight += headerSize.height
        
        // 加当前section的item总高度
        let itemCount = collectionView.numberOfItems(inSection: section)
        for item in 0..<itemCount {
            let itemIndexPath = IndexPath(item: item, section: section)
            if let itemAttrs = layoutAttributesForItem(at: itemIndexPath) {
                totalHeight += itemAttrs.frame.height + 8 // 同上面的item间距
            }
        }
        // 加section间距
        totalHeight += sectionSpacing
    }
    
    // 减去最后一个多余的section间距
    if totalSections > 0 {
        totalHeight -= sectionSpacing
    }
    
    return CGSize(width: collectionView.bounds.width, height: totalHeight)
}

3. 额外注意点 #

• 当section的item数变化时（比如从有到空，或者空section新增item），记得调用collectionView.collectionViewLayout.invalidateLayout()刷新布局。
• 测试时重点检查空section头部和前后内容的位置，避免出现重叠或间距异常的情况。

这样修改后，不管section有没有item，自定义布局都会正常渲染对应的补充头部，完全能满足你的特殊需求。

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