Reduce interitem spacing in UICollectionView

Question

I have already looked up:-

UICollectionView distance between cells?

Decrease Space between UICollectionViewCells

but none of them worked for me.

I also tried implementing the UICollectionViewDelegateFlowLayout and implemented

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 3
}

but it has no effect on it.

Please have a look at the following screenshots taken in iPhone 7 / iPhone 5s / iPhone 7 Plus (picture order is same)

I also looked self-sizing cells, but I don't want self-sizing cells, as my item size is always fixed and meets my requirements.

I have also set the minimum spacing of cells in the storyboard but it has no effect on the layout.

How to reduce the big gap between the two cells (interitem spacing), avoid clipping in the iPhone 5S and also the empty spaces on the right side in the iPhone 7 Plus (you can't see since the background is white)

Any insights will be appreciated.

http://stackoverflow.com/a/40261279/4601170 – Bhavin Bhadani Jan 17 '17 at 12:45 — Bhavin Bhadani, Jan 17 '17 at 12:45

score 3 · Accepted Answer · answered Jan 17 '17 at 12:44

3

If your cellsize is "Fixed" , you cant avoid the gap because you have hardcoded a fixed width!

You need to calculate the total width of the collectionView.frame and divide it by 2, and also include the spacing between the items, and not a "fixed" size. Quick typed example:

(calculate cellsize)

CGFloat spacing = 3.0f
CGFloat itemWidth = collectionView.frame.size.width / 2 - spacing
CGSize totalSize = itemWidth, itemWidth

answered Jan 17 '17 at 12:44

I'll try this and get back to you. Thanks, the answer seems very much logical. – Dark Innocence Jan 17 '17 at 12:58
@DarkInnocence Np, I strongly suggest you use autolayout for the cell views as you screenshots, so if you have a smalleR/bigger screen, you will keep the design perfect always. – Jan 17 '17 at 13:06
Works like a charm :D !! Thank you so much. Btw, auto-layout was already implemented. – Dark Innocence Jan 17 '17 at 13:13
@DarkInnocence great! :) – Jan 17 '17 at 13:13

score 0 · Answer 2 · answered Jan 17 '17 at 12:50

Try to set width and height of each cell in sizeForItemAtIndexPath method.

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    float cellWidth = screenWidth / 2.0; //Replace the divisor with the column count requirement. Make sure to have it in float.

    CGFloat screenHeight = screenRect.size.height;
    screenHeight = screenHeight - 114.0; // Sum of Bottom View & Top View Height

    float cellHeight = screenHeight /(totalArray.count/2);  //totalArray contains item used to show in collectionview

    if(DEFAULT_CELL_HEIGHT > cellHeight){
        cellHeight=DEFAULT_CELL_HEIGHT;
    }

    CGSize size = CGSizeMake(cellWidth, cellHeight);

    return size;
}

score 0 · Answer 3 · answered Jan 17 '17 at 12:55

0

@Hauzin's answer is fine to get rid of the spacing in different devices. For the spacing between cells (minimumInteritemSpacingForSectionAt), did you make your view controller conform to this protocol (UICollectionViewDelegateFlowLayout)?

answered Jan 17 '17 at 12:55

badhanganesh

3,427
3
18
39

Yes, you have implemented the method there. But I am asking if you have really conformed to that protocol in code. `MyViewController: UIViewController, UICollectionViewDelegateFlowLayout` – badhanganesh Jan 17 '17 at 13:01
Yeah I did that. Before Hauzin's solution, I was calculating the wrong width (hardcoded width) – Dark Innocence Jan 17 '17 at 13:37

Reduce interitem spacing in UICollectionView

3 Answers3