如何使用 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屋！