Placing two sections next to each other in a UICollectionView

You don't necessarily have to write a custom layout, you can actually just subclass UICollectionViewFlowLayout and override a few key methods that determine frame positioning, namely layoutAttributesForElementsInRect:/ layoutAttributesForItemAtIndexPath: where you can check the section and determine positions.

The code itself would probably be relatively simple, something along the lines of:

if indexPath.section == 0 {    attributes.frame = CGRect(x: 0, y: 0, width: fullWidth, height: someHeight)} else {    // Section 2 which is indexed at 1, set the frame    // to half the width and x to 0    if indexPath.section %2 != 0 {        attributes.frame = CGRect(x: 0, y: someYCounter, width: halfWidth, height, someHeight)    } else {        attributes.frame = CGRect(x: halfWidth, y: someYCounter, width: halfWidth, height, someHeight)    }}

Obviously this is psuedo-code and I haven't run this through a compiler but the essential steps are:

• have a guard statement that ensures the existence of collection view so you can define the following variables: halfWidth and fullWidth (to be used when laying out later)
• keep a running counter of your y position
• check the section index and position appropriately

The best way to go about this is to override prepare and calculate an array of layout attributes (and store that as an instance variable). Then in layoutAttributesForItemAtIndexPath: and the like, just return the object at the index in that array (or if the index is for some reason out of bounds, return super.layoutAttributesForItem(at: indexPath).

That is the beauty of UICollectionViewFlowLayout, most of the heavy lifting is done for you and you can subclass a few simple methods to get the desired behavior. The alternative is a full blown custom layout which, in my opinion, rarely justified unless you have some crazy behavior in which case you should be having conversations with your designers about the complexity of what they make.