Auto Layout to dynamically size uilabel width

Question

So I have two UILabels side by side in Storyboard. The second label should butt up against the right edge of the first one (trailing constraint of 1), but I also need the first label (the one on the left) to set it's width equal to it's content size unless it hits a max width. Visually:

|Label one text| |Label two text|

And I need the following constraints:

1) Label one should resize width wise unless it hits a max size.

2) Label two should always be butted up against the right edge of label one

How do I set this up in Storyboard?

score 110 · Accepted Answer · answered Dec 27 '13 at 22:44

110

Create the 1 point horizontal space between the labels: Control-drag from label2 to label1. Choose Horizontal Spacing from the pop-up. Double click the constraint. Change the constant to 1.
Give label1 a max width: Select label1. Go to the top menu bar, select Editor > Pin > Width. Double click the constraint. Change the relationship to <= and change the constant to the max width.
Vertically align the labels: Select both labels. Go to the top menu bar, select Editor > Align > Vertical Centers.
You still need to set constraints that define how your labels are positioned in their container view. I leave that up to you. I pinned label1 32 points from the left edge of the root view and 34 points from top layout guide.
Update the frames of the labels so they reflect the above constraints: Go to the menu bar in the lower right-hand corner of the canvas. Tap the "Resolve Auto Layout Issues" Tie-Fighter button. Select "Update All Frames…" in the pop-up.

Note: Notice that I did not have to create constraints to make label1's width reflect its content size. The content sizing constraints are generated automatically.

enter image description here

answered Dec 27 '13 at 22:44

bilobatum

8,918
6
36
50

seems to work if the labels content doesnt change, does this work if the label's text is changed programmatically? maybe im doing something wrong but it doesnt seem to size correctly when i change the text – Fonix Mar 06 '14 at 10:26
1

ok i got it working, my content hugging priority and my compression resistance priorities were wrong – Fonix Mar 06 '14 at 10:48
1

This was a massive help. Thank you! – Apr 08 '14 at 14:27
32

Tie-fighter button. Lolz. – Kiel Gillard May 15 '14 at 00:44
@Fonix what content hugging and compression resistance did you set? – pash3r Jun 26 '14 at 07:02
2

@pash3r it depends what you are doing, but the label you want to squash more easily, makes both the priorities low (i just set them to 1) and the one that must not squash set to high (1000) – Fonix Jun 26 '14 at 08:02
@Fonix thanks. I need dynamic height and dynamic width in multiline label. I know how to set constraints for dynamic height, but width is fixed and I'm trying to find solution :/ Do you know how to get both sizes to be dynamic? – pash3r Jun 26 '14 at 11:00
@pash3r if its meant to resize the width and height based on the content alone, that could be ambiguous because it wont know how much to resize it in each direction so probably just defaults to one of the two... if its being resized from external factors then you might want to check those external views compression and content hugging priorities too – Fonix Jun 26 '14 at 11:20
This works perfectly, but when I use Attributed string, it seems to not work – Franck Jun 26 '14 at 12:52
@Franck How does an attributed string break it? Explain. – bilobatum Jun 26 '14 at 22:20
@Fonix yeap exactly it's meant to resize width and height based on the content. So it works if I set constraints with NSLayoutRelationEqual. But I need to show the bubble image under label like in Messages.app. And no idea how to achieve this :(( – pash3r Jun 27 '14 at 08:02
@pash3r i've used a user made library/class called [JSMessagesViewController](https://github.com/maxwellE/originate-ios-meteor-chat/tree/master/MeteorChatApp/Pods/JSMessagesViewController) that does speech bubbles with a chat window quite nicely, maybe that will solve your problem – Fonix Jun 27 '14 at 09:25
What if i have one UILabel in UITableViewCell. I am using AutoLayout . but not able to change the width of uilabel. – coreDeviOS Jan 15 '15 at 10:05
UIlabel has a property of intrinsic content size. In the auto layout you just need to give it's x, y positions then all other thing label manages itself. – Chandni - Systematix Nov 11 '16 at 06:57
It just works in Android, why am I spending hours trying to make this work in iOS – Andrew Feb 04 '17 at 17:25
1

in 2nd step Give label1 a max width: Select label1. Go to the top menu bar, select Editor > Pin > Width. Double click the constraint. Change the relationship to <= and change the constant to the max width. **Better to give proportional** width to super view with suitable multiplier(i.e. 0.5 for half way). this will make it fine for multiple devices ( iPhone and iPad) – Hemal Modi Mar 10 '17 at 09:01

score 14 · Answer 2 · answered May 26 '17 at 02:34

14

Please refer below constraints to Set UIlabel and UIButton flexible width;

answered May 26 '17 at 02:34

Harshal Wani

2,249
2
26
41

score 0 · Answer 3 · edited Jan 30 '15 at 11:01

Please first get textSize with below code:

    CGSize  textSize = { 230.0, 10000.0 };

    CGSize size = [[NSString stringWithFormat:@"%@", yourLabelText] 
                   sizeWithFont:[UIFont systemFontOfSize:10]
                   constrainedToSize:textSize
                   lineBreakMode:NSLineBreakByWordWrapping];

then set your first label frame with this content size:

   UILabel *lblFirst = [[UILabel alloc] initWithFrame:CGRectMake(X, Y, W, size.height)];
   lblFirst.lineBreakMode = YES;
   lblFirst.lineBreakMode = NSLineBreakByWordWrapping;
   lblFirst.numberOfLines =size.height;
   lblFirst.backgroundColor = [UIColor clearColor];
   [self.view addSubview:lblFirst];

then second label Frame will be:

 UILabel *lblFirst = [[UILabel alloc] 
 initWithFrame:CGRectMake(lblFollowerName.frame.size.width + lblFollowerName.frame.origin.x, Y, W, H)];

I am aware of how to do it in a purely programmatically fashion; however for learning's sake I would like to know if this is possible using just auto layout + storyboards. — Msencenb, Dec 27 '13 at 10:11

Auto Layout to dynamically size uilabel width

3 Answers3

Linked