如何使用UICollectionViewCompositionalLayout创建具有相等行高的网格布局 [英] How to create a grid layout with equal row heights using UICollectionViewCompositionalLayout

问题描述

我已经能够使用 UICollectionViewCompositionalLayout 成功创建网格布局.但是，当它们的高度是动态的时，我无法找到一种聪明的方法来确保网格中每一行中的 UICollectionViewCell 都具有相同的高度.也就是说，我希望单元格拉伸以填充行中高度方向上的可用空间.

I've successfully been able to create a grid layout using UICollectionViewCompositionalLayout. However, I am unable to find a clever way of ensuring the UICollectionViewCell in each row in the grid are of the same height when their heights are dynamic. i.e. I want the cell to stretch to fill the available space height-wise in the row.

所需的布局:

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

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

注意:该行本身是正确的高度，但是我想拉伸单元格内容以填充可用空间，因为我需要在其中插入一个小的行分隔符".在每个单元格的底部.我曾考虑为此使用补充视图，但这似乎有些混乱.

Note: The row itself is the correct height but I want the cell content to stretch to fill the available space because I need to insert a small "line-divider" at the bottom of each cell. I thought about using a supplementary view for this but it seemed sort of messy.

当前尝试:

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

推荐答案

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

NSCollectionLayoutSupplementaryItem subclasses NSCollectionLayoutItem, so you should be able to add it as a subitem of your group. So you'd use

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).

This should result in you only having one line at the bottom of each group rather than your desired three lines, but you should be able to change how that looks in designing your supplementary view (making it draw 3 distinct lines rather than just 1).

这篇关于如何使用UICollectionViewCompositionalLayout创建具有相等行高的网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！