Clever Geek Handbook

How do I auto-detect an ImageView inside a CollectionView so that the cell to the edge has the same spacing as the spacing between the inner cells?

I created a UIImageView inside a CollectionViewCell. I wanted the layout to have the same spacing between the left side of the cell and the left edge as the spacing between the inner cell and the same distance for the right side of the cell on the right edge of the screen. The current layout I have is as follows:

this image below


In the image above the left edge to the left, most of the cell has a 10-point spacing, and the spacing between the inner cells is doubled. This is because I have a UIImageView with 10 points less in 4 directions (up, down, left, right) versus a CollectionViewCell.


I've spent significant time on this issue, including searching StackOverflow, but can't seem to find an answer.


I have no problem creating the N

number of cells per row by this post
and also I have been playing around with the spacing between cells according to this post

+3


source to share


1 answer


I managed to find a solution to this problem.

I did the following:

  • Delete all inner spaces between UIImageView

    and CollectionViewCell

    . Then remove any offset and match the size. Put a 0 limit on all 4 directions.

  • Use the second link mentioned above as a template. I updated my ViewController with the following content:

    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 am setting a value Constant.hardcodedPadding

, eg.CGFloat(30.0)

Thus, I get the following view: the same distance between inner and outer

+2


source






More articles:


All Articles