All Articles

This walkthrough explains the solution to the challenge in the Nested Stack Views video on (

We’re creating a flexible layout that looks like this:

the final result

Where the green view expands or contracts based on the available space, like this:

the final result in landscape

the final result on iPad

Here’s what the final view hierarchy will look like. Because referring to multiple stack views can get confusing, I’ve annotated them with numbers here, which I’ll reference as I go.

view hierarchy

1. Start with single view appliction
2. Add a vertical stack view (1), constrained to the left and right margins, top, and bottom guides

constraints for stack view 1

3. Change the spacing of the stack view (1) to 20

properties for stack view 1

4. Add 2 horizontal stack views (2,3), a view, and a vertical stack view (4) as children
5. Set stack view (2) to alignment = top and spacing = 10

properties for stack view 2

6. To stack view (2), add a view and a vertical stack (5) as children
7. Change the background color of the view to blue, add a width constraint = 120 and a 1:1 aspect ratio constraint
8. Because the “top” alignment of the stack view (2) sets the top constraints for us, but does nothing for the height or the bottom, we want to add our own bottom constraint between the blue view and the stack view (2). This ensures that the height of the stack view (2) is exactly high enough to contain the blue view. If the height of the labels to the right could grow taller than the blue view, you’d need something a bit more complex here.

constraints for blue view

9. Set stack view (5) to alignment = leading and spacing = 8

properties for stack view 5

10. Add 2 labels as children of stack view (5): “Title” and “Description”
11. Moving on to stack view (3), add 3 labels: “1”, “2”, and “3”
12. Set stack view (3) alignment = first baseline, distribution = equal spacing, and spacing = 8

properties for stack view 3

13. We only want this stack view to be tall enough for the labels, but the stack view properties don’t specify the height, so constrain the top and bottom of the first label to the stack view. If the labels were different heights, you’d have to do something a bit more complex, but the first label will work fine for us here.

constraints for label 1

14. We don’t want the labels to get compressed, but right now the default vertical compression resistance is in a tie with other views, like the buttons we’ll add at the bottom, so increase this on the first label to 751.

priorities for label 1

15. Set the view in stack view (1) background color = green
16. Set the final stack view (4) to align = trailing, distribution = fill equally, and spacing = 8

properties for stack view 4

17. Add 2 buttons, set the background and text colors, change the titles to “button 1” and “button 2”
18. We want the buttons to have a height greater than their intrinsic height, so set button 1 height = 50

constraints for button 1

19. Finally, we want some space around the text, but the intrinsic width will only make the buttons wide enough to just show the text. To add some room to this calculation, set the left and right content insets on the buttons to 15

insets for buttons

For more information on auto layout, check out the Beginning Auto Layout series and Mastering Auto Layout series
If you have questions, join the discussion on Ray’s site.

You May Also Like…

Five Pack Creative Listed as a Top Developer by Clutch

Five Pack Creative Listed as a Top Developer by Clutch

On average, 75% of mobile users in advanced economies own smartphones. Mobile applications are optimized for mobile devices, making them easier to use than going through the company’s traditional website. That’s why it’s no surprise that more companies than ever are...

The 5 Core Principles of Mobile Maturity

The 5 Core Principles of Mobile Maturity

Unless your team has been operating under a rock for the past decade, it’s common knowledge that mobile experiences dominate virtually all other digital touchpoints today. Recent Google research found that two times more brand experiences occur on mobile than anywhere...


  1. Richard Garrison

    Jerry, you are too awesome! And very generous! Thank you thank you!!!!

    • Jerry Beers

      Glad to help!


Submit a Comment

Your email address will not be published. Required fields are marked *