UICollectionViewCompositionalLayout with group width smaller than the section width and paging

user_703809 0
Viewed 409

I see this kind of code in each tutorial that tries to recreate the AppStore layout:

...
let group = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.95), heightDimension: .absolute(300)), subitems: [item])
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPaging
...

The important part is that group fractional width < 1.0. So for this example, let's say we have 3 items in that horizontal group + some other sections, just like the AppStore. Now if I scroll horizontally to the 3rd item in that horizontal group, and then I scroll down vertically, then scroll back up, the result is always the same: now the second item is centered in that group, not the 3rd one that was centered when I started scrolling down.

I also noticed that there are some strange scrolling artifacts when scrolling that group horizontally: sometimes when I drag the first item left and release, it just jumps back into the center without animation. Or when I scroll to the last item and then try to scroll even more to the right, it just bounces back to the first item.

This is really strange, looks like a bug in the UICollectionViewCompositionalLayout implementation or a combination of this + iOS version. Did anyone encounter similar issues and maybe know a workaround? I see this happening for each type of paging.

Edit: I just learned that this problem is iOS 14 specific, I tested my app on iOS 13.7 simulator and it works correctly there.

uicollectionviewlayout uicollectionviewcompositionallayout uicollectionview ios14 uikit
2 Answers

I have the same issue with scrolling right on the last item it bounces back to the penultimate item.

user_67134470

In my case i can not scroll fully to the last item so i've tried to set negative trailing insets for the group and it worked:

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(55))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.75), heightDimension: .estimated(55 * 3 + 16))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 3)
group.interItemSpacing = .fixed(.centi)
// Here
group.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: -view.bounds.width * 0.25)
    
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPaging
user_84198940
Related