This walkthrough explains the solution to the challenge in the Nested Stack Views video on raywenderlich.com (https://videos.raywenderlich.com/courses/62-beginning-auto-layout/lessons/5).
We’re creating a flexible layout that looks like this:
Where the green view expands or contracts based on the available space, like this:
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.
1. Start with single view application
2. Add a vertical stack view (1), constrained to the left and right margins, top, and bottom guides
3. Change the spacing of the stack view (1) to 20
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
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.
9. Set stack view (5) to alignment = leading and spacing = 8
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
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.
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.
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
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
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
For more information on auto layout, check out the Beginning Auto Layout series and Mastering Auto Layout series
on raywenderlich.com.
If you have questions, join the discussion on Ray’s site.
