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-,
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.