UICollectionView Cell Spacing based on device screen size

Step 1: Implement UICollectionViewDelegateFlowLayout(if not done).

Step 2: Use delegate method of UICollectionViewDelegateFlowLayout.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSizeMake((UIScreen.mainScreen().bounds.width-15)/4,120); //use height whatever you wants.
}

Step 3: Go to XIB or StoryBoard where you have your CollectionView.

Step 4: In XIB or StoryBoard where you have your CollectionView click on CollectionView.

Step 5: Go to InterfaceBuilder, then in second last tab (ie: Size Inspector) set Min Spacing

For Cells = 5

For Lines = 5

That it.

Note:

  • This solution is for if you wants to make spacing between cell = 5.
  • If your spacing is different then 5, then you need to change value 15 in delegate method.
  • Ex: Spacing between cell = 10, then change delegate 15 to 10x3 = 30

return CGSizeMake((UIScreen.mainScreen().bounds.width-30)/4,120);

  • And set Min Spacing

For Cells = 10

For Lines = 10

and vice versa.

Swift 3 Version

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = UIScreen.main.bounds.width
    return CGSize(width: (width - 10)/3, height: (width - 10)/3) // width & height are the same to make a square cell
}

For a slightly more flexible answer

Allows you to adjust number of columns and spacing, expanding on Zaid Pathan's answer

// MARK: UICollectionViewDelegateFlowLayout delegate method
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
    let cellSpacing = CGFloat(2) //Define the space between each cell
    let leftRightMargin = CGFloat(20) //If defined in Interface Builder for "Section Insets"
    let numColumns = CGFloat(3) //The total number of columns you want

    let totalCellSpace = cellSpacing * (numColumns - 1)
    let screenWidth = UIScreen.mainScreen().bounds.width
    let width = (screenWidth - leftRightMargin - totalCellSpace) / numColumns
    let height = CGFloat(110) //whatever height you want

    return CGSizeMake(width, height);
}

I wanted 3 item in a section in Both IPad and iPhone. I worked out using the following code. Hope it helps!

  1. Implement UICollectionViewDelegateFlowLayout delegate

  2. Add this code

     var device = UIDevice.currentDevice().model
    
     func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
     {
         if (device == "iPad" || device == "iPad Simulator")
         {
             return CGSizeMake((UIScreen.mainScreen().bounds.width-15)/3,230)
         }
         return CGSizeMake((UIScreen.mainScreen().bounds.width-10)/3,120)
     }
    

`