UICollectionView with zero cell spacing

Question

I've followed this answer and try to implement 5 cells per row and it's working great when I check on iPhone 6 & iPhone SE as below.

But the problem occures when I try to run it on iPhone 6 Plus. Can anyone help me out on figuring out the issue please?

This is my code.

screenSize = UIScreen.main.bounds
screenWidth = screenSize.width
screenHeight = screenSize.height
let itemWidth : CGFloat = (screenWidth / 5)

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
layout.itemSize = CGSize(width: itemWidth, height: itemWidth)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
layout.sectionInset = UIEdgeInsets(top: 10.0, left: 0, bottom: 10.0, right: 0)
collectionView!.collectionViewLayout = layout

layout.itemSize = CGSize(width: itemWidth, height: itemWidth) this is controls your items size. try to use screenWidth/5 for the itemWidth — MNM, Oct 25 '16 at 05:19
@MNM it's a UILabel. Yeap I tried to put `layout.itemSize = CGSize(width: screenWidth/5, height: screenWidth/5) ` yet no luck :( — Reshan Kumarasingam, Oct 25 '16 at 05:22
Try putting it into a container view and color the background black — MNM, Oct 25 '16 at 05:33
You must be running it on the simulator. Try it on a device and I don't think you will see these lines. — Rikh, Oct 25 '16 at 06:04

The Mach System · Accepted Answer · 2016-10-25T06:03:04.330

3

It has to be

let itemWidth : CGFloat = (screenWidth / 5.0)

So the result will not be rounded.

Updated

Please make sure if you use storyboard to create your UICollectionView, remember to set autolayout to the collection view's size so that it is updated to whatever current screen size is.

Update 2

If you use storyboard there is no need to create a UICollectionViewFlowLayout. You can set the insets and spacings from storyboard. Then in your .m file implement this to determine item's size.

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
     return yourDesiredSize;
}

edited Oct 25 '16 at 06:03

answered Oct 25 '16 at 05:27

The Mach System

5,790
3
12
20

Thanks but it doesn't help :( Same scenario. – Reshan Kumarasingam Oct 25 '16 at 05:37
collectionview is using storyboard and autolayout is set to 4 directions. – Reshan Kumarasingam Oct 25 '16 at 05:53
Thanks for your time :) – Reshan Kumarasingam Oct 25 '16 at 06:11

score 2 · Answer 2 · answered Jun 05 '19 at 15:03

To fix the blank spaces the size of each cell should be a round number. Then the difference between the sum of rounded numbers and the size of collectionView can be equally distributed or put in one cell.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // To avoid white space inbetween cells we're rounding the width of each cell
    var width = CGFloat(floorf(Float(screenWidth/CGFloat(objects.count))))
    if indexPath.row == 0 {
        // Because we're rounding the width of each cell the cells don't cover the space completly, so we're making the first cell a few pixels wider to make sure we fill everything
        width = screenWidth - CGFloat(objects.count-1)*width
    }
    return CGSize(width: width, height: collectionView.bounds.height)
}

UICollectionView with zero cell spacing

2 Answers2