Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stack UICollectionView sections

I originally tried doing this with two UICollectionViews stacked on top of each other. However getting it to scale right was nightmare with Auto-layout (I'm a novice iOS developer so that is more a critique of my skill than Auto-layout). I'd like to stack two sections of UICollectionView cells on top of each other like this:

             +----------------------+
             |+-Section 0---------->|
             | +-------+  +-------+ |
             | |       |  |       | |
             | |       |  |       | |
             | |Cell 0 |  |Cell 1 |+->
             | |       |  |       | |
             | |       |  |       | |
             | +-------+  +-------+ |
             +--Section 1---------->|
             | +-------+  +-------+ |
             | |       |  |       | |
             | |       |  |       | |
             | |       |  |       | |
             | |Cell 0 |  |Cell 1 |+->
             | |       |  |       | |
             | |       |  |       | |
             | +-------+  +-------+ |
             |                      |
             +----------------------+

I'm using a custom Flow Layout, but I'm not even sure where to begin breaking my current 2 sections to stack like this. Currently my sections are stacked like this:

                                +--------(Offscreen)
                                |
                                +
          +--------xxxx--------+v
          |   Section 1        | Section 2
          |  +-----+   +-----+ | +-----+  +-------+
          |  |     |   |     | | |     |  |       |
          |  |     |   |     | | |     |  |       |
          |  |     |   |     | | |     |  |       |
          |  |     |   |     | | |     |  |       |
          |  +-----+   +-----+ | +-----+  +-------+
          |                    |
          |                    |
          |  +-----+   +-----+ | +-----+  +-------+
          |  |     |   |     | | |     |  |       |
          |  |     |   |     | | |     |  |       |
          |  |     |   |     | | |     |  |       |
          |  |     |   |     | | |     |  |       |
          |  +-----+   +-----+ | +-----+  +-------+
          |                    |
          |                    |
          |        xxxx        |
          +--------xxxx--------+
like image 480
DavidNorman Avatar asked Nov 27 '13 05:11

DavidNorman


1 Answers

UICollectionView can scroll either vertical or horizontal not both. If you have only two sections like in the diagram you can use two collection view. But it better to think of a design like a table view contains collection views in each cells. So that the design will be flexible(Horizontal and vertical scrolling with any number of sections). Anyway the design is little bit complex, you should customize the table view cell to put collection view in it. Now the UITableView will give you vertical scrolling with the ability to scroll each rows horizontaly(UICOllectionView)

like image 66
Anil Varghese Avatar answered Oct 25 '22 21:10

Anil Varghese