Как создать макет сетки с равной высотой строк с помощью UICollectionViewCompositionalLayout

Question

Мне удалось создать макет сетки, используя 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

Answer 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 отдельные линии, а не только одну).