Flexibility using auto layout with nested stack views, augmented with constraints - Five Pack Creative
post-template-default,single,single-post,postid-15015,single-format-standard,edgt-core-1.0,ajax_fade,page_not_loaded,,hudson child-child-ver-1.0.0,hudson-ver-1.2, vertical_menu_with_scroll,smooth_scroll,blog_installed,wpb-js-composer js-comp-ver-5.4.1,vc_responsive
Apr 28 2017

Flexibility using auto layout with nested stack views, augmented with constraints

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:

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 on raywenderlich.com. If you have questions, join the discussion on Ray’s site.

Share Post
  • Richard Garrison

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

    April 28, 2017 at 7:33 pm

Post a Comment