如何使用 UICollectionViewCompositionalLayout 创建具有相等行高的网格布局

Posted 2023-02-23

【中文标题】如何使用 UICollectionViewCompositionalLayout 创建具有相等行高的网格布局

【英文标题】：How to create a grid layout with equal row heights using UICollectionViewCompositionalLayout

【发布时间】：2020-05-11 16:17:32

【问题描述】：

我已经成功地使用UICollectionViewCompositionalLayout 创建了一个网格布局。但是，我无法找到一种聪明的方法来确保网格中每一行中的UICollectionViewCell 在它们的高度是动态的时具有相同的高度。即我希望单元格拉伸以填充行中的可用空间高度。

想要的布局：

网格（3 x N） 可变高度单元格 每个单元格在给定行中具有相同的高度。 （使用连续的最大单元格高度） 每个单元格底部的小分隔线。

+------+--+------+--+------+
|~~~~~~|  |~~~~~~|  |~~~~~~|
|~~~~~~|  |~~~~~~|  |~~~~~~|
|~~~~~~|  |~~~~~~|  |      |
|~~~~~~|  |      |  |      |
--------  -------   --------   <--- divider
+------+--+------+--+------+

注意：行本身的高度是正确的，但我希望单元格内容可以拉伸以填充可用空间，因为我需要在每个单元格的底部插入一个小的“行分隔符”。我考虑过为此使用补充视图，但它似乎有点混乱。

当前尝试：

func createLayout() -> UICollectionViewLayout 
    let estimatedHeight: CGFloat = 100

    let item = NSCollectionLayoutItem(
        layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(estimatedHeight)),
        supplementaryItems: []
    )

    let groupLayoutSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                                 heightDimension: .estimated(estimatedHeight))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupLayoutSize, subitem: item, count: 3)


    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
    section.interGroupSpacing = 10
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout

结果：

+------+--+------+--+------+
|~~~~~~|  |~~~~~~|  |~~~~~~|
|~~~~~~|  |~~~~~~|  |~~~~~~|
|~~~~~~|  |~~~~~~|  --------
|~~~~~~|  --------  
--------    
+------+--+------+--+------+

示例代码：https://github.com/johnliedtke/grid-layout

【问题讨论】：

我也有同样的问题。您是否了解如何使单元格内容拉伸以填充可用空间？

【参考方案1】：

NSCollectionLayoutSupplementaryItem 是 NSCollectionLayoutItem 的子类，因此您应该能够将其添加为您的组的子项。所以你会使用

let item = NSCollectionLayoutItem(
        layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .fractional(1))
    )

let sup = NSCollectionLayoutSupplementaryItem(
            layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(2)),
            elementKind: "LineReusableView",
            containerAnchor: .init(edges: [.bottom])
        )
let threeItemGroup = NSCollectionLayoutGroup.horizontal(layoutSize: groupLayoutSize, subitem: item, count: 3)
let group = NSCollectionLayoutGroup.vertical(layoutSize: layoutGroupSize,subitems: [threeItemGroup,sup])

let section = NSCollectionLayoutSection(group: group)

这应该会导致您在每个组的底部只有一行，而不是您想要的三行，但是您应该能够在设计补充视图时更改其外观（使其绘制 3 条不同的线，而不仅仅是1).

【讨论】：

这解决了分隔符问题，但您能否通过概述如何使一行中具有不同、可变高度的单元格具有相同的高度来修改您的答案？

刚刚做了，使每个单独的项目使用分数高度，而整个组使用估计的高度，所以所有项目都应该填充到组的大小，并且组应该是和最大的一样大。