问题
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