-1
  1. Not sure where one needs to use Dynamic height label and a text field next to each other and
  2. how the constraint recipe works using a required, greater-than-or-equal constraint and an optional constraint to set the vertical spacing of the controls based on the tallest control at runtime?

Taken from Apple Docs -

"This recipe dynamically sets the vertical spacing of the controls based on the tallest control at runtime. If you increase the label’s font size to 36.0 points, then the layout’s vertical spacing is calculated from the top of the label instead. If you increase the font size of a label, you would typically also increase the font size of the text field. However, given the extra large fonts available through the iPhone’s accessibility settings, this technique can prove useful when mixing dynamic type and fixed-sized controls (like images)."

Reference: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/ViewswithIntrinsicContentSize.html#//apple_ref/doc/uid/TP40010853-CH13-SW8

Solution screenshot:Views with/without constraint recipe for Dynamic height label and a text field

udGlobal
  • 17
  • 7
  • It’s not so much about execution order. You need to tune the vertical content hugging & compression resistance across the layout. See also https://stackoverflow.com/questions/19994568/ios-algorithm-behind-constraint-auto-layout#22448871 – Warren Burton Mar 01 '21 at 17:54
  • Your question is a bit confusing, because it doesn't really seem related to the image you included. One note: if you constrain `Name Text Field.firstBaseline = NameLabel.firstBaseline`, the you don't need *any* Top constraints for the text field. Its vertical position will be controlled by the `NameLabel`. Try to clarify what your layout is doing... Will `NameLabel` possibly have multiple lines? – DonMag Mar 01 '21 at 21:00
  • @DonMag - Edited my question. Name Label is just single line Label. – udGlobal Mar 02 '21 at 04:36
  • @udGlobal - see the **Edit** to my answer that explains the specific example from Apple. – DonMag Mar 02 '21 at 13:32

1 Answers1

0

Even though your question is a little unclear, let's see if this helps explain things...

Suppose we start with 2 labels - LabelA (green) and LabelB (cyan):

enter image description here

LabelB is constrained 20-pts below LabelA... as we add text to LabelA, it will grow in height, "pushing" LabelB down and keeping the 20-pts vertical spacing:

enter image description here

enter image description here

enter image description here

All of that is pretty simple, and it's exactly what we expect to happen.

But, suppose we want LabelB to start at 100-pts from the top of the view (the safe-area), and only move down if LabelA gets tall enough?

If we add a Top constraint to LabelB, that will stretch LabelA:

enter image description here

Or, it will compress LabelA:

enter image description here

In both cases because LabelB Top cannot be both 100-pts from the view Top AND 20-pts from LabelA Bottom at the same time.

So, let's change LabelB Top to at least 20-pts from LabelA bottom, by setting it to >=, and, we'll change the LabelB Top constraint to a priority of less-than-required. In this example, we'll use Default High (750).

What we've done is told auto-layout to break the 100-pt Top constraint if needed. So, if LabelA is short, LabelB can be at 100-pts, but if LabelA gets tall, keep LabelB 20-pts below LabelA and break the 100-pt Top constraint:

enter image description here

enter image description here

enter image description here

enter image description here

So, it's not so much the order in which the constraints are evaluated, as it is the logical ability for auto-layout to satisfy all the constraints.

Edit

To try and explain the specific example from Apple...

Let's start with a minimum set of constraints, where the fonts are:

Label - 30pt
Field - 14pt

enter image description here

The Name Label is 40-pts from the Top, and the Name Text Field is constrained to the FirstBaseline of the label.

Now let's change the fonts to this:

Label - 20pt
Field - 30pt

so the Field is taller than the Label, here's what we get:

enter image description here

The Top of the label is still 40-pts from the Top, but the field has been moved up (to maintain the baseline alignment) and the Top of the field is now only (about) 25-pts from the Top.

The goal is to keep the Top of tallest element at 40-pts. With only these two vertical constraints, as we can see, we failed.

So, let's reset the fonts to:

Label - 30pt
Field - 14pt

and add the additional constraints with specified Priorities:

enter image description here

The positioning is identical to the first example, but... if we again change the fonts to:

Label - 20pt
Field - 30pt

this is the result:

enter image description here

The Top of the field is at 40-pts, and the Top of the label has moved down (to maintain the baseline alignment).

And... we've accomplished our goal!

Edit 2

To try to clarify with "plain language"...

The Baseline constraint will control the relative vertical alignment of the two elements. As we change the font size of one, it will make that element "taller" (or "shorter") and the other element will move vertically to keep the baselines aligned.

We've added a required constraint of top >= 40 to each element. That tells auto-layout "don't let either element be closer than 40-pts from the top."

We've added a constraint of top = 40 to each element, with Priority: 249. That tells auto-layout "try to put the top of each element at 40-pts... if you can't (because the baseline alignment is pulling it down), then go ahead and break that top constraint."

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • You mean to say that the shorter control does all the work to move up Or down to maintain Baseline alignment. And the additional greater >= constraints does the magic. Is that it. – udGlobal Mar 02 '21 at 15:39
  • @udGlobal - see my **Edit 2** ... that should clarify things for you. If you're still not clear on what's happening, then put two controllers side-by-side in your Storyboard. Use the minimum constraints in one, and the additional constraints in the other. Change the font sizes, and observe the behavior. – DonMag Mar 02 '21 at 16:23
  • I wish the Apple documentation mentioned UX aspect of what the layout is trying to achieve with each use case. Your explanation in edit2 helped. – udGlobal Mar 03 '21 at 08:22
  • I am getting the essence. I tried this also - Case2) Where Baseline alignment works with just having equal constraints but at lower priority for both (top = 40 for text Label at Priority 250 and top = 40 for TextField at Priority 750). The layout works only when compression resistance and content hugging priorities are tweaked as required. But since the required top constraint is not specified and so not maintained – udGlobal Mar 03 '21 at 09:59
  • Solution screenshot linked in the question with two views specifying minimum and additional constraints. The View controller with 2 Views are self explanatory I suppose. That was a good exercise. Thanks for the explanation. – udGlobal Mar 03 '21 at 11:52