Iglistkit: Sections with different flow layouts

[bonzoq]

I hope it is ok to ask this here. Otherwise, please feel free to delete this issue.

I'm playing with the examples and am wondering what's the best way to create a collection view with sections that scroll in different directions. So for example let's say there are two sections, the first has items that scroll horizontally, but it also scrolls vertically along with the second section.

So far I've been achieving this by putting a collection view in a table view cell.

Along these lines, let's say in addition to that, that we want the first 'horizontal' section to be fixed, meaning that it won't scroll along with the second section. Should we just use two different collection views for those sections in this case?

[jessesquires]

Hey @bonzoq ! Definitely ok 😄 👍

So far I've been achieving this by putting a collection view in a table view cell.

This is how we currently handle this for our own uses. (Except we put a collection view inside collection view cells — since ListKit is only for collection views.)

We want to provide this functionality "out-of-the-box", but currently don't have a solution. We're tracking this at #31. Let's move this conversation there. 😊

Along these lines, let's say in addition to that, that we want the first 'horizontal' section to be fixed, meaning that it won't scroll along with the second section. Should we just use two different collection views for those sections in this case?

This would definitely be out-of-scope for #31, but we could address this once #31 is finished.

[bonzoq]

Thank you for answering this so quickly @jessesquires 👍 ❤️

[otymartin]

@bonzoq Did you figure this out?

[bonzoq]

Hey @otymartin, here's a rather general description of how I handle this:

1. Create an IGListCollectionView with vertical flow layout.
2. Create an IGListSectionController backed by a datasource similar to this:

class DataForHorizontalCollectionView: IGListDiffable  {
    var dataForIndividualCells: [String]?

    func diffIdentifier() -> NSObjectProtocol {
       // implement this
    }

    func isEqual(_ object: IGListDiffable?) -> Bool {
        //implement this based on the data stored in 'dataForIndividualCells'
    }
}

1. In your vertical collection view display just one section created in point 2. Also, this section controller should always display just one cell.
2. Inside that cell add a UIViewController based container
   that has another instance IGListCollectionView in it, this collection view ought to have a horizontal flow layout. In the cellForItem(at index: Int) -> UICollectionViewCell method of your section controller created in point 2, pass data to your second collection view.
3. Also, you might want to store the content offset of your horizontal collection in a dictionary. This is nicely described by Ash Furrow in https://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell .

Hope this helps.

[otymartin]

@bonzoq Thanks for sharing your solution. Im following along and will reach back when I manage to implement something. Might have some follow up Q's though. (Sticky headers)

[bonzoq]

@otymartin sure thing, let me know if you've any questions whatsoever.

[jr9098]

@bonzoq I tried to implement this solution but my horizontal collection view is not receiving any touch event and i'm not able to scroll it. Did I missed something?

[otymartin]

@jr9098 Did you use my method of embedding the collectionview in a tableview cell?

[jr9098]

@otymartin I'm using @bonzoq 5 steps solution

[otymartin]

@jr9098 I documented my solution in #304 incase. I never managed to implement this method but can't believe it would be that hard, the example projects do it.

[jr9098]

@otymartin thanks for your help, I managed to do it with the example (HorizontalSectionController and EmbeddedSectionController in the example project)!