Swift中固定高度CollectionView如何分两个分区展示不同数组内容？

问题根源 #

你当前使用的是水平滚动的系统流布局UICollectionViewFlowLayout，该布局的规则为：滚动方向为水平时，所有分区会沿水平方向依次排布，因此两个分区的单元格会显示在同一行。

解决方法 #

如果要实现两个分区上下分层展示、每个分区内部独立水平滚动，推荐使用iOS13及以上支持的UICollectionViewCompositionalLayout组合布局，灵活度更高，实现代码如下：

override func viewDidLoad() {
    super.viewDidLoad()
    let layout = UICollectionViewCompositionalLayout { sectionIndex, layoutEnvironment in
        // 配置单个item尺寸
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/4.1), heightDimension: .absolute(100))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8)
        
        // 配置组尺寸：宽度与collectionView一致，高度固定为100，内部水平排列item
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(100))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
        // 配置分区：开启内部水平滚动，设置分区上下间距实现分层
        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        
        // 可选配置：添加分区头区分两组数据
        let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(20))
        let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
        section.boundarySupplementaryItems = [header]
        
        return section
    }
    filesCollectionView.collectionViewLayout = layout
}

补充注意事项 #

• 需在collectionView(_:cellForItemAt:)代理方法中根据indexPath.section区分数据源：section为0时取newArray对应数据，section为1时取oldArray对应数据赋值给单元格
• 若需要兼容iOS13以下版本，可改为在垂直排列的UIStackView中放置两个独立的水平滚动UICollectionView，分别绑定oldArray和newArray即可

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