2

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.

Petravd1994
  • 893
  • 1
  • 8
  • 24
  • 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 Mar 08 '17 at 18:34
  • 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 Mar 08 '17 at 18:35
  • 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 Mar 08 '17 at 18:49
  • 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 Mar 08 '17 at 19:21
  • 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 Mar 08 '17 at 19:38
  • No, the username, no matter what width, size or content, will not auto shrink nor have "...". It will just continue to grow in size, taking the whole screen if it has to. The space between the players name label and score would be a small space, but I will add a space after the players name, causing a space if you know what I mean. The names have no maximum space, as I already have set a maximum characters, Therefore, a username cannot be like 10000 characters, but rather 12. The players name should stretch out, and auto shrink if the players label would touch the score label. – Petravd1994 Mar 08 '17 at 21:29
  • It is fixed by agibson007, however I have 1 little problem. Maybe you guys want to take a look at it. – Petravd1994 Mar 08 '17 at 22:08

1 Answers1

2

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.

agibson007
  • 4,173
  • 2
  • 19
  • 24
  • Thank you! It almost works now. Because I can not add constrains with fixed numbers (if you pin players name to score, it has a fixed number like 100), but when I control drag my players name label to the score label, and add "trailing", it will add the constrain but AFTER the label. Do you know how to set a space between the labels? I will update it with a picture, if you could answer that you did an amazing job :) – Petravd1994 Mar 08 '17 at 22:04
  • I will just post an example on GitHub of what I explained and you can see if it works. Give me just a few – agibson007 Mar 08 '17 at 22:39
  • Check out this. Should be as described. If this is what you are trying to accomplish kindly mark the answer correct. https://github.com/agibson73/StackViewHorizontal – agibson007 Mar 08 '17 at 22:52
  • Thanks bro :D it works exactly like I wanted. You did an amazing job! Thanks again! – Petravd1994 Mar 09 '17 at 17:01