UICollectionViewDelegateFlowLayout Edge Insets not getting recognized by sizeForItemAt function? - ios

Question

So as the title suggest, I seem to have run into a weird problem. All I am trying to do here is create a 2 column collectionview without hardcoding anything into my delegate methods. Upon debugging I found that insetForSectionAt is called after sizeForItemAt, hence the custom insets are not taken into consideration when calculating the size of every cell.
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let flowLayout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
print("left: ", flowLayout.sectionInset.left) // Prints out 0.0
print("right: ", flowLayout.sectionInset.right) // Prints out 0.0
let marginsAndInsets = flowLayout.sectionInset.left + flowLayout.sectionInset.right + flowLayout.minimumInteritemSpacing * (cellsPerRow - 1)
let itemWidth = (collectionView.bounds.size.width - marginsAndInsets) / cellsPerRow
return CGSize(width: itemWidth, height: itemWidth)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}
}
This problem can be solved very uglily by hard coding the values directly into the itemWidth variable as such, -20 because i know the values of left and right insets, 10 + 10
let itemWidth = (collectionView.bounds.size.width - marginsAndInsets - 20) / cellsPerRow
however, I have to believe that there is a better way of doing this, how can I call reloadData upon completion of the UIEdgeInset calculation so that my cells are properly sized?

Answer 1

So this is what I ended up doing, i just added the customizations directly when creating the sizes for the collectionView and its cells.
class PinController: UICollectionViewController {
fileprivate let pinCellId = "pinCellId"
fileprivate let cellsPerRow: CGFloat = 2.0
fileprivate let margin: CGFloat = 10.0
fileprivate let topMargin: CGFloat = 2.0
}
extension PinController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let flowLayout = customize(collectionViewLayout, margin: margin)
let itemWidth = cellWidth(collectionView, layout: flowLayout, cellsPerRow: cellsPerRow)
return CGSize(width: itemWidth, height: itemWidth * 1.1)
}
/*
Customizes the layout of a collectionView with space to the left and right of each cell that is
specified with the parameter margin
*/
private func customize(_ collectionViewLayout: UICollectionViewLayout, margin: CGFloat) -> UICollectionViewFlowLayout {
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
// Interitem spacing affects the horrizontal spacing between cells
flowLayout.minimumInteritemSpacing = margin
// Line spacing affects the vertical space between cells
flowLayout.minimumLineSpacing = margin
// Section insets affect the entire container for the collectionView cells
flowLayout.sectionInset = UIEdgeInsets(top: topMargin, left: margin, bottom: 0, right: margin)
return flowLayout
}
/*
Calculates the proper size of an individual cell with the specified number of cells in a row desired,
along with the layout of the collectionView
*/
private func cellWidth(_ collectionView: UICollectionView, layout flowLayout: UICollectionViewFlowLayout, cellsPerRow: CGFloat) -> CGFloat {
// Calculate the ammount of "horizontal space" that will be needed in a row
let marginsAndInsets = flowLayout.sectionInset.left + flowLayout.sectionInset.right + flowLayout.minimumInteritemSpacing * (cellsPerRow - 1)
let itemWidth = (collectionView.bounds.size.width - marginsAndInsets) / cellsPerRow
return itemWidth
}
}