UICollectionView: remove space between cells (with 7 items per row) - ios

Question

I have a UICollectionView with 7 items per row (or actually, the width of each item is the collectionView.bounds.width divided by 7).
Here is a code example:
final class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
let randomColors: [UIColor] = [.red, .blue, .green, .yellow, .orange, .purple, .cyan, .gray, .darkGray, .lightGray, .magenta]
var colors: [UIColor] {
var result: [UIColor] = []
for _ in 0..<200 {
result.append(randomColors[Int(arc4random_uniform(UInt32(randomColors.count - 1)))])
}
return result
}
#IBOutlet weak var collectionView: UICollectionView!
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.bounds.size.width / 7, height: 45)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return .leastNormalMagnitude
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return .leastNormalMagnitude
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: .leastNormalMagnitude, left: .leastNormalMagnitude, bottom: .leastNormalMagnitude, right: .leastNormalMagnitude)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return colors.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ColorCollectionViewCell", for: indexPath) as! ColorCollectionViewCell
cell.color = colors[indexPath.row]
return cell
}
}
final class ColorCollectionViewCell: UICollectionViewCell {
var color: UIColor? {
didSet {
self.backgroundColor = color
}
}
}
And the storyboard:
Since dividing the collectionView's width by 7 often gives a floating result, this results in spaces appearing between some cells:
What can I do here?
Thanks for your help.

Answer 1

You have to somehow distribute the additional pixels. Don't worry that all cells won't have exactly the same width, 1px difference won't be visible:
let numColumns = 7
let availableWidth = collectionView.bounds.size.width
let minWidth = floor(availableWidth / CGFloat(numColumns))
let remainder = availableWidth - minWidth * CGFloat(numColumns)
Now what to do with the remainder? Let's just add pixels to cell from the left:
let columnIndex = indexPath.row % numColumns
let cellWidth = CGFloat(columnIndex) < remainder ? minWidth + 1 : minWidth
return CGSize(width: cellWidth, height: 45)
This is just the basic idea.