CODEWITHSUNDEEP
iosswiftuikit
Mike Marcacci
Mike Marcacci

Reputation: 1961

Using UICollectionView with nested sections (stacking headers)

I'm porting my web app to iOS using Swift 4, and I need to display a list which contains multiple nested "sections" where each section has its own header.

My instinct was to use UICollectionFlowLayout, but quickly discovered that it is limited to a depth of one. Diving further, figuring I would just have to create a custom layout, I see that the IOCollectionViewDataSource protocol actually assumes a depth of one.

I suspect I can find a way to flatten the data and reproduce the illusion of nested sections, but I'm baffled that I can't find an obvious way to have UICollectionView build what seems like a pretty common interface element. Perhaps I'm missing something?

Is there a common way for accomplishing this in UIKit?

Example of stacking headers from nested section list.

Upvotes: 0

Views: 336

Answers (1)

Rahul
Rahul

Reputation: 2100

Why not use a nested UICollectionView with your custom flowlayout, if you want UI like the way you shared in the question?

The idea would be, 

UICollectionView (top)-> DataSource = [Headers: [dataSourceBelowTop]]
     UICollectionView (inner) -> DataSource = dataSourceBelowTop

Take the example of the above case:

DataSourceTop is = ["Mission Gorge": ["Middle Earth": [SomeCustomModel]]]

The first task would be to build the top level UICollectionView, and then each collectionView will have another collection view. Now for Scrolling, you will need to play with the flowLayout which can be explained in another thread.

Upvotes: 1

Related Questions