7

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--------+
chancyWu
  • 14,073
  • 11
  • 62
  • 81
DavidNorman
  • 1,421
  • 1
  • 17
  • 22

1 Answers1

1

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)

Anil Varghese
  • 42,757
  • 9
  • 93
  • 110
  • Hi Anil, Thanks for the response. Sorry my question wasn't very clear. I actually don't need to scroll vertically, just horizontally. The problem I'm running into is separating my sections so that Section 0 is on top (scrolls horizontally through section 0 data) and section 1 is below it (scrolls horizontally through section 1 data). – DavidNorman Nov 27 '13 at 06:33
  • Are you using 2 collection views? In a single collection view it is not possible unless you have done lot of customization. Easy thing is use 2 collection views(each having single section) side by side(using storyboard will be easy) and setup the collection view to scroll horizontaly – Anil Varghese Nov 27 '13 at 06:43
  • Yes, I tried it with 2 collection views, but I was struggling so much with Auto-Layout I thought I would try another approach. However the more I think about this I think you're right and that the only way to accomplish this is with 2 collection views since I'd like the top and bottom view to be able to scroll independently. – DavidNorman Nov 27 '13 at 06:48
  • Go ahead with 2 collection views. Try a sample by adding two collection views to storyboard(dont forget to set scroll direction). Autolayout things you can fix – Anil Varghese Nov 27 '13 at 06:52