UICollectionView

Question

这只是一个关于 UICollectionViewCompositionalLayout 的概念性问题。

我正在开发一个应用程序，其中有一个与 AppStore 的“所有评论”页面非常相似的视图，我正计划使用组合布局来实现它，但我只是不知道该做什么该组是。

这是我正在谈论的 AppStore 应用程序中的页面。

我在查看合成布局的文档时注意到了这张图片。乍一看，顶部部分与我想要的类似，只是它水平滚动而不是垂直滚动。我只是很好奇为什么该组围绕此图像中的每个项目。将每个项目放在一个组或将所有项目放在一个组中有什么好处？

我从 WWDC 视频和文档中理解的方式是，组（至少在概念上）类似于流布局。所以我很好奇，在这个例子中，将所有项目放在一个组中（一个流式布局）还是为每个项目单独分组会更好，就像他们在这张图片中所做的那样。

在确定将哪些项目放入一组时，权衡或决定因素是什么？我看过 WWDC 视频中的一些示例，它们具有网格布局，每一行都是一个单独的组。但是如果一个组类似于流式布局，是不是所有的项目都在一个组中呢？

我想我只是对组以及何时对所有项目使用一个组或何时将项目分成多个组感到困惑。

Answer 1

I am just curious why the group is around each item in this image

在我看来，图片只是构图布局的小草图

上面一组有一个item（不是NSCollectionLayoutItem）或cell，但是下面一组有三个items

考虑 Apple 示例中的代码 Implementing Modern Collection Views EmojiExplorerViewController:

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize) 
item.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5) 
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.28), heightDimension: .fractionalWidth(0.2)) 
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item]) 
let section = NSCollectionLayoutSection(group: group)

组有子项item，项数由NSDiffableDataSourceSectionSnapshot计数

决定

在 Xcode 视图层次结构中，除了单元格和一些必要的小视图外，您看不到任何视图

没有名为 xxxGroupView

的视图

不要想太多，先简单。

What is the benefit of having the group around each item, or having all the items in one group?

做你想做的事，如果一个小组可以拥有所有项目，为什么不呢。更简单的组合布局可能更有效

what are the tradeoffs or deciding factors when determining which items go in a group

必要时将项目分组。

再看看Implementing Modern Collection Views

中的OrthogonalScrollingViewController

//   +-----------------------------------------------------+
//   | +---------------------------------+  +-----------+  |
//   | |                                 |  |           |  |
//   | |                                 |  |           |  |
//   | |                                 |  |     1     |  |
//   | |                                 |  |           |  |
//   | |                                 |  |           |  |
//   | |                                 |  +-----------+  |
//   | |               0                 |                 |
//   | |                                 |  +-----------+  |
//   | |                                 |  |           |  |
//   | |                                 |  |           |  |
//   | |                                 |  |     2     |  |
//   | |                                 |  |           |  |
//   | |                                 |  |           |  |
//   | +---------------------------------+  +-----------+  |
//   +-----------------------------------------------------+

let leadingItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.7),
                                                  heightDimension: .fractionalHeight(1.0)))
leadingItem.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)

let trailingItem = NSCollectionLayoutItem(
                layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                                  heightDimension: .fractionalHeight(0.3)))
trailingItem.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
let trailingGroup = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.3),
                                                  heightDimension: .fractionalHeight(1.0)), subitem: trailingItem, count: 2)

let containerGroup = NSCollectionLayoutGroup.horizontal(
                layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.85),
                                                  heightDimension: .fractionalHeight(0.4)),
                subitems: [leadingItem, trailingGroup])
let section = NSCollectionLayoutSection(group: containerGroup)
section.orthogonalScrollingBehavior = .continuous
return section

UICollectionView - 组

UICollectionView - groups

ios

uicollectionviewcompositionallayout