UICollectionViewCompositionalLayout: control number of items in a group with fractional group width

馋奶兔 提交于 2020-05-14 03:35:09

问题


Using UICollectionViewCompositionalLayout, I'd like to render a specific number of items in one group and a specific number of items in another group

This is a simplified version of the layout I came up with:

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

}

As an example I called the method with

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

The result of print(lineGroup.visualDescription()) is interesting and illustrates my problem:

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

Each small block in that ascii graphics is the position where an Item can be (and is) rendered.

So given that the items to render are small enough, all 5 items (2 texts, 3 images) are rendered in the left textGroup, even though this group contains only 2 instances of NSCollectionLayoutItem.

My experiments show that this unintended behaviour is controlled by .fractionalWidth(0.6)of the group size. As soon as I use it, UICollectionViewCompositionalLayout ignores the number of items I specify in that group.

UICollectionViewCompositionalLayout respects the number of items in a group, if I set the group width to something like .estimated(200). But this messes up my complete layout and makes it unusable.

How can I control the number of items in a group and have a group width that is specified by .fractionalWidth(0.6)? I would expect that I get a line break of the items if they don't fit in a row, since I gave a fractional width and an estimated hight of the group.

来源:https://stackoverflow.com/questions/61695901/uicollectionviewcompositionallayout-control-number-of-items-in-a-group-with-fra

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!