Side-by-side sections in UICollectionViewCompositionalLayout?

Have a look here:

https://stackoverflow.com/questions/50625326/how-to-show-uicollectionview-with-first-section-on-left-side-and-second-section

A simple workaround would be to create 2 collectionViews, side by side, the first for first sections, the second for last sections.

It is less elegant than a custom layout, but probably easier.

And it provides a nice side effect: you can move the 2 colums independantly.

To balance the cells properly, you would count how many in each section, then addup from 0 to N until it reaches half the total number of cells.

Then first Collection would go from section 0 to section N-1.

You may keep your data source as it is, butdon't forget though to adapt

cellForItemAtIndexPath for each CollectionView.

Hope that's clear and helpful.

Sorry, this isn't what I'm after. I want a single collection view laying out sections side-by-side (when width allows) and that can collapse to a more traditional top-to-bottom stack of sections in a horizontally compact layout (like iPhone). Trying to simulate this with two collection views would cause way more problems that it sovles.

This is doable using a custom UICollectionViewLayout subclass which I normally would have used, but I was hoping the "new exciting" layout mechanisms would make this easier, but it appears to me that UICollectionViewComposableLayout isn't capable of putting sections side-by-side.

Wish you can develop the subclass.

I was just wondering about user interaction.

When displayed in 2 columns, scrolling a column would scroll both of them. Is it the impression you want to give, or give impression of 2 columns that work in continuity.

I went ahead and implemented the custom UICollectionViewLayout subclass and achieved what I need.

The intent is a single "page" which scrolls as a single view, but with content arranged in sections as described.

Great.

May be you could rapidly describe what you did.

And close the thread on your own answer.

No, the thread isn't closed... I don't have an answer to my question, which is specifically about how to achieve this layout using the "new way": UICollectionViewCompositionalLayout.

What I did was create a custom UICollectionViewLayout subclass, the "old way".

I have searched more into compositional and could not find anything specific for this purpose.

It is possible to set the width of section to a fractional dimension of 0.5, via groupSize.

let containerGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5),  heightDimension: .absolute(250))
let containerGroup = NSCollectionLayoutGroup.horizontal(layoutSize: containerGroupSize, subitems: [leadingGroup, trailingGroup])

But this will not create the 2 columns I fear.

Could you post what you did with classical flow to see if that can be more easily implemented with compositionalLayout ?

I was able to achieve side by side column sections by setting the scroll direction.


       

Code Block swift
        let config = UICollectionViewCompositionalLayoutConfiguration()
        config.scrollDirection = .horizontal
        layout.configuration = config
        return layout

The downside being that the orthogonal scrolling was a pretty choppy since my columns were long lists.

I don't think this will work for your layout though, since your layout has sections "flowing" in both axes. I believe you will need to use a single section with multiple groups. This will make "syncing" to the datasource more complicated since we can't use the section index, but it should be possible.