AutoLayout Horizontal Layouts

Stretching two text fields in a horizon stack view

adding to stack view

Adding text fields to stack view

adding constraint

Add remaining constraint to trailing margin

adding to stack view

Change the size

When a stack view has to stretch several elements that all have the same content hugging value, instead of stretching them all a little bit, the stack view will concentrate all it's stretching power on the element furthest to the left.

Additionally if an element's intrinsic content size must be changed the one furthest to the left will be the one that is modified.

If you don't want this behavior but rather wanted both elements to have the same width there are a couple of ways to go about telling xcode.

First we could increase the compression resistance of the first element but this probably isn't the best way to go.

Second we could modify the distribution strategy to Fill Equally. This distribution has no bias and all elements will be treated equally.

distribution strategy

If we take the Fill Equally distribution and apply it to a stack view with a label and two text fields it gives all elements equal width which is probably not what we want.

unwanted equal distribution

To correct this we use nested stack views. Placing the text fields in the nested stack view that has a distribution set to Fill Equally

nest stack view

And changing the parent stack view to a distribution of Fill

nest stack view