Automatic layout aligns two marks next to each other
I am trying to convert my application to use auto layout.
This is how it should look (before I used Auto Layout):
Now I'm not sure how to do the following using Auto Layout:
- The left text label (from 22:35 in it) must be in the horizontal center of the KL1032 label when the right label is missing (with -14 min in it).
- If in fact there is a right mark, then the right edge of 22:35 mark should coincide with the horizontal center of the KL1032 mark and the left edge of the -14 min mark should also coincide with the horizontal center of the KL1032 mark, leaving a small space between the marks, as in the screenshot.
What limits should I use to achieve this? Am I also using Content Hugging priority?
I tried just centering the label at 22:35, which is fine if the right label is empty / missing. But when the right label is present, it certainly doesn't work correctly.
source to share
You will need to add and remove the "(-14 min.)" Label, not just hide it or set it to be empty.
Set the 2235 mark so that its horizontal center is aligned with the KL1032 mark, but with a slightly reduced priority (for example, 750). Also set the constraint so that the trailing edge is greater than or equal to the center of the KL1032 mark minus whatever small distance you want. It should be in priority 1000 (required).
When the label "(-14 min.)" Should be present, add it and set limits on it. Limit its leading edge to be the trailing edge of the 22:35 label, plus the distance you desire. Also create a constraint to align its center with the center of the KL1032 label, but set its priority between the desired one (1000) and the constraint centering the 22:35 label, for example 800. The layout system won't be able to center because it would force the 22:35 label to cross it required limitation, but it will be as close as possible.
If this label should not be present, simply remove it from the hierarchy, which will also remove its constraints. The 22:35 mark will revert to centering (because it may and does "prefer").
If you prefer, you can make the layout in NIB with both labels. Make exits on the "(-14 minutes)" mark and limits on it. Make them strong
because you are temporarily removing them from the hierarchy, but you don't want them to be released. This way, your code can simply remove and re-add them as needed, without specifying restrictions in the code.
Edit: Oh, and you need the constraint to set the baseline of the "(-14 minutes)" label to the baseline of the 22:35 label. You have to add this every time to the code, or set it up in the NIB with a strong socket and re-add it every time like the others.
Edit 2: Another approach came up. You can leave "(-14 minutes)" view in the hierarchy and all constraints in place at all times. If you don't want it to show, set the hidden view and set the constant
constraints between its center and the center of the KL1032 label to a much larger value. Definitely large enough for the 22:35 notch to be in its preferred centering position, potentially large enough to be well off-screen.
Since you don't want the 22:35 label to match it exactly, the spacing constraint between these two labels must be made greater than or equal to, not equal. This change will not be due to whether the "(-14 min.)" Mark is displayed. This is exactly how this limitation should always be.
If you want the "(-14 min.)" Label to show, reset the constraint that tries to center it back to be constant
0. Also, of course, display it.
source to share