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.