UICollectionViewCompositionalLayout: контролировать количество элементов в группе с дробной шириной группы - PullRequest
Новая
       75

UICollectionViewCompositionalLayout: контролировать количество элементов в группе с дробной шириной группы

1 голос
/ 09 мая 2020

Используя UICollectionViewCompositionalLayout, я хотел бы отобразить определенное c количество элементов в одной группе и определенное c количество элементов в другой группе

Это упрощенная версия макет, который я придумал: 

func createTestSectionLayout(noTextItems: Int, noImageItems: Int) -> NSCollectionLayoutSection {

    // noTextItems texts can have different lengths
    let textItemSize = NSCollectionLayoutSize(widthDimension: .estimated(80),
                                         heightDimension: .estimated(44))
    var textItems = [NSCollectionLayoutItem]()
    for _ in 0..<noTextItems {
        textItems.append(NSCollectionLayoutItem(layoutSize: textItemSize))
    }
    let textGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.6), heightDimension: .estimated(44))
    let textGroup = NSCollectionLayoutGroup.horizontal(layoutSize: textGroupSize, subitems: textItems)



    // noImageItems images should be rendered with their intrinsic size
    let imageItemSize = NSCollectionLayoutSize(widthDimension: .estimated(80),
                                         heightDimension: .estimated(44))
    var imageItems = [NSCollectionLayoutItem]()
    for _ in 0..<noImageItems {
        imageItems.append(NSCollectionLayoutItem(layoutSize: imageItemSize))
    }
    let iamgeGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.4), heightDimension: .estimated(44))
    let imageGroup = NSCollectionLayoutGroup.horizontal(layoutSize: iamgeGroupSize, subitems: imageItems)

    // group that contains textGroup and imageGroup
    let lineGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44))
    let lineGroup = NSCollectionLayoutGroup.horizontal(layoutSize: lineGroupSize, subitems: [textGroup,imageGroup])

    print(lineGroup.visualDescription())
    print()

    let section = NSCollectionLayoutSection(group: lineGroup)
    return section

}

В качестве примера я назвал метод с 

let test = self.createTestSectionLayout(noTextItems: 2, noImageItems: 3)`

Результат print(lineGroup.visualDescription()) интересен и иллюстрирует мою проблему: 

+-------+-------+-------+-------+-------+-------+-------+---+-------+-------+-------+-------+-------+
|       |       |       |       |       |       |       |   |       |       |       |       |       |
+-------+-------+-------+-------+-------+-------+-------+   +-------+-------+-------+-------+-------+
|                                                                                                   |
|                                                                                                   |
|                                                                                                   |                                                                                                   |
+---------------------------------------------------------------------------------------------------+

Каждый маленький блок в этой графике ascii - это позиция, в которой элемент может (и будет) отображаться.

Итак, учитывая, что элементы для визуализации достаточно малы, все 5 элементов (2 текста, 3 images) отображаются в левой textGroup, хотя эта группа содержит только 2 экземпляра NSCollectionLayoutItem.

Мои эксперименты показывают, что это непреднамеренное поведение контролируется .fractionalWidth(0.6) размером группы. Как только я его использую, UICollectionViewCompositionalLayout игнорирует количество элементов, которые я указываю в этой группе.

UICollectionViewCompositionalLayout учитывает количество элементов в группе, если я устанавливаю ширину группы примерно как .estimated(200). Но это полностью меняет мой макет и делает его непригодным для использования.

Как я могу контролировать количество элементов в группе и имеют ширину группы, указанную .fractionalWidth(0.6)? Я ожидаю, что у меня будет разрыв строки элементов, если они не помещаются в ряд, поскольку я дал дробную ширину и приблизительную высоту группы.

...