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.

Pls help me to fix this problem...

Answer 1

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
    }

Answer 2

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

1. Create XIB for collectionview Cell
   
2. Add Top Level View named TopView with constraint to 0 All side (uncheck margin)
   
3. Add Another UIView named ShadowView Inside TopView
   
4. If you observe we have already contentInset of 5 from Left to make it 15 We need to add leading Constraint with 10 constant
   
5. If you observe we have already contentInset of 10 from right to make it 15 We need to add Trailing Constraint with 5 constant
6. If you observe we have already contentInset of 5 from Top to make it 15 We need to add Top Constraint with 10 constant
   
7. If you observe we have already contentInset of 10 from Bottom to make it 15 We need to add Bottom Constraint with 5 constant
8. 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 :)

Answer 3

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;
}

Answer 4

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 :

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 :

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.