UICollectionView with two columns, different cell sizes and one after the other

Question

This is basically what I'm aiming for:

But my collection view looks like this:

Theres some kind of separator between the different rows. I don't need them to resize with auto layout, it's a repeated pattern of 4 cells so I know the exact size of each one.

I'm using

  func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

for the size of each cell

And this is my flow layout:

let flowLayout = UICollectionViewFlowLayout()
    flowLayout.scrollDirection = .Vertical
    flowLayout.minimumLineSpacing = 10
    flowLayout.minimumInteritemSpacing = 5

How can approach that separation?

Answer 1

You cannot do this using UICollectionViewFlowLayout. You have to subclass UICollectionViewLayout and create your own custom collection view layout.

Thankfully the great guys at Ray Wenderlich have done a tutorial on how to create a custom collection view layout that mimicks the layout of the Pinterest App. That layout does exactly that what you are trying to achieve.

UICollectionView Custom Layout Tutorial: Pinterest