Aligning collection view cells to fit exactly 3 per row Aligning collection view cells to fit exactly 3 per row xcode xcode

Aligning collection view cells to fit exactly 3 per row


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}


Swift - Version 4.2

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {    let noOfCellsInRow = 3    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout    let totalSpace = flowLayout.sectionInset.left        + flowLayout.sectionInset.right        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))    return CGSize(width: size, height: size) }


1- You have to conform to UICollectionViewDelegateFlowLayout

2- You should implement collectionView(_:layout:sizeForItemAt:) method, as follows:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {    let screenWidth = UIScreen.main.bounds.width    let scaleFactor = (screenWidth / 3) - 6    return CGSize(width: scaleFactor, height: scaleFactor)}

Assuming that the minimum spaces are 8 -for example-,

enter image description here

the output should be three items for each row, square sized.

Remark: If you want to set the spaces between the cells to be zero, then scaleFactor should be:

let scaleFactor = (screenWidth / 3)

Hope this helped.