0

我正在尝试使用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一遍又一遍地重复？

4

1 回答 1

0

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

如果您知道在创建布局时拥有的项目数，那么您可以创建一组数量等于 (numberOfItems - 3) / 3 的三元组。-3 来自 mainWithPairGroup 中的 3 和除by 3 来自每个tripletGroup 中的项目数。然后在您的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,
      ]
    )
于 2020-09-28T17:40:40.770 回答