Fluid vertical layout, dynamic labels and autolayout

Question

I am trying to replicate a fluid vertical layout with autolayout in ios7. The problem is that i am using a stack of UILabels (and others elements) with AttributedStrings (but this seems to not to interfere with the issue since it also comes with plain text) and the text in the labels is added dynamically, but the frame, or better the constraints don't seems to adapt in a correct way automatically (not specifying a height for the labels) since the label remain of the dimensions given in the xib.

Initial configuration in the Xib, blue are setted equality constraints

Initial configuration in the Xib, blue are setted equality constraints

Same if i use to set a big height constraint constant with value lower of the compression and hugging priority. Nothing change.

After adding text and resizing constraint value (the text should have 5 rows)

After adding text and resizing constraint value (the text should have 5 rows

I finally tryed recreating the contraint every time the text change either this way or with CoreText or many others methods

[self.view setAutoresizesSubviews:NO];
label.lineBreakMode = NSLineBreakByWordWrapping;
label.numberOfLines = 0;
label.preferredMaxLayoutWidth = label.frame.size.width;

[label removeConstraint:oldConstraint];

NSInteger height = ceil([label.attributedText
               boundingRectWithSize:CGSizeMake(label.frame.size.width, 10000)
               options:(NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading)
               //TODO 20 or 1.5 is an hardoced value. find solution to workaround
               //attributes:@{NSFontAttributeName:[UIFont fontWithName:kFontCrimsonText_Roman size:17]}
               context:nil].size.height) + 1;

NSLayoutConstraint * newConstraint = [NSLayoutConstraint constraintWithItem:label
                                                                  attribute:NSLayoutAttributeHeight
                                                                  relatedBy:NSLayoutRelationEqual
                                                                     toItem:nil
                                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                                 multiplier:1.0f
                                                                   constant:height];
[label addConstraint:newConstraint];

This time the dimensions of the labels seems correct but the text inside it is not displayed properly:

Lets say i have a text of 5 rows only the first are shown and the lasts are just cutted despite the fact the the frame seems to be perfectly fitting the required dimensions.

the red space remains in any case

Multiplying the height by 2 (or another constant) seems to fix the problem but obviously now the text is more little than the frame and a lot of blank space remain on top and bottom.

Trying with [label fitToSize] seems to works perfectly, but obviously the constraints bring the frame back right after.

What is the best practice to achieve a vertical fluid layout with dynamic UIlabels and autolayout?

Forgeot to say that I can't use A TableView – jalone May 15 '14 at 09:29 — jalone, May 15 '14 at 09:29

score 2 · Answer 1 · answered May 15 '14 at 09:25

2

The best way to create a "fluid vertical layout"... UITableView.

Seriously, this looks like a perfect candidate for using a UITableView.

It is useful for more than just displaying lists of data. For instance in the Contacts app in iOS the individual contact (where you can add numbers and emails etc...) uses a UITableView to layout the interface.

It takes all of the bother out of having to calculate heights and positions of labels etc...

Define a custom UITableViewCell with the correct layout of one of your UILabels and then you just have to put the right text into the right row.

UITableView is a really powerful tool for things like this.

answered May 15 '14 at 09:25

Fogmeister

76,236
42
207
306

Ahh dammit i forgot to write.. the xib is huge and i didnt designed it and I have been told I cant use a table (it was the first thing i thought about). But ill probably end up begging for this if there is no solution. Anyway i would still know whats wrong with the code. Thank you. – jalone May 15 '14 at 09:27
1

Hmm... well that's a tricky situation to be in. If "higher powers" are telling you to try and do it a certain way then I'd approach them and explain that trying to get it to work in "the wrong way" will take longer and be more buggy (i.e. cost more) than if you were to be able to do it as a UITableView. This is the other side of being a developer. Having to bring people round to seeing things the way you see them. :) Good luck. – Fogmeister May 15 '14 at 09:30
Well, i had a bounty and since i have my own answer accepted and nobody did better I'll assign it to you :) – jalone May 26 '14 at 10:39

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I ended up finding this was a bug, due to use of AttributedText in a UILabel with Autolayout turned on, in ios7.

A temporary workaround as sugested in the other question was to append a new-line character to the attributed string and reducing "bottom margins".

Another one is tu use textview.

Bug reported also in:
- Lines missing from tall UILabel when embedding NSTextAttachment
- iOS 7 BUG - NSAttributedString does not appear

Fluid vertical layout, dynamic labels and autolayout

2 Answers2