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

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.

I too faced this issue. I believe this happens because of a bug in autolayout. That 1px gap between the cells cant be removed, unless you do some crazy hack!!! — Teja Nandamuri, Nov 23 '15 at 14:23

score 3 · Answer 1 · answered Mar 03 '17 at 09:20

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)

score 0 · Answer 2 · answered Nov 23 '15 at 15:53

0

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.

answered Nov 23 '15 at 15:53

tenric

23
3

I did change the size is each cell to 26.6666667 (320/12) and still this is happening. But thank you for your answer. – Ty Lertwichaiworawit Nov 23 '15 at 15:59

score 0 · Answer 3 · answered Jul 12 '17 at 03:53

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

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

3 Answers3

Linked