Drag out your elementsScreen Shot 2017-05-26 at 6.13.19 AM.png

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

Screen Shot 2017-05-26 at 6.14.28 AM.png

Pin StackView to the 4 corners with constraints

Screen Shot 2017-05-26 at 6.15.57 AM.png

 

Screen Shot 2017-05-26 at 6.16.18 AM.png

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.

Screen Shot 2017-05-26 at 6.17.35 AM.png

Screen Shot 2017-05-26 at 6.18.13 AM.png

Screen Shot 2017-05-26 at 6.18.43 AM.png

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.

Screen Shot 2017-05-26 at 6.20.36 AM.png

Now everything lays out beautifully.

Screen Shot 2017-05-26 at 6.21.19 AM.png

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.

Screen Shot 2017-05-26 at 6.49.48 AM.png

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.

Screen Shot 2017-05-26 at 6.52.13 AM.png

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

Advertisements