Dynamic UITableViewCell in iOS

Different UITableViewCell sizes illustration using books.

As iOS developers, it is a common practice to put your list of data in the cells within the UITableView, but one problem always come up to mind for beginners when it comes to implement the UITableView to populate their data :

“ How if the content length of my data varies? how could i make the size of the UITableViewCell to become dynamic as it could fill my content entirely? “

Because the UITableViewCell itself is a subclass of UIView, which mean it does not have its own intrinsic content size, so we have to define the height of the cell, you could be using UITableViewDelegate or just set the height in the interface builder, but what value should we put in order to make the UITableViewCell’s height dynamic?

If you search the internet, stack overflow, or any places regarding on how to make the dynamic cells, the answer might be these two lines:

self.tableView.estimatedRowHeight = 250
self.tableView.rowHeight = UITableView.automaticDimension

So, according to the internet, we only need to put these 2 lines, seems easy huh? But things may have not going accordingly, the UITableViewCells could get clipped or displaying the wrong size, what happen?!

The truth is, these two lines are already right, we do need to put the value automaticDimension to the row height of the table and not hardcode-ing any value which can result of your cell have a static height of the value you put in, but keep in mind that putting those two are not enough.

We also need to set the right constraint in our cell so that the AutoLayout Engine could automatically calculate the height / width of our cell.

For example, if i want to have have a dynamic height of my cell :

UITableViewCell

I need to set the value of A, C, and E, for example i could set the distance from NasiGoreng UILabel to its superview to get A, to the Rp.99999 UILabel to get C, and so forth, so that the cell knows the distance between each component in my cell from top to bottom thus it could calculate the height automatically, the B and D value is automatically generated by UILabel since it has intrinsic content size, which means it could calculate the dimension of the content using its font type and size. Another thing that should be noted is do not set the height constraint of the UILabel, because it can cause clipping if the text is longer than the height you specified in the constraint, let the UILabel does its job.

so the AutoLayout Engine is able to determine my cell height by calculating A + B + C + D + E

If you have UIImageView in your UITableViewCell, you have to first set the image for the UIImageView so that it could gain intrinsic content size just like the previous UILabel case.

Conclusion

You could make your UITableViewCell has dynamic width and/or height by specifying:

1. Set the estimated row height ( could be any value you want, or the average cell height after displaying your content ).
2. Set the row height value to UITableview.automaticDimension.
3. Do the constraint of the cell properly so that it could resize by itself.

Happy Coding :)