Life & Technology

Handful lessons in different areas of technology and life in general.

Implementing dynamic UITableViewCell height on UITableView

If you’ve used Twitter iOS application, then most probably you will notice that content streams differ in sizes based on the length of each tweets. And if we are implementing such as this in simplest way of doing this, we could be using UITableView’s heightForRowAtIndexPath delegate method and get/set the size of each string on the array:

For demonstrating this behavior, we’ll be creating a simple View based project that needs an NSMutableArray and a UITableView:

@interface TableTestViewController : UIViewController<UITableViewDelegate, UITableViewDataSource> {
    NSMutableArray *_quotes;
    UITableView *_tableView;
}    
@end

And setting up our _tableView and adding some test data with varying length of characters:

- (void)viewDidLoad
{
    [super viewDidLoad];
    _quotes = [[NSMutableArray alloc] initWithObjects: 
               @"I do the very best I know how-the very best I can; and I mean to keep doing so until the end. If the end brings me out all right, what is said against me won't amount to anything. If the end brings me out wrong, ten angels swearing I was right would make no difference.", 
               @"Be systematically heroic in little unnecessary points, do every day or two something for no other reason than its difficulty, so that, when the hour of need draws nigh, it may find you not unnerved or untrained to stand the test.", 
               @"The trick of it, she told herself, is to be courageous and bold and make a difference. Not change the world exactly, just the bit around you. Go out there with your double-first, your passion and your new Smith Corona electric typewriter and work hard at ... something. Change lives through art maybe. Write beautifully. Cherish your friends, stay true to your principles, live passionately and fully well. Experience new things. Love and be loved if at all possible. Eat sensibly. Stuff like that.", 
               @"I know of no more encouraging fact than the unquestioned ability of a man to elevate his life by conscious endeavor.", nil];
    
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 460) style:UITableViewStylePlain];
    _tableView.dataSource = self;
    _tableView.delegate = self;        

    [self.view addSubview: _tableView];
}

Our _tableView is set up to be the same UIWindow height less the size of Status bar (480 – 20). And setting the current view implements its delegate. Then, add our _tableView as a subview to our main view.

Let’s implement _tableView’s delegate and dataSource:

#pragma mark - UITableViewDataSource methods

- (NSInteger)tableView:(UITableView *)table numberOfRowsInSection:(NSInteger)section {
    return [_quotes count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString* reuseIdentifier = @"Cell";
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    
    if (nil == cell) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier] autorelease];
        cell.textLabel.font = [UIFont systemFontOfSize:14];
        cell.textLabel.numberOfLines = 0;
    }
    
    cell.textLabel.text = [_quotes objectAtIndex:indexPath.row];
    return cell;
}
@end

Code above is pretty standard code for Table-view based application. The interesting code to notice is the numberOfLines = 0, this tells us that cell will contain a multi-line string with unknown size. If we forgot to set this property to 0, the default value of 1 will be in effect causing our text to display and truncated in a single line.

#pragma mark - UITableViewDelegate methods

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGSize size = [[_quotes objectAtIndex:indexPath.row] 
                   sizeWithFont:[UIFont systemFontOfSize:14] 
                   constrainedToSize:CGSizeMake(300, CGFLOAT_MAX)];
    return size.height + 10;
}

In order to achieve our dynamic height nature of our cells, heightForRowAtIndexPath will do the trick. So for each cell iteration, it also gets the size of the string including its font size to the count. The constrainedToSize parameter is the maximum acceptable size of the string. We set the height to be the constant max value of CGFLOAT but you can set it manually to a higher number, say 5000 or 9000. After we get the size of the current string on the cell, we added 10 more to the height for readability purpose.

A sample screen below gives us the output of the codes above:

UITableView_DynamicHeight

Quotes on the sample are taken at Quotations Page.

Advertisements

3 responses to “Implementing dynamic UITableViewCell height on UITableView

  1. Alan Ihre March 13, 2012 at 2:38 am

    Thank you very much! You saved my day!

  2. Jillian January 9, 2013 at 3:23 am

    Thank you! Best tutorial on this I’ve found so far.

  3. Oscar May 5, 2013 at 1:39 am

    Like a boss!! Really the best tutorial ever ever…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: