实现全屏多分区横向分页UICollectionView：单元格位置调整问题

问题原因 #

当前代码里分区单元格和头部之间出现间距，主要是两个原因：

1. 使用.groupPagingCentered作为正交滚动行为，该属性会让分组在垂直方向居中显示，自然产生留白；
2. 头部高度用了.estimated(80)，但实际头部高度是40，预留的多余空间造成了视觉上的间距。

修复步骤 #

直接修改makeLayout()方法即可：

func makeLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout(sectionProvider: { (sectionIndex, environment) -> NSCollectionLayoutSection? in
        
        let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(80), heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(40))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        group.interItemSpacing = NSCollectionLayoutSpacing.fixed(10)
        
        let section = NSCollectionLayoutSection(group: group)
        // 把分组分页改成连续滚动，避免居中留白
        section.orthogonalScrollingBehavior = .continuous
        // 明确设置内边距top为0，保证分组紧贴头部
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)
        
        // 头部高度改成固定40，和实际高度匹配，去掉估算值
        let headerItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(40))
        let headerItem = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerItemSize, elementKind: "header", alignment: .top)
        section.boundarySupplementaryItems = [headerItem]
        
        return section
    })
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal
    config.interSectionSpacing = 0
    layout.configuration = config
    return layout
}

额外提醒 #

• 检查SetupProfileTitleHeader的高度约束，确保设置为40，避免头部自身高度引发问题；
• 如果需要分组之间的垂直间距，保留section.interGroupSpacing = 10即可，该设置不会影响头部与第一个分组的贴合度。

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