How to Set Cell Spacing and Uicollectionview - Uicollectionviewflowlayout Size Ratio

How to set cell spacing and UICollectionView - UICollectionViewFlowLayout size ratio?

Add these 2 lines

layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0

So you have:

   // Do any additional setup after loading the view, typically from a nib.
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0)
        layout.itemSize = CGSize(width: screenWidth/3, height: screenWidth/3)
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 0
        collectionView!.collectionViewLayout = layout

That will remove all the spaces and give you a grid layout:

If you want the first column to have a width equal to the screen width then add the following function:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    if indexPath.row == 0
    {
        return CGSize(width: screenWidth, height: screenWidth/3)
    }
    return CGSize(width: screenWidth/3, height: screenWidth/3);

}

Grid layout will now look like (I've also added a blue background to first cell):

Cell spacing in UICollectionView

I know that the topic is old, but in case anyone still needs correct answer here what you need:

1. Override standard flow layout.

2. Add implementation like that:

   - (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect {
       NSArray *answer = [super layoutAttributesForElementsInRect:rect];
   
       for(int i = 1; i < [answer count]; ++i) {
           UICollectionViewLayoutAttributes *currentLayoutAttributes = answer[i];
           UICollectionViewLayoutAttributes *prevLayoutAttributes = answer[i - 1];
           NSInteger maximumSpacing = 4;
           NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);
   
           if(origin + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {
               CGRect frame = currentLayoutAttributes.frame;
               frame.origin.x = origin + maximumSpacing;
               currentLayoutAttributes.frame = frame;
           }
       }
       return answer;
   }
   

where maximumSpacing could be set to any value you prefer. This trick guarantees that the space between cells would be EXACTLY equal to maximumSpacing!!

How to change space between cells in UICollectionView?

//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))
}

Prioritize spacing over size for UICollectionViewCell

Here is how I solved it:

extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        //Calculate cell width
        let spacingTotal = CGFloat((cellSpacing * 2) + (marginSpacing * 2))
        let screenWidth = UIScreen.main.bounds.width
        let cellWidth = (screenWidth - spacingTotal) / 3.0

        //Maintain ratio for cell height
        let widthToHeighRatio = CGFloat(102 / 94)
        let cellHeight = cellWidth * widthToHeighRatio

        return CGSize(width: cellWidth, height: cellHeight)
    }
}

Where cellSpacing is the value of your minimum cell spacing. And margingSpacing is the total value of your right and left margins for the collectionView.

Also note I'm maintaining a ratio for the cell size; the designs I'm working with display a 102 x 94 cell, so I'm maintaining that ratio for every screen size.

Here's how it looks on an iPhone SE and iPhone X:

Swift - How to adjust UICollectionViewCell's ratio for different IOS device sizes

It seems that the view's width isn't correct in the place you put the line

layout.itemSize = CGSize(width: self.frame.width / 5, height: self.frame.height)

so replace it with

layout.itemSize = CGSize(width: UIScreen.main.bounds.width / 5, height: self.frame.height)

---

you can also implement

func collectionView(_ collectionView: UICollectionView, 
                  layout collectionViewLayout: UICollectionViewLayout, 
           sizeForItemAt indexPath: IndexPath) -> CGSize

with conform to UICollectionViewDelegateFlowLayout

How to set custom Collection View Cell spacing for every cell

Below is how you set custom cell spacing in a collectionview. You have to create an extension.

extension ViewController : UICollectionViewDelegateFlowLayout {

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    return //whatever you want//

}

Make sure the "ViewController" that follows extension is the name of your viewcontroller.

---

Related Topics