4

I'd like to build a collection view layout as outlined in the diagram below.

Primarily, I'd like to keep all items for a particular section on the same line. When the users scrolls vertically, the sections scroll off the page. When the user scrolls horizontally, the items left and right ("tucking" under the section header when scrolled left, bringing new items on screen from the right).

enter image description here

I understand Apple says "If it looks like a grid, you can use Flow Layout," but I'd like to understand if that's just a blanket statement, or if the above will push the limits.

Can layout above be done using the FlowLayout, or am I better off building a custom layout from scratch?

If you're a guru with layouts and this is "child's play," I'd love to see an example of how to proceed.

Thanks!

5 Answers 5

4

You need to use layout class which will inherit UICollectionViewFlowLayout. By doing this, you can customise your behaviour of layout by using below methods. Also you can get all hooks of Flow Layout also.

 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect; // return an array layout attributes instances for all the views in the given rect

 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
  - (void)prepareLayout;
2
  • Thanks, and as it turned out, I also needed to invalidate the layout on scroll so that my headers could be "sticky". Mar 7, 2013 at 16:05
  • @AndrewTheken how did you make the headers sticky? try to find a solution for it, but all what I found did not work for me...
    – jerik
    Nov 11, 2013 at 13:39
3

Rather than going to the trouble of creating a custom UICollectionViewLayout subclass, you can achieve the behavior you're looking for by using a standard table view, with a cell for each row that contains one view for the header, and a horizontally-scrolling collection view for the row items.

I put together a little example that you can download here.

A little extra work is needed to maintain the scroll position of the collection view as you scroll vertically through the table view, so I'm saving that into an instance variable, and restoring it when the table cell is requested. Other than that I think the example project is fairly straightforward.

2
  • 1
    This is a good answer. Technically, ALL the rows should scroll left/right at the same time. Upvoting for the great example! Mar 7, 2013 at 16:08
  • This is pretty nice and straightforward.
    – Fraggle
    Mar 12, 2013 at 16:12
2

Here is my implementataion! Hope this will help you!

0

You cannot subclass UICollectionViewFlowLayout here because it is a single-line based layout.

0

Thanks for the excellent answer. It works for me. You can also specify one single line per tableview section and add header section for each collectionview.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.