Aligning collection view cells to fit exactly 3 per row

Question

I am trying to make a collection view of images, so that there are 3 per row, with no spacing in between.

My collection view data sources are:

func numberOfSections(in collectionView: UICollectionView) -> Int {     return 1 }  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {     return posts.count } 

and this is how it's set up in my storyboard (imageView width is 125, a third of the 375 screen width):

However when I run the app and add some photos, it looks like this:

How can I fix this so that I see 3 images per row? Thanks for any help!

Answer 1

You have to implement the

UICollectionViewDelegateFlowLayout

for the spacing stuff.

Set the size of the collectionViewCells like this:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {     let yourWidth = collectionView.bounds.width/3.0     let yourHeight = yourWidth      return CGSize(width: yourWidth, height: yourHeight) } 

You can also add these functions to get your spacing of the collectionViewCells correct:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {     return UIEdgeInsets.zero }  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {     return 0 }  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {     return 0 }