Expanded UITableViewCell according to UILabel size

Question

I have a UITableView with 4 UILabel's: Title, Body, Author and Date, he looks like this:

What I want to accomplish is, when user click on the cell itself, another label should be added to the cell, the "Body" label and the cell should expand according to this label size.

Something like this:

How can I do that? I've searched stackoverflow, tried some code pieces, but still didn't found the right solution.

Thanks!

Edit 1: 14.11.12 at 14:52

I managed to change the size of the UILabel with the current text:

- (CGRect )resizeLabelByFontSize:(UILabel *)customCellLabel withMaxHeightSize:(CGFloat )maxHeight
{
    CGSize maximumLabelSize = CGSizeMake(239, maxHeight);

    CGSize expectedLabelSize = [customCellLabel.text sizeWithFont:customCellLabel.font constrainedToSize:maximumLabelSize lineBreakMode:customCellLabel.lineBreakMode];

    //adjust the label the the new height.
    CGRect newFrame = customCellLabel.frame;
    newFrame.size.height = expectedLabelSize.height;

    return newFrame;
}

But how can I change the size of the cell according to the size of the new UILabel?

Answer 1

So, in order to do this, using expended UITableViewCell, i've created 2 different custom cells, at start the table is showing the first cell, when I click on the cell, the table is showing the second one. Its that easy - yeah!

So I have the UIViewController with the UITableView that implements the table delegate methods:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{    
    if([self.selectedCellIndexPath isEqual:indexPath])
    {
        return [self expandedCellHeight:indexPath];
    }
    else
    {
        return kRegularCellHeight;
    }
}

-(CGFloat)expandedCellHeight:(NSIndexPath *)indexPath
{
    CGSize maxSize = CGSizeMake(303, 200);
    NSString* bodyText  = [[self.data objectAtIndex:indexPath.row] objectForKey:kForumMessagesBody];
    CGSize fitSize = [bodyText sizeWithFont:[UIFont systemFontOfSize:13] constrainedToSize:maxSize lineBreakMode:UILineBreakModeWordWrap];

    CGFloat height = 384 - 69 + fitSize.height;
    NSLog(@"expandedHeight: %f",height);
    return height;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Answer cell
    if ([self.selectedCellIndexPath isEqual:indexPath])
    {
        cell = [tableView dequeueReusableCellWithIdentifier:[ForumCell expandedAnswerReuseIdentifier]];
        if (cell == nil)
        {
            cell = [ForumCell expandedAnswerCell];
        }
        self.expandedCell = cell;

    }
    else
    {
        cell = [tableView dequeueReusableCellWithIdentifier:[ForumCell reqularAnswerReuseIdentifier]];
        if (cell == nil)
        {
            cell = [ForumCell regularAnswerCell];
        }
    }

    cell.labelMedia.text = [self.data objectAtIndex:indexPath.row];

    return cell;
}

I also have custom cell, the class called ForumCell.h and ForumCell.m and it has 2 different XIB files: ForumRegularAnswerCell.xib and ForumExpandedAnswerCell.xib, I have the following code inside ForumCell.h:

+ (NSString*)reqularAnswerReuseIdentifier
{
    return @"RegularAnswerCellReuseIdentifier";
}

+ (NSString*)expandedAnswerReuseIdentifier
{
    return @"ExpandedAnswerCellReuseIdentifier";
}

+ (ForumCell*)regularAnswerCell
{
    NSArray* objs = [[NSBundle mainBundle] loadNibNamed:@"ForumRegularAnswerCell" owner:self options:nil];
    ForumCell* result = [objs objectAtIndex:0];

    return result;
}

+ (ForumCell*)expandedAnswerCell
{
    NSArray* objs = [[NSBundle mainBundle] loadNibNamed:@"ForumExpandedAnswerCell" owner:self options:nil];
    ForumCell* result = [objs objectAtIndex:0];

    return result;
}

- (id)initWithCoder:(NSCoder *)decoder
{
    self = [super initWithCoder:decoder];
    if (self)
    {
        _originalCellHeight = self.frame.size.height;
        _originalLblBodyHeight = self.lblBody.frame.size.height;
    }
    return self;
}

You can also use more than 2 xibs if you'd like its up to you. but this is the basics.

Enjoy!

Answer 2

By seeing Images in Question

Here is the method which just create the Dynamic FRAME for UILabel have a look at this By getting the Height and Width for UIlabel you can calculate the Whole height and could set the Row Height of UITableView.

- (void)setLabeltextWithVerticalAlignTop:(NSString *)theText
{
CGSize labelSize;
// here  labelSize is hard-wired but could use constants to populate the size

labelSize = CGSizeMake(210, 129);//this is just for example
//now create the Size from textString SO that We  could assign this size to the Label.

 CGSize theStringSize = [theText sizeWithFont:lblTitle.font  constrainedToSize:labelSize lineBreakMode:lblTitle.lineBreakMode];
 lblTitle.frame = CGRectMake(lblTitle.frame.origin.x, lblTitle.frame.origin.y, theStringSize.width, theStringSize.height);
 lblTitle.text = theText;

}

Call Above Method For setting the height and Width of description Label you need to pass the text to be shown on that description label. As you gets the height for that Label, Now On the Basis of this You can Adjust the heigh of Row of TableView.

EDIT:Above Code Just Create the Dynamic Frame For The UILabel

You should take a view of this this is what you looking for....!!!.here you would find a sample code too.

EDIT:As you edited your Question see ,it just the logic which you need to convert it into runnable code here it is.

Use Below Method in Your Code called for each row, and make some calculation inside it.

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat rowHeight=0.0;
//here it seems cell have 4 subview added on it.
//so if you could calculate the totla hieht of them.

//so what you really need to do.you just use hieght calculative Method for getting hieght of each of three UILabel
//you need to modify  `setLabeltextWithVerticalAlignTop` method .
rowHeight=   [self setLabeltextWithVerticalAlignTop:@"pass the correspondingText"];// suppose it returns some hieght for FisrtLabel.

//suppoose here you get the 20.0 height here

rowHeight= rowHeight+[self setLabeltextWithVerticalAlignTop:@"pass the correspondingText"];
 

// suppose it returns some hieght for secondUIlabel.

//suppoose here you get the 40.0 height here

rowHeight=  rowHeight+ [self setLabeltextWithVerticalAlignTop:@"pass the correspondingText"];

 // suppose it returns some hieght for ThirdUIlabel.
// suppoose here you get the 15.0 height here
//here you have totla height you just need to add some gapping floating value for all of three UIlabel.so that the could not overlap like as.

 rowHeight= rowHeight+20.0;

  //now you can return that total height
  return rowHeight;
 }

Note:This is just logic you need to convert it into runnable code.i am sure this can help.

I hope it may help you.

Answer 3

NSIndexPath *selectedRow;

 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
selectedRow = indexPath;
}


 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
 if(indexPath == selectedRow){
    //return your custom value
}
return 100;

}

I think it will look something like that

Answer 4

Ok, firstly... To expand you need something like this:

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

Now here is the catch:

• You should calculate the size of the UITableViewCell (expanded and non-expanded)
• Doing so when you are actually scrolling might be expensive and will give you a bad experience

My advice:

• Calculate both sides, before you have actually conclude to build the UITableView, since you want to have dynamic sizes. If you don't and all cells will have the same size expanded, you can use what lammmert said.

Answer 5

You can use tableView:didSelectRowAtIndexPath

In that method you can then create your code to unhide the body label, adjust the relative positions of everything else. Calculate the new height of the row and then call the Table View's reloadRowsAtIndexPath: withRowAnimation: method.

Sorry if there's not a lot of detail in that, but hopefully that should get you on the right track.

Answer 6

Implement the following methods

– (void) tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath
{
    UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];

    // cast cell, add label, expand labels etc

    [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [indexPath isEqualTo:[tableView indexPathForSelectedRow]] ? /* expanded height */ : 80 /* normal height */;
}

If you want the row to stay selected even after another row is selected then add a custom BOOL property to your custom cell, e.g. expanded, and use that to determine the height.