Search code examples
iosswiftuiviewuiscrollviewuicollectionview

Nesting Multiple CollectionView

I am building a layout represented in the following way.

enter image description here

The hierarchy is in the following way :

view
|
|__CollectionView (CV1), vertical scroll
         |__ CV1.SimpleCell1
         |__ CV1.SimpleCell ...
         |__ CV1.SimpleCell 9
         |
         |__CV1.Complex
                |
                |__ScrollView, horizontal scroll
                        |
                        |__CollectionView2 (CV2), horizontal scroll
                        |           |
                        |           |__n Titles
                        |
                        |__CollectionView3 (CV3), vertical scroll only
                                    |
                                    |__n images

There is a maincollection view with vertical scroll whose header is an image, and has couple of simple cells with normal visuals. After about 9 cell, I want a part in the view where the user is presented with another scrollable which can paginate or be free form horizontal scroll which has a title and a collecitonview (consisting of images) assigned to that title. Now the user should be able to scroll back and forth and still be scrolling vertically to access more images. Below is the representation of the same. I am really not able to figure out the correct possible implementation of the view here. Also, If I embedd a dynamic collectionview in the parent collectionview cell, i am not sure how the height will be dynamic.

enter image description here

The whole diagram of the architecture is :

enter image description here

I really look forward to some guidance. I have been going crazy over this, any help is immensely appreciated.

Thanks. Please let me know for more info if any required.

Solution

  • According to what you said I would do something like this; could be not accurate, but this is the main idea.

    view
|
|__CollectionView Vertical Scrolling or TableView
         |
         |__CV1.Simple Cell
         |__ …
         |__CV1.Simple Cell
         |
         |__CV1.Complex Cell
                |__CollectionView - Titles - Horizontal scroll (no interaction)
                |         |
                |         |__n Title Header Cell
                |
                |__CollectionView - Images - Horizontal scroll
                          |
                          |__n Image Cell

    So the outer collection view is a simple collection view that has vertical scrolling and contains n cells;

    • The Complex Cell is basically the cell that contain the horizontal stuff; no need to use a UIScrollView as we'll use two horizontal UICollectionView, one contains the headers ('One', 'Second'...) and one contains images; set horizontal scroll can be done in storyboard/xib or doing collectionView.collectionViewLayout as? UICollectionViewFlowLayout)?.scrollDirection = .horizontal
    • Complex Cell is the dataSource and delegate of both collection views;
    • Title Collection View must have isUserInteractionEnabled = false (users cannot scroll headers with the finger);
    • The goal is to scroll the Title Collection View based on the Image Collection View; you could maybe use scrollViewDidScroll which is a method of the UICollectionViewDelegate (remember that UICollectionViewDelegate extends a UIScrollViewDelegate)

    Other things to consider:

    • The Complex Cell should have a fixed size (could be very complicated handle dynamic size in this case)
    • You can maybe simplify by using a UITableView instead of a UICollectionView for the vertical scrolling, but this will not allow you to have grid layout for the Simple Cell