1
So that the UICollectionView
present the cells as expected, you have two options:
- Increase your cell size; or
- Increase the spaces between your cells and the edges.
1) Increase your cell size
In this case, you can simply change the size of the cell in the UIStoryboard
(easiest/fastest way); or explicitly state the CGSize
that you expect the cell to have implementing the method collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
(of UICollectionViewDelegateFlowLayout
)
2) Increase the spaces between your cells and the edges
In this case, you can implement the protocol methods UICollectionViewDelegateFlowLayout
related to this, as:
collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets
collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat
collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat
Hands-on
Suppose you want the cell to be 100px wide by 100px high with padding 20px between the edges and the middle. The implementation will be (more or less) like this (untested):
Swift 2
let cellDimension : CGFloat = 100
let spaceBetweenCells : CGFloat = 20
let numberOfColumns : CGFloat = 2
....
// Layout
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: cellDimension, height: cellDimension)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let width = self.view.frame.width
let expectUsedSize : CGFloat = (cellDimension * numberOfColumns) + spaceBetweenCells
let margins = (width - expectUsedSize) / numberOfColumns
return UIEdgeInsetsMake(spaceBetweenCells, margins, spaceBetweenCells, margins)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return spaceBetweenCells
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return spaceBetweenCells
}
Swift 3
// Layout
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: cellDimension, height: cellDimension)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let width = self.view.frame.width
let expectUsedSize : CGFloat = (cellDimension * numberOfColumns) + spaceBetweenCells
let margins = (width - expectUsedSize) / numberOfColumns
return UIEdgeInsetsMake(spaceBetweenCells, margins, spaceBetweenCells, margins)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return spaceBetweenCells
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return spaceBetweenCells
}
Note
In the code above I used the same space between cells (spaceBetweenCells
) to the UIEdgeInsets
cell (bottom and top). You can (obviously) change this value however you want.
Abs!
Obs.: The above implementation aims to illustrate the algorithm that calculates the right cell size for different device widths (iPhone 4s/5/5c/5s/6/6s/7/7s or iPads);
Is there any way you can post an example of the expected result? I don’t understand this part of the centralized image.
– Alexandre Lara