Adjust Table View Cell height to image's height with Auto Layout

Question

I created a xib file for a custom cell containing a Label and a Image View. The Image View width is fixed, but the height is suppose to adjust to the size of the downloaded image.

Moreover, the cell height should adjust to maintain the margin it has with the image view.

As I read several articles about auto layout, I'm not quite sure I know what I am doing so here it is: (if any of this is wrong, point out the right way)

1. In order to maintain the margin between the image view and the cell I should create a constraint.

2. The previous is done by selecting both image view and cell, then going to Editor -> Pin -> bottom space to superview since I want to maintain the bottom margin the image view has to the cell (and the cell is the container)

3. Until now, supposedly, if I resize the Image View height, the cell will auto-resize it's own height to maintain the margin it has before resizing.

4. In order to make the Image View height adjust to the Image I need a constraint with .... (?)

Already read this articles and indeed they explain very well how can it be used but not specifics:

• http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1

Also read this question but it doesn't says anything about auto layout at all - Change UIImageView size to match image with AutoLayout

Edit: using iOS 7

Answer 1

Here are the main issues with what you are trying to do:

1) Your tableView needs to know the exact height of the cells. If constraints could go from an UIImage and not from a UIImageView, the cell's height would change. Fortunately, UIView's don't change their own height by themselves with autolayout.

2) To get the height of the UITableViewCell, you're going to need the height of that image first. Bummer.

So here are a couple of solutions:

1) In your class, keep a dictionary of indexPaths to cellHeights. Check this when determining tableView:heightForRowAtIndexPath:. If empty, return a static height.

When the cells get configured, they can request their image in the background. When you set the image, get its size (just using UIImage's size property) and set the tableViewController's dictionary using the indexPath of that cell as the key, and the height of your padding above/below the imageView, plus the height of the image. Tell the tableView to reload that cell, or do the 'ol [self.tableView beginUpdates]; [self.tableView endUpdates]; trick.

2) Request all of the images in your ViewController returning 0 rows for your data source. When they are all fetched, reload your table view after getting the data ready for your dataSource (particularly the cell heights).

Mastering autolayout+UITableView's takes some time. Generally, the most difficult part is determining the height of the cell without having the actual cell. Depending on what factors can adjust the height of the cell, it can be easier to keep a 'template' cell in the viewController to reconfigure over and over with content each time you need to determine height, or use knowledge about the cell's layout that you would only know having built it. It sounds like the latter would be easiest in this case, hence my recommendation for how to determine the height for solution 1.

Answer 2

It's a pain prior to iOS 8. Your table view delegate has to implement the method -tableView:heightForRowAtIndexPath: to determine the height for each cell. Thankfully, this has changed in iOS 8 and a cell can determine its own size.