Auto shrink UILabel when other UILabel grows

Question

I have a few labels, which should never be touching each other. See the image below (ignore the yellow letters):

These are 4 labels in total, 2 player names and 2 scores. The name of the player will replace the original player label text. So "player 1:" could be any text, in any width. The labels are in a View, in a UIStackView. Each 2 labels (so players name and score) has his own View. In this example, there are 4 labels, in 2 Views, in 1 UIStackView. This is what I want:

The score labels will never auto shrink, they keep always there original height and would auto increase in width if the content(score) will grow. Therefore, I have set the content hugging priority to larger values than the player name label. Since I do not want the score label to auto shrink, I set the content compression resistance priority to a larger value than that of the players name label.

I set the players name label text to a auto shrink value scale to 0.5. Yet, when a large username is presented, it appears over the score label like this (I made the original blue "0" now yellow):

The username should auto shrink, and should never touch the score label. How can I do this?

I hope you can help!

Edit: I want to add a trailing space between to players name and players score label. To do this, I want to add a trailing space from players name, to players score label. However when adding this constrain it will also take the entire score label. I want it of course to stop when it touches the score label. Pic 1 showing here the size of players name when added the trailing space to the score label. It takes up the score label swell. :

And the constrain:

I do not want to use fixed constrains as that would cause problems running it on a iPad or iPhone SE. Thank you.

The UIStackView may not use the content compression or hugging properties. It also manages the stack of views on it's own (without really caring about autolayout). I think you'd be better adding the labels to the view directly and handling it all without autolayout. — keithbhunter
Yes, it is in auto layout, stacked in a UIStackview. I have no idea on how to do this particular thing. Auto layout won't auto resize labels depending on other UILabels — Petravd1994
I would not think UIStackView does not support content hugging of labels in it. I will wait for other answers before changing my whole code — Petravd1994
What should happen if the player name is too long? I assume that it should has "..." at the end, is it right? Also, the space between the player name label and its score label, how should it behave? — Ahmad F
I can answer the best way but just a question first. Should the names take up a maximum space then shrink or if a score is 0 you are ok with the name stretching all the way across to the single digit of 0? — agibson007

agibson007 agibson007 · Accepted Answer · 2017-03-08T19:52:42

To accomplish this drag 1 UIView onto the storyboard or xib.Drag 2 UILabels into this view and place them side by side. Add top, bottom, leading and trailing constraints to the left/leading label. The trailing is what will give some space between the UILabels. Add top,bottom, and trailing constraints to the second label. Now change the first(left/leading label to Autoshrink(min font scale 0.5). Also change the leading label-Content Hugging(Horizontal-252,Vertical 251). Now click on the right/trailing label and change Content Hugging(Horizontal-251,Vertical 251) and more importantly Content Compression Resistance Priority to 1000 on both vertical and horizontal. Now select the view holding these labels. Command C to copy and paste anywhere outside Command V. Now select both views and go up to the top menu in Xcode and select Editor and -> Embed In -> UIStackView. Set the stackview to Alignment .Center and Fill. Add equal heights and equal widths constraints to the 2 views holding the labels in the stackview. Add top(or bottom or both),leading,trailing constraints to the stackview to it's superview. Adjust leading and trailing on labels to add some padding. To add padding between the two views holding the labels inside the stackview add a view in between them and set the width constraint(fixed or percentage of super whichever you want) to the desired padding.

Auto shrink UILabel when other UILabel grows

1 Answers