Wrapping text in a UITableView in iOS

Question

I want to wrap the text of cells in a UITableView. I am using the following code, but the cell alignment is no longer suitable, how can I change the cell height dynamically? I noticed that there is a built-in method - (CGFloat) cellHeightForRow in the tableView delegate, but I can take the text and set the height dynamically, since I have variable-length text in my JSON data.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease]; } [cell.textLabel sizeToFit]; cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: @"UITableViewCell"] autorelease]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; cell.textLabel.lineBreakMode = UILineBreakModeWordWrap; NSDictionary *person = [myPeople objectAtIndex:[indexPath row]]; NSString *name = [person valueForKey:@"name"]; cell.detailTextLabel.text = [person valueForKey:@"time"]; return cell; } 

This is what I have tried so far:

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { NSDictionary *person = [myPeople objectAtIndex:[indexPath row]]; NSString *cellText =[person valueForKey:@"text"]; UIFont *cellFont = [UIFont fontWithName:@"Helvetica-neuve" size:21.0]; CGSize constraintSize = CGSizeMake(280.0f, MAXFLOAT); CGSize labelSize = [cellText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:UILineBreakModeWordWrap]; int buffer = 10; return labelSize.height + buffer; } // Customize the appearance of table view cells. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [commentView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease]; cell.textLabel.lineBreakMode = UILineBreakModeWordWrap; cell.textLabel.numberOfLines = 6; cell.textLabel.font = [UIFont fontWithName:@"Helvetica-neuve" size:21.0]; [cell.textLabel setMinimumFontSize:13.0]; [cell.textLabel setAdjustsFontSizeToFitWidth:NO]; } NSDictionary *person = [myPeople objectAtIndex:[indexPath row]]; NSString *personName = [person valueForKey:@"text"]; cell.textLabel.text = personName; // cell.detailTextLabel.text = [person valueForKey:@"date"]; return cell; } 

The output still looks too lumpy and tight

Answer 1

Inside your function cellForRowAtIndexPath :. The first time you create your cell:

 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease]; cell.textLabel.lineBreakMode = UILineBreakModeWordWrap; cell.textLabel.numberOfLines = 0; cell.textLabel.font = [UIFont fontWithName:@"HelveticaNeue" size:21.0]; } 

You will notice that I also set the number of lines for the label to 0. This allows you to use as many lines as needed.

You also need to indicate how large your UITableViewCell , so do this in your heightForRowAtIndexPath function:

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { NSString *cellText = @"some text which is part of cell display"; UIFont *cellFont = [UIFont fontWithName:@"HelveticaNeue" size:21.0]; CGSize constraintSize = CGSizeMake(280.0f, MAXFLOAT); CGSize labelSize = [cellText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:UILineBreakModeWordWrap]; int buffer = 10; return labelSize.height + buffer; } 

I added an extra 10 to my cell height because I like the small buffer around my text.

UPDATE: If the result looks too tight and clumpsy, then do it -

 [cell.textLabel setMinimumFontSize:13.0]; [cell.textLabel setAdjustsFontSizeToFitWidth:NO]; 

This should solve your problem.

Answer 2

To change the height of your cell, you need to change its frame in cellForRowAtInexPath and make sure the label has the correct auto-sizing flags.