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.