[Request] Self-sizing (auto layout) cells for Pinterest layout

[colejd]

Hello!

I noticed in the Pinterest layout that a delegate method is called to ask the cells how tall they should be based on their content. Is there a way to work with cells that self-size using Auto Layout? This would be really useful for cells that have dynamically sized content like text.

[eleev]

Hello,

That is a good question!

In order to answer it, we need to take a look at how self-sizing cells work for UICollectionView. In WWDC 2016 video session 219 : What’s New in UICollectionView in iOS 10 Apple says that there are 3 options for self-sizing cells, one of them is what you mentioned (using Auto Layout).

For instance, in cases when we have UILabel that may have undefined number of lines and font size, we obviously don't know the size of a cell in advance. We need to calculate it. This means that the intrinsicContentSize of a multiline UILabel cannot be determined from its content alone, as well as cell's size, since it depends on intrinsicContentSize. In order to solve such an issue, we need to either define width or height. Usually, we define width, so the height can grow and be determined at runtime. That is why in Pinterest layout implementation the delegate method returns the height, which allows the cell to be auto-sized based on run-time requirements.

In cases when we have completely dynamic content and don't know anything ahead of time, we need to implement callbacks that will check for content as soon as it's available during the run-time and delegate the heights to the layout. Then, sum up the heights in prepare method, so the final cell's height can be calculated correctly and everything can fit. That is a solution №1. In some cases it's preferable, but the other cases it's hard to properly implement.

Another solution (№2) for dynamic text is to get rid of any predefined heights (as it's done in the Pinterest layout), then remove UIStackView (I'm not saying that it's a must, just for this case) and add missing vertical and horizontal constraints, relative to the UIImage and the neighbour UILabel components. Then call sizeToFit in awakeFromNib so the size of the UILabel can be adjusted accordingly when the contents have changed. Here is the example of Pinterest layout but with dynamic and multiline text :

Font sizes have grown and can be dynamically changed, if you compare this screen shoot with the previous one that has completely different font size:

I hope, I did understand you right and it will help you! 😉

[colejd]

This was extremely helpful. Thank you!

[eleev]

Sure! You are welcome, glad to help 👍

[maulikshah09]

your images is static can you help me for download image from server..When i download image from server than it is look like this https://i.stack.imgur.com/wErOM.png

Image content mode = .aspectFit

I want download image from server and then it set according to aspect ratio. is it possible?

[eleev]

What you mean is that the images are in app's bundle, rather than in a remote server (by referring to it as static). However, having images in a remove server has nothing to do with layouts, since those are two completely different tasks.
You need to figure our how to download images, cache them, prepare low-res previews and wire then up with a collection view instance (and make everything asynchronous). You may have different layouts and my previous message fully explains how to achieve self-sizing in UICollectionView. Please, read it thoroughly and check out the WWDC sessions.