Search code examples
iosswiftuicollectionviewword-wrap

How do I make a UICollectionView's cells wrap when all cells are not the same size?

I have a UICollectionView, and I want the cells to come out in a grid like this:

Expectation

I did a bit of work to calculate the sizes of the cells given a 16px padding between cells, but I cannot seem to figure out how to get the cells to wrap the way I want to. Here's a screenshot of my current UI. The colors are currently a placeholder while I work out the kinks in the dimensions. The blue will be transparent, and the red will be images.

Reality

I'm using collectionView sizeForItemAt to calculate the size of each cell.

In the Interface Builder, the collection view has the following settings:

Interface Builder

I did try reducing the size of the smaller cells, to see if they would pop up (I picture how float works in CSS), but it did not help. They just got smaller in the rows they're currently in, until they were small enough to fit 3 small ones on the top right line.

Any guidance would be extremely appreciated.

Edit 1:

I just had the idea to set the scroll direction to be horizontal instead vertical, and it's closer, but still not correct. I haven't actually specified that I want 16px gutters between cells, even though that's what the cell sizes are calculated for. How would I go about doing that?

Horizontal

Solution

  • I think in your case it is better to implement a custom layout for the collection view by subclassing UICollectionViewLayout. More details in Apple Documentation.