Kodeco Forums

Video Tutorial: Custom Collection View Layouts Part 3: Pinterest – Cell Content

Learn how to size your cells so that the image width matches the column width while the height is then adjusted to maintain the aspect ratio of the photo.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3987-custom-collection-view-layout/lessons/4

Great tutorial but I am having difficulty to get this to work when I load the images asynchronously. I first fetch a batch of 100 photo details from flickr and this forms the collection and the image in each cell is loaded asynchronously. ‘heightForPhotoAtIndexPath’ is called initially for each cell but how can I get it to happen again when the image has been fetched and I know the size?

How is it possible to bring the first or the last object of the carrousel in the middle of the screen?. With the scroll-behaviour of the Carrousel-implementation this will not come to the middle of the screen.

The next video shows you how to deal with that.

Thanks. I see it now.

I’m stock with this video tutorials, my cells are not getting aligned in center of the view while scrolling, instead they are getting offset to the left. The more I scroll, the more offset they get. I’m totally lost, and don’t know how to continue. Thanks

@skyrocketsw Can you please help with this when you get a chance? Thank you - much appreciated! :]

Hello ,

I am trying to delete a cell and I keep getting this error : “UICollectionView received layout attributes for a cell with an index path that does not exist”
could you please help me with this . I have tried so many solutions it didn’t work.

@ahmedsabir Please check out this tutorial when you get a chance:


I hope it helps!

Thanks a lot , I actually solved that problem days ago, I appreciate your effort.
I have one more problem , I am trying to implement dynamic cell sizing , and I followed and the course. Mosaic layout is great but the thing is some cell contents replicate the attributes of the previous ones some times happens with more than just one cell.
Look at this screen shot:
this is the original height for this item + the height of the bottom yellow view. No problem with this , but when I add another picture , it shrinks and the bottom yellow view takes over. the the following screen shot :

It is taking attributes of previously loaded item like the following :


I have done my search on the net, and I can say that the problem is with cache , have a look at the following code :

    override func prepare() {
        if cache.isEmpty {
            let columnWidth = width / CGFloat(numberOfColumns)
            var xOffsets = [CGFloat]()
            for column in 0..<numberOfColumns {
                xOffsets.append(CGFloat(column) * columnWidth)
            var yOffsets = [CGFloat](repeating: 0, count: numberOfColumns)
            var column = 0
            for item in 0..<collectionView!.numberOfItems(inSection: 0) {
                let indexPath = IndexPath(item: item, section: 0)
                let width = columnWidth - (cellPadding * 2)
                let imageHeight = delegate.collectionView(collectionView!, heightForImageAtIndexPath: indexPath, withWidth: width)
                let descriptionHeight = delegate.collectionView(collectionView!, heightForDescriptionAtIndexPath: indexPath, withWidth: width)
                let height = cellPadding + imageHeight + descriptionHeight + 20 + cellPadding

                let frame = CGRect(x: xOffsets[column], y: yOffsets[column], width: columnWidth, height: height)
                let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)
                let attributes = MosaicLayoutAttributes(forCellWith: indexPath)
                attributes.frame = insetFrame
                attributes.imageHeight = imageHeight
                contentHeight = max(contentHeight, frame.maxY)
                yOffsets[column] = yOffsets[column] + height
                column = column >= (numberOfColumns - 1) ? 0 : column + 1
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var layoutAttributes = [UICollectionViewLayoutAttributes]()
        for attributes in cache {
            if attributes.frame.intersects(rect) {
        return layoutAttributes

I want to know why it keeps changing when I add new item and after scrolling, and how to solve this problem .

@ahmedsabir Do you still have issues with this?

The cell sizing and scrolling are buggy. https://youtu.be/r7VJXdnmR5Q
This happens with all the starter and complete code provided in download material. I tried finding problem and it seems it is being caused due to estimate item size but couldn’t find a solution to it. Could you please help.