Auto Layout align two labels next to eachother

Question

I am trying to convert my app to use Auto Layout.

This is how it is supposed to look (before I used Auto Layout):

Now I am unsure how to achieve the following using Auto Layout:

1. The left text label (with 22:35 in it) must be in the horizontal center of the KL1032 label when the right label is not present (with -14 min in it).
2. If the right label actually is present, then the right edge of the 22:35 label should align with the horizontal center of the KL1032 label and the left edge of the -14 min label should also align with the horizontal center of the KL1032 label, leaving a little space between the labels just as in the screenshot.

Which constraints do I need to use for achieving this? Do I also use Content Hugging priority's?

I tried just centering the 22:35 label, which is fine if the right label is empty/not present. But when the right label is present, this of course does not work correctly.

Answer 1

Embed each label in a view and give all the views a minimum width constraint of 14. Then the layout adjusts as you describe when the right label is empty. So, you layout the embedding views:

Answer 2

You're going to have to add and remove the "(-14 min)" label rather than just hide it or set it to be empty.

Set the 22:35 label to be have its horizontal center aligned with that of the KL1032 label, but with a somewhat reduced priority (say 750). Also set a constraint so that the trailing edge is greater than or equal to the center of the KL1032 label minus whatever slight spacing you want. This one should be at priority 1000 (required).

When the "(-14 min)" label should be present, add it and set up constraints on it. Constrain its leading edge to be the trailing edge of the 22:35 label plus the spacing you desire. Also create a constraint to align its center with the center of the KL1032 label, but set its priority to be between required (1000) and the constraint centering the 22:35 label, for example 800. The layout system won't be able to center it because that would force the 22:35 label past its required constraint, but it will get it as close as possible.

When that label should not be present, just remove it from the hierarchy, which will also remove its constraints. The 22:35 label will move back to being centered (because it can and it "prefers" to).

If you prefer, you can do the layout in the NIB with both labels present. Make outlets to the "(-14 min)" label and also the constraints on it. Make them strong because you'll be removing them from the hierarchy temporarily but don't want them released. That way, your code can just remove and re-add them as appropriate, without having to express the constraints in code.

---

Edit: Oh, and you'll want a constraint setting the baseline of the "(-14 min)" label to be equal to the baseline of the 22:35 label. You'll have to add that each time in code or set it up in the NIB with a strong outlet and re-add it each time, just like the others.

---

Edit 2: Another approach occurred to me. You could leave the "(-14 min)" view in the hierarchy and all of the constraints in place all the time. When you don't want it to show, set the view to hidden and set the constant of the constraint between its center and the center of the KL1032 label to be a much larger value. Definitely large enough to allow the 22:35 label to take its preferred position of being centered, potentially large enough to be well off-screen.

Since you don't want the 22:35 label to follow it all the way over, the constraint establishing the spacing between those two labels should be made to be "greater than or equal" rather than "equal". This change would not be conditional on whether the "(-14 min)" label is showing. It's just how that constraint should always be.

When you do want the "(-14 min)" label to show, reset the constraint that tries to center it back to having constant equal to 0. Also, of course, unhide it.