Self sizing issue with 3 UILabels inside a cell

Hi,

I'm kinda stomped by this issue. Its going to be a little lengthy but please bear with me.

This issue came across in an iOS 8 app I'm creating. I've set all the constraints so I'm not getting any auto layout errors or warnings. But when I run it, it looks like this.

The blue and the black labels are supposed to resize themselves to fit their content thus making the cell's height dynamic. I've set the number of lines of both of those labels to 0 as well.

Here's a weird thing that happens. If I rotate the device to landscape and back to portrait, I get this.

Now the black label has resized itself to fit all its text but it overflows the cells boundaries. I have set these two lines of code in the viewDidLoad() method.

tableView.estimatedRowHeight = 100
tableView.rowHeight = UITableViewAutomaticDimension

I've uploaded a test Xcode project to Dropbox demonstrating this issue so it'll be easier for you to give it a look. Can you please help me out to resolve this?

Thank you.

EDIT: After I ran into this issue, I came across this tutorial. Although it's on iOS 7, I picked up a few pointers regarding auto layout. So I created a separate project to test them out.

Basically what I did was moved the 3 labels closer to each other so that their vertical spaces would be 0 (I did this because that's how it was done in this tutorial's example project but I noticed in your project, you could have different vertical space values). And added other constraints to the sides. No auto layout errors or warnings again.

When I run it the first time, the black label cropping issue is still there.

But I turn it to landscape and back again to portrait and..

all the all the cells are resized properly to fit both labels! Still can't figure out why this doesn't happen in the first run though. I uploaded a separate project to here (This project has 2 cells. One with 3 labels and one with 2 labels. I was just experimenting. The same issue came up in both of these scenarios).

My actual issue is the first one. I just added the second part to show a different approach I took.

If you could take a look. I'd really appreciate it. This issue has me stomped.

Thank you.

Hi Isuru,

The issue here is with the multi-line labels' preferredMaxLayoutWidth property. This is the property that tells the label when it should word wrap.

Xcode 6 Interface Builder introduced a new option to have this property set to "Automatic". Unfortunately, it doesn't seem to be working perfectly at least in this case. I haven't spent much time with this to know why, but I'm guessing it's an Apple bug. I didn't see any obvious issues with how you have your cells set up or anything.

Anyways, the easiest workaround is to add the following code to your tableView:cellForRowAtIndexPath: code:

cell.nameLabel.preferredMaxLayoutWidth = CGRectGetWidth(cell.nameLabel.frame)
cell.idLabel.preferredMaxLayoutWidth = CGRectGetWidth(cell.idLabel.frame)
cell.actionsLabel.preferredMaxLayoutWidth = CGRectGetWidth(cell.actionsLabel.frame)

This will manually set the preferredMaxLayoutWidth on each label based on its actual width. This seems to be working well for me.

Let me know if that resolves your issue. If you can't figure out why the preferredMaxLayoutWidth isn't being set correctly the first time loaded from the nib, you should file a bug report (radar) with Apple.

Hi Tyler,

Yes! That did the trick! Oh man, thanks a ton. I've been at this for days.

Although it works, randomly it was give auto layout errors at runtime when I rotate the device. When I run it again, no errors. Weird. I'll file a radar. Can't hurt, right?

Thanks again for helping me out. :)

Cool. One final note, if you find that the labels are too short or too tall when the cells first display, it may be because the cell's width in Interface Builder is not the same as the width when it displays in the table view...which means that the preferredMaxLayoutWidth on each label is incorrect.

You can fix this by manually setting the preferredMaxLayoutWidth to the width of the table view, minus the left/right padding for the label.

I use a UILabel subclass like this, to automatically set the preferredMaxLayoutWidth:

@implementation AutoSizingLabel

- (void)setBounds:(CGRect)bounds {
    [super setBounds:bounds];

    if (self.numberOfLines == 0) {
        CGFloat boundsWidth = CGRectGetWidth(bounds);
        if (self.preferredMaxLayoutWidth != boundsWidth) {
            self.preferredMaxLayoutWidth = boundsWidth;
            [self setNeedsUpdateConstraints];
        }
    }
}

- (CGSize)intrinsicContentSize {
    CGSize size = [super intrinsicContentSize];

    if (self.numberOfLines == 0) {
        // There's a bug where intrinsic content size may be 1 point too short
        size.height += 1;
    }

    return size;
}

@end

Is the preferredMaxLayoutWidth fix still needed on iOS 9 and onwards?

Navigation Menu

Repository navigation

Self sizing issue with 3 UILabels inside a cell #7

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Self sizing issue with 3 UILabels inside a cell #7

Description

Activity

smileyborg commented on Sep 21, 2014

Isuru-Nanayakkara commented on Sep 22, 2014

smileyborg commented on Sep 22, 2014

kevinrenskers commented on Sep 24, 2014

koenvanderdrift commented on Feb 4, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions