Vertical full screen paging using UICollectionViewCompositionalLayout

Viewed 459

I'm attempting to create a vertically paging UICollectionView using UICollectionViewCompositionalLayout, similar to how TikTok scrolls its feed. I'm very close to achieving that experience, however, the cells aren't being sized the way I expect them to, which is to be full screen width and height. Here is the layout I came up with that scrolls vertically while paging:

let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalHeight(1.0)
)
let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)

let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalHeight(1.0)
)
let layoutGroup = NSCollectionLayoutGroup.vertical(
    layoutSize: groupSize,
    subitems: [layoutItem]
)

let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
layoutSection.orthogonalScrollingBehavior = .groupPaging

let config = UICollectionViewCompositionalLayoutConfiguration()
config.scrollDirection = .horizontal

let layout = UICollectionViewCompositionalLayout(section: layoutSection, configuration: config)
return layout

And here is a screenshot of the cells in the collectionview (I'm using random colors for each cell):

enter image description here

Interestingly, if I set config.scrollDirection = .vertical, the cells are sized the way I expect (full screen size) but it scrolls horizontally instead of vertically.

1 Answers

Just add

config.contentInsetsReference = .none
Related