如何实现CompositionalLayout独立Item自定义？附现有代码与示例图

要实现多种尺寸互不影响的独立Item，核心是为每种样式单独定义NSCollectionLayoutItem实例，再通过嵌套分组或者分区提供者组合使用，以下是完整实现代码：

static func createCollectionViewLayout() -> UICollectionViewCompositionalLayout {
    // 大尺寸Item：占半行宽度，和行高一致
    let bigItem = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1/2),
            heightDimension: .fractionalHeight(1)
        )
    )
    bigItem.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
    
    // 小尺寸Item：占半行宽度，高度为行高的一半
    let smallItem = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1),
            heightDimension: .fractionalHeight(1/2)
        )
    )
    smallItem.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
    
    // 垂直分组收纳两个小Item，整体尺寸和大Item保持一致
    let smallItemVerticalGroup = NSCollectionLayoutGroup.vertical(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1/2),
            heightDimension: .fractionalHeight(1)
        ),
        subitem: smallItem,
        count: 2
    )
    
    // 第一行布局：大Item在左，小Item分组在右
    let leftBigHorizontalGroup = NSCollectionLayoutGroup.horizontal(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1),
            heightDimension: .fractionalHeight(2/5)
        ),
        subitems: [bigItem, smallItemVerticalGroup]
    )
    
    // 第二行布局：小Item分组在左，大Item在右，实现错落效果
    let rightBigHorizontalGroup = NSCollectionLayoutGroup.horizontal(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1),
            heightDimension: .fractionalHeight(2/5)
        ),
        subitems: [smallItemVerticalGroup, bigItem]
    )
    
    // 外层垂直分组嵌套两行布局，滚动时自动重复错落样式
    let containerGroup = NSCollectionLayoutGroup.vertical(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1),
            heightDimension: .fractionalHeight(4/5)
        ),
        subitems: [leftBigHorizontalGroup, rightBigHorizontalGroup]
    )
    
    let section = NSCollectionLayoutSection(group: containerGroup)
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10)
    return UICollectionViewCompositionalLayout(section: section)
}

扩展说明 #

• 需要新增其他样式的独立Item时，直接新建NSCollectionLayoutItem实例，自定义尺寸、边距后加入对应分组即可，不同Item的参数互不影响
• 如果不同分区要使用完全不同的Item布局，可以改用UICollectionViewCompositionalLayout.init(sectionProvider:)方法初始化，根据分区索引返回对应的布局配置
• 可根据实际需求调整各个Item的尺寸参数，比如把小Item的宽度改成1/3，调整分组count适配更多列布局

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