6

I have a problem with a label constraint.

My goal is to have 2 labels on the same Y coordinate of a tableViewCell. One of the labels is pinned on the left side and the other is pinned on the right side.

Like that:

[This is the first label]      [Second]

The first label should have a dynamic width based on the text which it has to display, BUT it should end about 20 points to the second label.

I tried that with numerous constraints, but sometimes the first label seem to push the second label out of the view and sometimes the first label just overlaps the second label like in this example:

enter image description here

The first label has constraints for:

Top Space to Superview
Leading Space to Superview
Bottom Space to a third label
Trailing Space to THE second Label (<= 20)

What is the correct way to display the two labels correctly?

Thanks in advance, appreciate your help!

EDIT

Tried the solution with giving the second label a maxwidth. Now, it is randomly working or not working. I don't get this at all.

enter image description here

Bioaim
  • 928
  • 1
  • 13
  • 26
  • I think you should give priorities. High priority to second trailing constraint and horizontal spacing between first and second.Along with this, try giving the compression resistance <500 for first label .OR you could give first label number of lines to 0, with the constraints you have now. – Teja Nandamuri Apr 21 '16 at 17:05
  • Is your second label on right side has fixed width ??? – Sandeep Bhandari Apr 21 '16 at 17:08
  • "Trailing Space to THE second Label (<= 20)" – maybe change it to Trailing Space to THE second Label (>= 20)? – Alexander Doloz Apr 21 '16 at 17:14
  • >= 20 pushes the second label from the view. – Bioaim Apr 21 '16 at 17:19
  • @bioaim : setting >=20 will not push the second label out :) What it means is distance between first label and second label is at least 20 :) Because your right label is fixed on its right end and second label has fixed width :) it will never be pushed out of screen :) only thing that will happen is if left label is small the distance between left and right label will be greater than 20 that means left label will reduce in its width :) and left label is big it will expand till the distance between 2 label is 20 after that text in left label will truncate :) – Sandeep Bhandari Apr 21 '16 at 17:30
  • Yes, that is true in theory, and that is exactly what i've done before, but sometimes this pushes the second label out. I don't know why this happens. – Bioaim Apr 21 '16 at 17:52

2 Answers2

11

Like others have said, you need to set the trailing constraint from the left label to the right label as greater than or equal to, so that there is a gap of at least 20 between the two.

But, you also need to designate which label truncates first. By not doing this, iOS will take it upon itself to choose, which is probably why your current solution works only some of the time. This is where Content Compression Resistance Priority comes into play. Set the value lower for the label you want to truncate first.

You can do this on your storyboard under the size inspector.

Content Compression Resistance Priority

I'm assuming you want your left label to truncate first. In that case, make sure the left label has a lower horizontal content compression resistance priority than the right label. Notice how above I just dropped it to 749, as the default is 750.

Check out this answer for a good explantation on content compression and content hugging.

Community
  • 1
  • 1
j.f.
  • 3,908
  • 2
  • 29
  • 42
  • Thank you so much! This finally works perfect. Thank you aswell for the link, i understand that much better now! – Bioaim Apr 24 '16 at 12:09
0

if your second label on the right side has fixed width or max width :) here is what you can do :)

  1. Set the distance between left label and right label to >= 20
  2. set the width of the right label with some value using [yourvalue] or [>=your value]

SO overall here is how label's constraints should appear

|-(distance_to_left_Label)-[left-label]-(>=20)-[right_lable(your_value)]-(distance_to_right)-|

Hope my answer helped :)

Sandeep Bhandari
  • 19,999
  • 5
  • 45
  • 78
  • Already tried this solutions, but this is randomly working or not working. Sometimes it does its job, sometimes the second labels gets pushed out of the view...see edit first post – Bioaim Apr 21 '16 at 18:02
  • i gave it a <= width constraint, which is maxwidth. – Bioaim Apr 21 '16 at 19:21
  • @Bioaim : to the right label buddy not the distance between left and right :) ok do one thing lets simplify I'll for now set the fixed width for right label "FIXED" and tell me then will think of >= or <= ok buddy :) just set fixed with to right label and >=20 to distance between left and right label :) and tell me what happenned :) – Sandeep Bhandari Apr 21 '16 at 19:24
  • i know what you mean, it simply does not work for me. I know have: (leading-space)-[left-label]-(>=20)-[right-label(width-40)]-(trailing-space) – Bioaim Apr 21 '16 at 19:30