如何解决UICollectionView组合布局中section header与单元格重叠的问题

问题原因 #

当前布局未给section的内容区域预留顶部内边距，header和section内的cell默认从同一顶部坐标开始渲染，因此出现重叠。

解决方案 #

在创建NSCollectionLayoutSection的代码块中，添加contentInsets配置，给顶部预留和header高度匹配的间距即可，修改后的代码如下：

func createLayout() -> UICollectionViewLayout {
    
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal
    config.interSectionSpacing = 16
    
    let layout = UICollectionViewCompositionalLayout(sectionProvider: {
        
        (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        
        let leadingItem = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                               heightDimension: .estimated(50)))
        
        let widthFraction: CGFloat = UIScreen.main.bounds.size.width > UIScreen.main.bounds.size.height ? 0.2 : 0.8
        let containerGroup = NSCollectionLayoutGroup.vertical(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(widthFraction),
                                               heightDimension: .estimated(50)),
            subitems: [leadingItem])
        
        let section = NSCollectionLayoutSection(group: containerGroup)
        section.boundarySupplementaryItems = [self.makeHeader()]
        section.orthogonalScrollingBehavior = .continuous
        section.interGroupSpacing = 16
        // 新增这行，顶部预留header的显示空间，数值和你header的estimated高度对应即可
        section.contentInsets = NSDirectionalEdgeInsets(top: 50, leading: 0, bottom: 0, trailing: 0)
        return section
        
    }, configuration: config)
    
    return layout
}

func makeHeader() -> NSCollectionLayoutBoundarySupplementaryItem {
    let widthFraction: CGFloat = UIScreen.main.bounds.size.width > UIScreen.main.bounds.size.height ? 0.2 : 0.8
    let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(widthFraction),
                                      heightDimension: .estimated(50))
    let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: size,
                                                                   elementKind: UICollectionView.elementKindSectionHeader,
                                                                    alignment: .top)
    return sectionHeader
}

如果你的header是动态高度，不需要写死预留数值，可以将header的pinToVisibleBounds属性设置为false，系统会自动计算偏移量避免重叠。

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