How to add elements to a UIStackView

Drag out your elements

Shift-Select them all and embed them in a StackView by hitting that little icon in the lower right with the down arrow.

Pin StackView to the 4 corners with constraints

 

Now here’s the thing. The controls in the stackView will expand to fill whatever space is available. That’s why the button is so big. Give the button, and labels all some height constraints.

When you do this you will get constraint violations. Why? Because you have pinned the StackView to the top and bottom, which gives it a height, that the labels and buttons don’t add up to. So to fix, remove the bottom StackView constraint (while centering the text on the labels).

Delete this constraint here.

Now everything lays out beautifully.

Notes

Where are these mysterious leading trailing constraints coming from?

If you are wondering why you get constraint violations every time you  try to add a leading or trailing space to a UIImage or anything else in StackView, it’s because the stackView elements by default always try to fill the entire space.

For example. Here I added 20 leading trailing to this image, but it’s conflicting with regular leading training contraints already in place. Only I didn’t add them!

It’s because the image is trying to fill the space, so those constraints were put there implicitly. To change this you need to change the way the stackview tells it’s elements to fill the space. You do that here.

If you really want to style that image, take it out of the stackview and do it above.

Advertisement