UIStackView - A Visual Guide To Settings

This post visually shows the stack view's Alignment and Distribution property settings. There is also a section on resolving auto layout warnings caused by stack views.

Horizontal StackView Alignment Property

Top

Center

Bottom

Fill

Vertical StackView Alignment Property

Leading

Center

Trailing

Fill

Horizontal StackView Distribution Property

I gave the label and buttons background colors so you can see how they stretch.

Fill

Fill Equally

Fill Proportionally

Equal Spacing

Equal Centering

Vertical Distribution Property

Resolving Layout Warnings

If you put these three controls into a horizontal UIStackView you are going to see 2 errors. The default Alignment and Distribution is set to "Fill".

There are no constraints on the stack view yet so let's add some and have this stack view on the top of our view.

OK, now that the stack view has a vertical position (top space constraint of 8) the "Vertical position is ambiguous..." warnings.

Now we have some new warnings.

Your first thoughts might be to want to add constraints to the controls. And for that second warning, you might think to just do an "Update Frames" on it. But after you try you realize this does not work.
Here are some options:

• Change the Distribution to "Fill Proportionally"
• Change the Distribution to "Equal Spacing"
• Change the Distribution to "Equal Centering"

If you do not like those options and want to use "Fill" or "Fill Equally" then you have to click one of the controls and lower its horizontal Content Hugging Priority.

Content Hugging Priority?

I had to study up on this too because I had no idea what it meant. So I will attempt to explain it to you as simply as possible. Let's break down what this means:

• Content - This is what is in the control. For a label the content is the text. For an image view the content the image. For a button the content is the button text. For a text field I think the content is considered the text in it or even the placeholder text. I think you get the idea.
• Hugging - It is how close the outside of the control is to the content. The outside of the control is "hugging" its content.
• Priority - When your UI is rendered which control should keep hugging its content and which one should not? The priority informs auto layout which to render first. The last one is the one whose hugging will change. The lower number is the last to get rendered. Lowest priority.

Examples:

Now that you are an expert on hugging, take another look at that stack view and ask yourself, "Which control's hugging do I want to change (get bigger or smaller) when the UI changes sizes? Let's see what happens if you lower the priority for each control individually.

Label with lower Content Hugging Priority

TextField with lower Content Hugging Priority

Button with lower Content Hugging Priority

So you are basically giving priority to which control will be expanding when the UI size changes. We only looked at horizontal content hugging but I think you can understand how vertical content hugging works.

I hope this helped you understand stack views and content hugging a little more!

For more info, this article really helped me understand content hugging.
(Xcode 7.3)