[Question] Horizontal scroll

[rnkyr]

Hey, @nemecek-filip
Thanks for the article.

I recently faced a bit similar task but ended up resolving it without compositional layout.
So the question is, is there any possibility to have a horizontal scroll in the photos section (slice D from the article), so you scroll among tabs from the header?

[nemecek-filip]

Hi!

Yes, you would probably need to create nested groups to make the 3x3 grid for example and then you could set the orthogonalScrollingBehavior property to continuous for example.

The article in question for others: https://nemecek.be/blog/72/building-instagram-profile-screen-with-compositional-layout

Btw, I am curious how did you find the article? :-)

[rnkyr]

I'll take a look at it, thank you!

Found your article in the mail subscription from here https://mbltdev.ru/en

[nemecek-filip]

Interesting! Thanks for the info.

Thinking about the photos.. I realized that you possibly don't even need nested groups. Below is slightly modified and untested code for the photos section if you want to try it out:

func createPhotosSection() -> NSCollectionLayoutSection {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                          heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3),
                                           heightDimension: .fractionalWidth(1))
    let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 3)

    let section = NSCollectionLayoutSection(group: group)

    let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(50))

    let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)

    section.boundarySupplementaryItems = [header]
    section.orthogonalScrollingBehavior = .continuous

    return section
}

Note that I made the group vertical, changed its fractional size and set the orthogonalScrollingBehavior

[SMH-7]

It aligns in the vertical direction but still scrolls in the horizontal direction...
Any clue on how to implement that?

[nemecek-filip]

Hi @SMH-7 I am not sure I understand the question.

I think you could use contentInsets property on the horizontal section to give it perhaps a bit of leading padding

[SMH-7]

My default flowLayout was
HorziLayout.scrollDirection = .vertical
but I decided to divide the collection view into multiple sections but still go with a vertical scroll for both of the sections.
The following code aligns them in a vertical stack but the thing is, now they scroll horizontally.
let group = NSCollectionLayoutGroup.vertical(layoutSize: .init(widthDimension: .fractionalWidth(0.33), heightDimension: .fractionalHeight(0.33)), subitems: [item])
How do I align vertically and scroll vertically as well?
Have another question...
When you setup size for NSCollectionLayoutItem or NSCollectionLayoutGroup via fractionalHeight\fractionalWeight it adjusts according to the collection view layout. Initially, if we gave the appropriate size for individual cells for a specific number of cells in a col in sizeForItemAt that is basically getting overridden here.