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!
Implement UICollectionViewDelegateFlowLayout delegate
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) }
`