To use Flow Layout, or to Customize?

Question

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).

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!

Answer 1

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;

Answer 2

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.