Search code examples
iosswiftautolayoutuistackview

Auto shrink UILabel when other UILabel grows

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

labels

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):

error

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. :

playersname

And the constrain:ss

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

Solution

  • 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.