How to autolayout ImageView inside CollectionView so that cell to edge has same spacing as inner cells spacing?

Question

I created UIImageView inside CollectionViewCell. I wanted for the layout to have the same spacing between the left most cell to left edge as spacing between inner cell, and same spacing for right most cell to the right edge of the screen. The current layout I have is like this:

In the image above the left edge to left most cell has 10 points spacing while the inner cells spacing is twice of that. That is because I have the UIImageView with 10points smaller in all 4 directions (up,down,left,right) against the CollectionViewCell.

I have spend significant time on this issue including searching StackOverflow but can't seems to find the answer.

I have no issue to create N number of cells in a row as per this posting
and I've also played with the cell spacing as per this posting

Check this great tutorial to create your own custom layout https://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest — iamirzhan, Jun 14 '17 at 07:37

score 2 · Answer 1 · answered Jun 15 '17 at 02:37

I managed to find the solution to the above problem.

I did the following:

Remove all inner spacing between UIImageView and the CollectionViewCell. Then remove any offset and make the size match. Put constraint of 0 on all 4 directions.

Use the second reference mentioned above as template. I updated my ViewController with following contents:

extension ToDoCategoryViewController: UICollectionViewDelegateFlowLayout {

fileprivate var sectionInsets: UIEdgeInsets {
    return UIEdgeInsetsMake(0, Constant.hardCodedPadding, 0, Constant.hardCodedPadding)
}

fileprivate var innerSpacing: CGFloat { return Constant.hardCodedPadding }
fileprivate var rowSpacing: CGFloat { return Constant.hardCodedPadding }

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    var itemPerRow: CGFloat {
        switch collectionView.bounds.width {
        case 300..<500:
            return 3
        case 500..<800:
            return 4
        default:
            return 5
        }
    }

    let innerSpacingCount = itemPerRow - 1
    let edgesPadding = Constant.hardCodedPadding * 2.0
    let itemWidth = (collectionView.bounds.width - (innerSpacing * innerSpacingCount + edgesPadding)) / itemPerRow
    let itemHeight = itemWidth * CGFloat(1.25)
    return CGSize(width: itemWidth, height: itemHeight)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return sectionInsets
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return rowSpacing
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return innerSpacing
}

}

In my code elsewhere, I set the Constant.hardcodedPadding value, e.g. CGFloat(30.0)

Thus, I get the following view:

How to autolayout ImageView inside CollectionView so that cell to edge has same spacing as inner cells spacing?

1 Answers1