UICompositionalLayout not working as intended (vertical table scroll + horizontal paging)

Question

I've been digging through the "new" compositional layout api introduced in iOS 13, hoping to find a solution to the contrived approach of embedding a UITableView inside a UICollectionViewCell. I have used this headache-inducing solution in the past in order to provide horizontal page scrolling with vertical table scrolling at the same time. It is a very cumbersome way of doing things and ever since CompositionalLayout was announced I have been dying to give a shot at refactoring it.

So far, no luck. I can make the horizontal scrolling and the vertical scrolling work, but can't get past the "App Store" behaviour where each line scrolls horizontally in an independent way. Has anyone had any luck implementing a similar solution?

This is my code for the CollectionViewLayout:

func createOrthogonalScrollingLayout() -> UICollectionViewLayout {


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

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

    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .groupPagingCentered
    section.interGroupSpacing = 16
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)


    let layout = UICollectionViewCompositionalLayout(section: section)

    return layout

}

This produces a vertical scroll of two items and a horizontal scroll which shows the remaining items in the subsequent pages, but only two per page. My goal is to have the "pages" divided by days of the year and each one should have X number of items which are vertically scrollable.

Thank you

I'm not understanding what the goal is. Could you draw a diagram? — matt
I don't understand the diagram. It's just a static screen shot; I'm not getting a sense for what it's supposed to do. It sounds to me like this should be a horizontally scrolling collection view of days where each group is a vertically scrolling sequence of things happening on that day? — matt
Sorry about that. This is the UI Design in Sketch. But yes, that's exactly what is intended. When you scroll horizontally, you should move to the next day, with all events in that day scrolling vertically. — Renato Silva
Okay well problem number one is you forgot to make this a horizontally scrolling layout. — matt

Pavlo Ignatov Pavlo Ignatov · Accepted Answer · 2021-03-13T22:29:00

groupSize height should be the height of your cell, for example, like this:

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8), heightDimension: .absolute(250.0))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])

UICompositionalLayout not working as intended (vertical table scroll + horizontal paging)

1 Answers