Equal spacing for collectionview items in ios

Question

I using collection view controller to display images like in gallery. Now I struck with spacing. I cant set equal spacing in collection view..

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 0;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 0;
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(0, 0, 0, 0);
}
- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(106.0f, 106.0f);
}

This is my code.. cell width 106 but the imageview width is 104.0f I gave 2 points spacing left side of the image view now I got solution as below image. enter image description here

Pls help me to fix this problem...

So how are your expecting your cells to appear ? Is it like no space between cells or equal space from left and right side with equal spacing in between cells or something else ? — Matt Murdock, Jun 21 '14 at 04:54
iCoder: Thanks for your response I need equal space in left, right and the space between the items.. — Seeker, Jun 21 '14 at 05:01
Are you using storyboard ? Or creating the entire thing programatically ? — Matt Murdock, Jun 21 '14 at 05:02
I creating cells in xib and using collectionviewController that is also in xib.. — Seeker, Jun 21 '14 at 05:08

score 8 · Answer 1 · answered Jun 21 '14 at 05:20

To check about how your collection Cells would look, you can try this in your Storyboard with the help of storyboard. First just for the sake of checking, put some static cells in your CollectionViewController like this so that your screen appears like this :

enter image description here

No you can see those cells and the spacing between them. In your case, the cells will appear with improper spacing as you have shown above. So now open with this screen open, open up the Size Inspector fron your Interface Builder. It would look something like this :

enter image description here

Now you can see some options in the size inspector window. You can adjust the size of each cell and also the spacing between them using the Min. Spacing option. And finally for equal spacing from left and right sides, use the Section Insets Option. As you change the values there, the change will be reflected in your Controller View. So you can get an idea if you want to increase/decrease some values.

Hope this helps.

Hi can you pls tell this how can I done this programatically. Bcoz I m using collectionviewcontroller I can't set this... — Seeker, Jun 21 '14 at 07:08
I don't know much about doing it programatically. And these links will help you. http://stackoverflow.com/questions/13970950/uicollectionview-spacing-margins http://stackoverflow.com/questions/17229350/cell-spacing-in-uicollectionview — Matt Murdock, Jun 21 '14 at 07:14
This answer is incomplete; the values changes with screen sizes/orientations. — Jonny, Apr 17 '17 at 05:17

score 7 · Answer 2 · edited Sep 08 '18 at 12:50

Hey you got the answer or not? If not @iCoder gave very good idea that first you can take an idea how much spacing we need using interface builder. and then you can set them programatically by using these flowLayout delegate methods. Like I did:

// 1
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *searchTerm = self.students[indexPath.row];
    // 2
    CGSize retval =  CGSizeMake(100, 100);
    retval.height = 190;
    retval.width = 170;

    return retval;
}

// 3
- (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 10.0;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section 
{
    return 20.0;
}

score 3 · Answer 3 · answered Feb 14 '20 at 16:01

Swift 5

Set up some section insets (How far your cells will be from the frame of the CollectionView), number of cells you want in a row, and the spacing you want between your cells

let sectionInsets = UIEdgeInsets(top: 20.0, left: 20.0, bottom: 20.0, right: 20.0)
let numberOfItemsPerRow: CGFloat = 4
let spacingBetweenCells: CGFloat = 10

Use all the values above in the UICollectionViewDelegateFlowLayout:

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let totalSpacing = (2 * sectionInsets.left) + ((numberOfItemsPerRow - 1) * spacingBetweenCells) //Amount of total spacing in a row

        if let collection = self.collectionView{
            let width = (collection.bounds.width - totalSpacing)/numberOfItemsPerRow
            return CGSize(width: width, height: width)
        } else {
            return CGSize(width: 0, height: 0)
        }
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return sectionInsets
    }

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

score 0 · Answer 4 · answered Dec 28 '18 at 07:55

Special Case : Added Shadow to cell + Equal spacing trick (Swift 4.2)

Suppose you want equal spacing all side as well as you need shadow all side of collection view Cell then ?

If you apply shadow with equal spacing all side you didn't get shadow properly because it will be clipped and if you change size according to it you lost the equal spacing ... UICollectionview Why you are doing this with me ?

Final Output

If you observe there is shadow + Equal spacing below is the fix

Logic 15px Each side

You need to design You cell as per your required spacing

Create XIB for collectionview Cell
Add Top Level View named TopView with constraint to 0 All side (uncheck margin)
Add Another UIView named ShadowView Inside TopView
If you observe we have already contentInset of 5 from Left to make it 15 We need to add leading Constraint with 10 constant
If you observe we have already contentInset of 10 from right to make it 15 We need to add Trailing Constraint with 5 constant
If you observe we have already contentInset of 5 from Top to make it 15 We need to add Top Constraint with 10 constant
If you observe we have already contentInset of 10 from Bottom to make it 15 We need to add Bottom Constraint with 5 constant
Add Shadow to ShadowView

Inside Your View Controller

    // VERY IMPORTANT  
    self.collectionView.contentInset = UIEdgeInsets(top: 5, left: 5, bottom: 10, right: 10)
    self.collectionView.dataSource = self
    self.collectionView.delegate = self

    let collectionViewFLowLayout = UICollectionViewFlowLayout()

    collectionViewFLowLayout.itemSize = CGSize(width: (self.view.bounds.width - (self.collectionView.contentInset.left + self.collectionView.contentInset.right)) / 2, height: 220)
    collectionViewFLowLayout.minimumLineSpacing = 0
    collectionViewFLowLayout.minimumInteritemSpacing = 0
    self.collectionView.collectionViewLayout = collectionViewFLowLayout



        // Calulations
        // In CollectionView Cell constraint left 10 + Content Inset (5) = 15 From Left
        // Cell Constriant Right 5 + Cell constraint left 10  = 15 between GAP
        // Cell Constriant Right 5 + Content Inset (10)  = 15  from Right

Hope it is helpful :)

Equal spacing for collectionview items in ios

4 Answers4

Special Case : Added Shadow to cell + Equal spacing trick (Swift 4.2)