iOS - UICollectionView still have spacing between cells after set to 0 - ios

Question

Im getting small spaces between cells when setting everything to 0. All I did in the cellForItemAtIndexPath is setting backgroundColor for each cell.
Here's my code:
//collectionView frame
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 150) collectionViewLayout:layout];
...
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
//The cell sizes are divided by the width of the collectionView.
return CGSizeMake(_collectionView.frame.size.width/12, _collectionView.frame.size.width/12);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0, 0, 0, 0);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 0.0f;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0.0f;
}
My collection view looks like this. You'll see that there are black lines between some cells. What is causing this? How can I remove the lines?
Any help is greatly appreciated. Thanks in advance.

Answer 1

I too faced this problem. Thanks to #tenric for pointing out and yes for me was because the width is not divisible by the number of desired columns. My solution as follow:
var itemWidth: CGFloat {
get {
return floor(view.frame.size.width / 7)
}
}
And because I'm using AutoLayout, I just adjust the gap to the width of the collectionView as follow (refer to widthAnchor):
collectionView?.topAnchor.constraint(equalTo: headerSeparator.bottomAnchor).isActive = true
collectionView?.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
collectionView?.bottomAnchor.constraint(equalTo: footerSeparator.topAnchor).isActive = true
let gap = view.frame.size.width - (itemWidth * 7)
collectionViewWidthConstraint = collectionView?.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -gap)

Answer 2

because both width and height are not divisible by 12,so it would remain some empty pixel point.To avoid this,both width and height of collectionView should be multiples of 12.

Answer 3

I was going crazy over this too. I wanted a generic solution since I had 3 cells per row for iPhones and 4 cells per row for iPads and the UICollectionView was covering the entire width of the screen and the width is different between all devices.
I ended up making the combined width of the cells on a row wider than the device screen by using ceil(frame.width / itemsPerRow). I then calculated the total width of the cells on a row and compared with the screen width (view.frame) to get the width overflow the cells would create. Knowing the overflow I set the trailing constraint of the UICollectionView to be negative the overflow. This means the UICollectionView is actually going to overflow the screen width with a pixel or so, but in my case this was not an issue. Hopefully the code below will help clarify and give you an idea of how this could be solved.
// calculating cell width
let frame = view.frame
let cellWidth = ceil(frame.width / itemsPerRow)
// adjust UICollectionView to avoid space between cells
let totalCellsWidth = cellWidth * itemsPerRow
let overflow = totalCellsWidth - frame.width
let adjustedConstraint = -overflow
collectionViewsTrailingConstraint.constant = adjustedConstraint