CODEWITHSUNDEEP
iosobjective-cxcodeuitableview
zack_falcon
zack_falcon

Reputation: 4386

Xcode 6: Label in Table Cell won't expand / display longer text upon expansion / line up with cell

The Problem:

I've got a label in a table cell as follows:

enter image description here

EDIT: While the tableview does not use AutoLayout, the xib for the cell does. This is what it looks like:

enter image description here

Now, the "..." means the review (the text) is too long to be displayed. The user can then click on the cell, which would expand the cell and the label downwards, which would then show the rest of the text.

Here's the code for the heightForRowAtIndexPath:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
{
    if (tableView == self.rateAndReviewView.ratingsTable) {
        BOOL isSelected = [self.selectedIndexPaths containsObject:indexPath];

        CGFloat maxHeight = MAXFLOAT;
        CGFloat minHeight = 40.0f;

        if (isSelected){
            CGFloat constrainHeight = isSelected?maxHeight:minHeight;
            CGFloat constrainWidth  = tableView.frame.size.width - 20.0f;
            //
            SQLReview *review = [reviewsArray objectAtIndex:indexPath.row];
            NSString *text       = review.comment;
            CGSize constrainSize = CGSizeMake(constrainWidth, constrainHeight);

            CGSize labelSize = [text sizeWithFont:[UIFont systemFontOfSize:15.0f]
                                  constrainedToSize:constrainSize
                                  lineBreakMode:NSLineBreakByWordWrapping];

            CGFloat labelHeight = labelSize.height;

            return MAX(labelHeight+20, 100.0f);
        } else {
            minHeight = 100.0f;
            return  minHeight;
        }
    }
}

And this is the code for the cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (tableView == self.rateAndReviewView.ratingsTable) {
        static NSString *CellIdentifier = @"Cell";

        VenueReviewCell *cell = (VenueReviewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

        if(cell==nil){
            cell = [[[NSBundle mainBundle] loadNibNamed:@"ReviewCell" owner:nil options:nil] objectAtIndex:0];
        }

        [cell.contentView.layer setBorderWidth:0.5f];
        cell.contentView.backgroundColor = [UIColor whiteColor];

        SQLReview *review = [reviewsArray objectAtIndex:indexPath.row];
        cell.usernameLabel.text = (review.user_name == nil) ? @"" : review.user_name;
        cell.datetimeLabel.text = (review.datetime == nil) ? @"" : [review.datetime substringToIndex:10];
        cell.commentLabel.text = (review.comment == nil) ? @"" : review.comment;
        cell.commentLabel2.text = (review.comment == nil) ? @"" : review.comment;

        float overallScore = (review.overall == nil) ? 0.0f : [review.overall floatValue];

        NSArray *overallImageViewArray = @[cell.overallStarImageView1, cell.overallStarImageView2, cell.overallStarImageView3, cell.overallStarImageView4, cell.overallStarImageView5];

        if([selectedIndexPaths containsObject:indexPath]) {
            cell.commentLabel.hidden = YES;
            cell.commentLabel2.hidden = NO;

            CGSize commentLabelComputeSize = [cell.commentLabel2.text sizeWithFont:cell.commentLabel2.font constrainedToSize:CGSizeMake(cell.commentLabel2.frame.size.width, CGFLOAT_MAX) lineBreakMode:cell.commentLabel2.lineBreakMode];

            CGFloat commentLabelHeightOffset = (commentLabelComputeSize.height - cell.commentLabel2.frame.size.height > 0) ? (commentLabelComputeSize.height - cell.commentLabel2.frame.size.height) : 0;

            cell.commentLabel2.frame = CGRectMake(cell.commentLabel2.frame.origin.x, cell.commentLabel2.frame.origin.y, cell.commentLabel2.frame.size.width, cell.commentLabel2.frame.size.height + commentLabelHeightOffset);

            cell.commentLabel2.autoresizingMask = UIViewAutoresizingFlexibleHeight;
            cell.commentLabel2.numberOfLines = 0;

        } else {
            cell.commentLabel.hidden = NO;
            cell.commentLabel2.hidden = YES;
        }

        [CommonUtilities displayStarRatingsWithScore:overallScore starImageViewArray:overallImageViewArray];

        return cell;
    }
    return nil;
}

The isSelected part from heightForRowAtIndexPath does work, and the table cell does visibly expand on tap, but the text remains the same - at least, as tested on iOS 7+ devices.

EDIT: I also logged out the values of cell.commentLabel2.frame, by adding this:

NSLog(@"VenueTabViewController: cellForRow: contains indexpath %@, size: %@", indexPath, NSStringFromCGRect(cell.commentLabel2.frame));

in both the if and else of cellForRowAtIndexPath, and it shows the following:

On first tap:
VenueTabViewController: cellForRow: contains indexpath {length = 2, path = 0 - 1}, size: {{20, 31}, {285, 60.579999999999998}}

On second tap:
VenueTabViewController: cellForRow: contains indexpath {length = 2, path = 0 - 2}, size: {{20, 31}, {285, 21}}

So it does change in size.

What I tried:

I googled this, and found out that [string sizeWithFont:[UIFont systemFontOfSize:15.0f] constrainedToSize:constrainSize lineBreakMode:NSLineBreakByWordWrapping]; has been depreciated. So instead, I replaced the lines relating to it above with:

CGSize labelSize = [text sizeWithAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:17.0f]}]; 
CGFloat labelHeight = ceilf(labelSize.height);

Which not only failed to work, it also stopped the cell from expanding, which I thought might be a step backwards.

I also tried adding the following, because why not: 

VenueReviewCell *cell = (VenueReviewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if(cell==nil){
    cell = [[[NSBundle mainBundle] loadNibNamed:@"ReviewCell" owner:nil options:nil] objectAtIndex:0];
}

[cell.commentLabel sizeToFit];

But it's still a nope.

Then, I simply replaced commentLabelHeightOffset with 100, just to test if anything will change:

cell.commentLabel2.frame = CGRectMake(cell.commentLabel2.frame.origin.x, cell.commentLabel2.frame.origin.y, cell.commentLabel2.frame.size.width, cell.commentLabel2.frame.size.height + commentLabelHeightOffset);

Nothing happened.

EDIT: Here's what I did that finally gained traction - I removed the AutoLayout on the cells, as per the suggestion of saif. And now, while the cells do expand, and the labels along with it, for some reason I get this:

enter image description here

I checked the code, and the X and Y of the label frame aren't changed (just the frame height) and the text has no "new lines" before the actual text.

Can I have some help please?

Upvotes: 1

Views: 1063

Answers (4)

Cornell Skyers
Cornell Skyers

Reputation: 96

If you want to continue using autolayout:

-set the numberOfLines to '0'

-Implement the following two TableView methods

-(CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return UITableViewAutomaticDimension;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return UITableViewAutomaticDimension;
}

Working with Self-Sizing Table View Cells Here is a useful reference.

Upvotes: 0

Saif
Saif

Reputation: 2968

Try this, Set the frame to desc label in cell for row(depending on text size), and reload the table view when you want to expand the cell.

In cellForRowAtIndexPath

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID forIndexPath:indexPath];
if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    //code to add desc label
}

CGSize suggestedSize = [descriptionText sizeWithFont:descLabel.font constrainedToSize:CGSizeMake(descLabel.frame.size.width, FLT_MAX) lineBreakMode:descLabel.lineBreakMode];
float padding = 20;
[descLabel setFrame:CGRectMake(padding, CGRectGetMaxY(nameLabel.frame), CGRectGetWidth(tableView.frame)-(2*padding), suggestedSize.height)];

if you are using auto layouts in custom cell then

  1. Keep a back up, and uncheck auto layouts
  2. select iPhone in drop down and select Disable size class

If there is a problem with row height,

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

    CGSize suggestedSize = [descriptionText sizeWithFont:descLabel.font constrainedToSize:CGSizeMake(descLabel.frame.size.width, FLT_MAX) lineBreakMode:descLabel.lineBreakMode];
    float heightOfRow = CGRectGetMaxY(nameLabel.frame)+suggestedSize.height+5; // height of name label(as it is single line supported) + height of desc label + bottom padding
    return heightOfRow;
}

Hope this helps

Upvotes: 2

Daniel
Daniel

Reputation: 23359

If you're using manual layout then you must set the numberOfLines property of your label to 0, also you will want to call -sizeToFit on the label after setting the text. You might also need to change some other frames after this accordingly so the label doesn't overlap anything.

If you are using AutoLayout then setting the numberOfLines is still needed but then it depends on your constraints, if you've set the left and right of the label to the super view's left and right then it can infer a maximum width and grow the label vertically.

In any case your screenshot clearly shows that the label is set to have numberOfLines = 1, your cell height looks okay, which is expected since you're calculating that in code with a set width. It's the rendering of the label which is not being triggered. Change numberOfLines to 0 to start with, then in layoutSubviews (if you're doing things manually) you'll want to sizeToFit

Upvotes: -1

orkenstein
orkenstein

Reputation: 2858

Try autoresizing:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  VenueReviewCell *cell = (VenueReviewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
  cell.commentLabel.autoresizingMask = UIViewAutoresizingFlexibleHeight;
  cell.commentLabel.numberOfLines = 0;

  return cell;
}

Upvotes: 0

Related Questions