Skip to main content

UICollectionView Spacing

There are a few aspects to handling spacing and size of UICollectionViews and their cells.

Lets start with the spacing around the actual uicollectionview. To do this we effectively add padding or edge insets. You can add edges to all sides of the collection view.

Now what about the cells within the UICollectionView. We can set the size of these cells, and the spacing that appears between each cell.

These methods are part of the UICollectionViewDelegateFlowLayout which should be added as a protocol. This will create a grid effect by default which can then be amended using the methods below.

To set the cell size, we return the desired width and height of the cell as a CGSize object in the method collectionView:layout:sizeForItemAtIndexPath:.

To set the minimum space horizontally between each cell, we return a float value from the method collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

To set the minumum spacing vertically between the cells, or line height. We return a float value from the method collectionView:layout:minimumLineSpacingForSectionAtIndex:

A sample of the code can be found in a Playground file on GitHub

Please follow and like us: