How to make UITableViewCell have variable height

You have seen variable height UITableViewCell in iPhone applications like Twinkle, App Store. These applications have a UITableView as main part of UI, each cell in the table has a variable height according to text amount it holds.

So how to implement this in your own iPhone application?

After you created a UITableView, you will need to set a delegate and a datasource. There is a UITableViewDelegate method to tell UITableView how tall a cell would be:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

So if you want UITableViewCell to have variable height like Twinkle, you’ll need to calculate the height of text block and return the result in method I mentioned above.

There are four NSString addition methods can do the calculations:

- (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size
- (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size lineBreakMode:(UILineBreakMode)lineBreakMode
- (CGSize)sizeWithFont:(UIFont *)font forWidth:(CGFloat)width lineBreakMode:(UILineBreakMode)lineBreakMode
- (CGSize)sizeWithFont:(UIFont *)font minFontSize:(CGFloat)minFontSize actualFontSize:(CGFloat *)actualFontSize forWidth:(CGFloat)width lineBreakMode:(UILineBreakMode)lineBreakMode

To calculate the exact height of a text block, you’ll need to specify a large CGSize and those methods will return you exact size, here’s an example:

struct CGSize size;
size = [aString sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:CGSizeMake(300.0, 4000) lineBreakMode:UILineBreakModeCharacterWrap];

Then you can get the height by accessing size.height.

As you’ve seen, UITableView in iPhone cannot generate dynamic height automatically, you’ll need to calculate the height yourself before you set the delegate. This is quite different if you’re coming from a HTML world.

If you’ve found a better way to implement this, please share with us in comments. Thanks.

p.s. Don’t forget to have some padding around text. And what’s why I use 300 as width in CGSizeMake, there are 10 pixels for padding in left and right side of text.