CODEWITHSUNDEEP
iosios4uitableview
conorgriffin
conorgriffin

Reputation: 4339

How do I create a multiline table cell in iOS?

How can I get the second cell to expand to fit the text rather than scaling the text? Is there a built in way of doing this in iOS or will I have to come up with some home-cooked solution? If you look in the iOS Contacts application, there's a box like this for Address. I can't find how to implement this though.

Table screenshot

For anyone looking to achieve this in future, here's the code for my solution:

HEADER file:

#define FONT_SIZE 22.0f
#define CELL_CONTENT_WIDTH 320.0f
#define CELL_CONTENT_MARGIN 5.0f

IMPLEMENTATION file: 

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

    if (indexPath.section == 0 && indexPath.row == 1) {

        NSString *text = [atmAnnotation address];

        CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);

        CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
        NSLog(@"Size for address is Height:%f Width:%f",size.height,size.width);

        CGFloat height = MAX(size.height, 44.0f);

        return height + (CELL_CONTENT_MARGIN * 2);  

    }
    return 44.0f;
}

Here's a screenshot of the result:

UITableView fixed

Upvotes: 8

Views: 5905

Answers (4)

Chris Vasselli
Chris Vasselli

Reputation: 13334

I just ran into this same problem. I found an alternative solution that doesn't require quite as much hardcoding, and allows you to make modifications to the label in Interface Builder that will be reflected in the height calculation.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
     if (indexPath.section == 0 && indexPath.row == 1) {
        NSString *text = [atmAnnotation address];
        UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:@"MyIdentifier"];

        cell.textLabel.text = text;
        [cell.textLabel sizeToFit];

        CGFloat height = MAX( 44, cell.textLabel.bounds.size.height );

        return height + CELL_CONTENT_MARGIN * 2;
    }

    return 44.0f;
}

The only downside is that this will cause some additional temporary UITableViewCell allocations, but the table view will immediately reclaim them, so I don't think it should be a big problem.

Upvotes: 0

CIFilter
CIFilter

Reputation: 8677

Unfortunately, you are going to have to implement this feature yourself. There are a variety of methods and callbacks you need to make use of to calculate the height of the rows and labels. If you need some help getting started, I can amend this answer to include some sample code. Otherwise, I'm sure there are some related questions here on SO or Google that can get you started. In summary, however:

  • Determine the height of the row in the UITableViewDelegate method -tableView:heightForRowAtIndexPath:. You'll probably need to use the NSString UIKit Addition methods to calculate how tall your string will be with a given font size, etc. Return the proper height from this delegate method.
  • Make sure your label (either in IB or configured programmatically) is set to use multiple lines. If you set numberOfLines to 0, the label will use as many lines as necessary.
  • In your UITableViewDataSource implementation of -tableView:cellForRowAtIndexPath:, you'll need to use the same logic as before to determine the frame of your labels. Set the text you want, then change the frame so that the label is tall enough to just barely fit all the text.

Upvotes: 5

Paul Bentley
Paul Bentley

Reputation: 343

Implement:

- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;

in your table delegate. For the different row and section in the passed indexPath, return a different height to fit your label.

Ensure 'adjust to fit' for the label in IB is not ticked (property adjustsFontSizeToFitWidth if done using code).

Upvotes: 1

WrightsCS
WrightsCS

Reputation: 50697

Where you have the address as the detailTextLabel, use a UILabel thats supports as many lines as you need, for an address, 3 should be enough. Together with Paul Bently's answer, you should be good to go.

Upvotes: 1

Related Questions