UICollectionViewCompositionalLayout：自定义网格布局，其中只有一个单元格必须大于其他单元格

Question

我正在尝试使用UICollectionViewCompositionalLayout 构建照片网格，其中第三张图片显示得更大，所有其他图片都应该很小。

我已经走到这一步了：

问题在于这种布局会不断重复，所以现在每六张图片中就有一张显示得更大，而不是只出现在第一组中。

这是我的布局代码：

private func createLayout() -> UICollectionViewLayout {
  // Three photos next to eachother
  let tripletItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1 / 3), heightDimension: .fractionalHeight(1)))
  tripletItem.contentInsets = .init(top: 2, leading: 2, bottom: 2, trailing: 2)

  let tripletGroup = NSCollectionLayoutGroup.horizontal(
    layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(1 / 3)),
    subitems: [tripletItem]
  )

  // Two small photos with a bigger photo next to it
  let mainItem = NSCollectionLayoutItem(
    layoutSize: NSCollectionLayoutSize(
      widthDimension: .fractionalWidth(2 / 3),
      heightDimension: .fractionalHeight(1)
    ))

  mainItem.contentInsets = NSDirectionalEdgeInsets(
    top: 2,
    leading: 2,
    bottom: 2,
    trailing: 2
  )

  let pairItem = NSCollectionLayoutItem(
    layoutSize: NSCollectionLayoutSize(
      widthDimension: .fractionalWidth(1),
      heightDimension: .fractionalHeight(0.5)
    ))

  pairItem.contentInsets = NSDirectionalEdgeInsets(
    top: 2,
    leading: 2,
    bottom: 2,
    trailing: 2
  )

  let pairGroup = NSCollectionLayoutGroup.vertical(
    layoutSize: NSCollectionLayoutSize(
      widthDimension: .fractionalWidth(1 / 3),
      heightDimension: .fractionalHeight(1)
    ),
    subitem: pairItem,
    count: 2
  )

  let mainWithPairGroup = NSCollectionLayoutGroup.horizontal(
    layoutSize: NSCollectionLayoutSize(
      widthDimension: .fractionalWidth(1),
      heightDimension: .fractionalWidth(2 / 3)
    ),
    subitems: [pairGroup, mainItem]
  )

  let nestedGroup = NSCollectionLayoutGroup.vertical(
    layoutSize: NSCollectionLayoutSize(
      widthDimension: .fractionalWidth(1),
      heightDimension: .fractionalWidth(1)
    ),
    subitems: [
      mainWithPairGroup,
      tripletGroup,
    ]
  )

  let section = NSCollectionLayoutSection(group: nestedGroup)
  let layout = UICollectionViewCompositionalLayout(section: section)
  return layout
}

如何使第一组 (mainWithPairGroup) 只使用一次，然后 tripletGroup 一遍又一遍地重复？

Answer 1

您的部分有两个子项：mainWithPairGroup 和tripletGroup。当您的项目多于这两个子组的空间时，该组会一遍又一遍地重复。如果您想改为使用 mainWithPairGroup 和无限制的 TripletGroup，您可以有两个部分并更改您的组合布局以使用部分提供程序而不是单个部分。然后在您的第一部分中，您将只有 mainWithPairGroup，而在您的第二部分中，您可以只使用tripletGroup。这样做的问题是您现在必须更改数据源方法以允许容纳这两个部分。

如果您知道在创建布局时拥有的项目数，那么您可以创建一组三元组，其计数等于 (numberOfItems - 3) / 3。-3 来自 mainWithPairGroup 中的 3除以 3 来自每个三元组中的项目数。然后在您的 nestedGroup 中，您的子项将是 mainWithPairGroup 和您的三元组。

    let groupedTripletGroup = NSCollectionLayoutGroup.vertical(
      layoutSize: .init(
        .fractionalWidth(1),
        .fractionalHeight(1)),
      subitem: tripletGroup, 
      count: (numberOfItems - 3)/3)

    let nestedGroup = NSCollectionLayoutGroup.vertical(
      layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1),
        heightDimension: .fractionalWidth(1)),
      subitems: [
        mainWithPairGroup,
        groupedTripletGroup,
      ]
    )