How to change space between cells in UICollectionView?

Question

I want to reduce the size between cells in row. Now it looks like:

I'm trying this, for reduce the size between them:

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 2, bottom: 10, right: 2)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0

but it doesn't help me. What I do wrong?

@patchdiaz it's not a duplicate! I've tried this version, but it doesn't work. That's why I created this question — John Doe, Feb 26 '16 at 14:24
Do you want your cells to be left-aligned, i.e. you'll have a lot of empty space on the right? — Tim Vermeulen, Feb 26 '16 at 14:30
What about this one http://stackoverflow.com/questions/17229350/cell-spacing-in-uicollectionview ? — fdiaz, Feb 26 '16 at 14:31
@TimVermeulen yes, exactly! I want 3 items on a row, with the 2 px space on right, except the last one — John Doe, Feb 26 '16 at 14:32
Then can't you simply decrease the width of the collection view? — Tim Vermeulen, Feb 26 '16 at 14:40
I mean, if you decrease the width of the collection view, the cells will have less space between them. — Tim Vermeulen, Feb 26 '16 at 14:44
@TimVermeulen i want to set the width of cells equal to width / 3 with the right 2px space, as: (width - 4) / 3 in one line with 3 cells — John Doe, Feb 26 '16 at 14:48

Yagnesh Dobariya · Accepted Answer · 2016-12-17T03:59:55.440

32

//Objective c
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
        return CGSizeMake((collectionView.frame.size.width/3)-20, 100);
    }

// Swift 2.0

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSizeMake((collectionView.frame.size.width / 3) - 20, 100)
}

// Swift 3.0
override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: CGFloat((collectionView.frame.size.width / 3) - 20), height: CGFloat(100))
}

edited Dec 17 '16 at 03:59

answered Feb 26 '16 at 14:37

Yagnesh Dobariya

2,241
19
29

2

@ZacharyGover can you back up this "claim" with a creditable source? Most of Apples modules are still written in Objective-C, and it's still widely used today. – JAL Feb 26 '16 at 14:54
1

You do know that I said almost becoming obsolete? Yes some things are still written around Objective-C, although as Apple is updating Swift they are rewriting it all. Although that still means the majority of developers are writing in Swift. My main point that I was trying to get across is to give both answers, as you have now done. Because soon enough it will be obsolete, and people in the future won't be able to understand it if they're new to programming, when they look at this post for help. – ZZZZtop Feb 26 '16 at 14:59

score 30 · Answer 2 · answered Feb 26 '16 at 16:20

30

Go to the storyboard , right click on collection view and

And Check your minimum spacing between the cell and reduce it to zero .

answered Feb 26 '16 at 16:20

Himan Dhawan

894
5
23

Now issue can be in UIcollectionview cell ..... check out the constrains in UICollectionview cell ...... there should not be anytime of padding , rest i need to go through your code – Himan Dhawan Feb 26 '16 at 18:00
1

In story board there are two sections one is collectionview and under collectionview there is collectionview flow layout ....did u check min spacing in both ? – Himan Dhawan Feb 26 '16 at 18:06

score 16 · Answer 3 · edited Aug 18 '20 at 09:51

16

On your code, you have to create a IBOutlet to your collection view, and then assign the collectionViewLayout as such:

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 2, bottom: 10, right: 2)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
layout.scrollDirection = .horizontal
collectionView!.collectionViewLayout = layout

edited Aug 18 '20 at 09:51

Vinu David Jose

2,569
1
21
38

answered May 13 '17 at 21:12

Manny

229
3
3

You are my hero. – Baran Jan 03 '18 at 20:47
One more point needs to add : Make sure that collectionview Scroll direction is in "Horizontal" for fixing horizontal cell gap. Otherwise minimumInteritemSpacing may not work.(Tested in Xcode 11.2.1 swift 4.2) – Zeesha Jan 16 '20 at 09:30

score 4 · Answer 4 · edited Jan 23 '18 at 12:02

4

Its simple

let layout = contactsCollectionView.collectionViewLayout as? UICollectionViewFlowLayout
layout?.minimumLineSpacing = 8

edited Jan 23 '18 at 12:02

MinnuKaAnae

1,646
3
23
35

answered Oct 08 '17 at 11:04

jamal zare

1,037
12
13

score 3 · Answer 5 · edited Aug 24 '19 at 17:14

extension ViewController: UICollectionViewDelegateFlowLayout {
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            let collectionWidth = collectionView.bounds.width
            return CGSize(width: collectionWidth, height: collectionWidth/2)
        }
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
            return 0
        }
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
            return 100
        }
    }

score 3 · Answer 6 · answered Apr 25 '19 at 10:22

Swift 5 Programmatically

lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal

        //Provide Width and Height According to your need
        let width = UIScreen.main.bounds.width / 4
        let height = UIScreen.main.bounds.height / 10
        layout.itemSize = CGSize(width: width, height: height)

        //Make Space as Zero
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 0

        return UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    }()

You can provide much more customization inside the lazy collectionView Block.

score 1 · Answer 7 · edited Jan 23 '18 at 11:01

1

If you create CollectionView In StoryBoard or Xib,Go to StoryBoard or Xib and set these Values from

edited Jan 23 '18 at 11:01

MinnuKaAnae

1,646
3
23
35

answered Feb 26 '16 at 16:37

Pengyu Zhang

21
1

Can you give some example code of how to achieve this?\ – pczeus Feb 26 '16 at 16:44
no, I did not set it from XIB. On XIB I just set collection view cell – John Doe Feb 26 '16 at 17:51

score 0 · Answer 8 · answered May 27 '19 at 10:56

0

(Swift 4)

Click on collection View in storyboard.
on right hand side, click size inspector.
manage and alter the cell size value and you'll figure it out by yourself.

answered May 27 '19 at 10:56

majid khan

31
3

How to change space between cells in UICollectionView?

8 Answers8

Swift 5 Programmatically

Linked