Uicollectionview in 2 columns

Question

Fellas, I got a IUCollectionView that this presenting of the data in 3 columns, as I could do to show only 2 with a centralized image?

Answer 1

So that the UICollectionView present the cells as expected, you have two options:

1. Increase your cell size; or
2. 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);