This workshop will be retired on May 31, 2020.
Stack Views4:37 with Pasan Premaratne
A stack view is a convenient interface for laying out views in either a column or a row without having to install constraints.
At this point you should know how to use AutoLayout to create basic layouts and 0:00 constraints. 0:04 You can use the knowledge you've learned, constraints, 0:06 priorities, inequalities to build fairly complex layouts in your apps. 0:09 But I have kept one thing from one you, 0:14 there is a tool that allows you to build simple and 0:16 some complex layouts with out actually having to worry about constraints at all. 0:19 Eight stack view is a really useful tool that uses auto layout it self to position 0:24 and size views, and abstracts away the need for us to define constraints. 0:30 Let's add a new storyboard to our project here, 0:35 we'll call this one, BasicStackViews. 0:39 Now the reason I kept this from you, so to speak, 0:47 rather than starting off with StackViews, which is what Apple recommends. 0:50 Oops, I should not have done that. 0:55 Rather than starting you off with stack views I started with constraints so 0:57 that you understand how a stack view works rather than just 1:01 making it look like magic upfront. 1:04 Now even though I said that stack views are mostly used for 1:07 defining relatively simple layouts it is a pretty powerful tool. 1:10 Layouts defined using stack views can dynamically adapt to a device's 1:14 orientation, size, and any changes in the available space. 1:19 Using stack views we can almost avoid using auto layout entirely. 1:24 Now I say almost, because we actually do have to position and 1:28 size the stack view itself. 1:32 For our first exercise we're going to build a simple two button layout. 1:35 So let's go to the object library, and look for buttons. 1:39 And we'll drag out two buttons onto our scene. 1:43 For the first one, we're going to set the text to Start, and 1:47 for the second, we'll set the text to something like Suspend Account. 1:53 Since the length of the text in these buttons vary, 1:58 they have different intrinsic content sizes. 2:01 From here, we want to display these buttons horizontally beside one another, 2:05 sort of like that. 2:10 Knowing what you know so far, that means setting horizontal spacing constraints, 2:12 pinning the edges to either the super view or 2:17 the safe area layout guides, and all of that stuff. 2:19 This time though we're going to select both of the buttons. 2:23 And we're going to click on the second button from the left 2:26 in the auto layout sub menu. 2:30 Now when you hover over it, it says Embed in Stack, go a head and click it. 2:32 Just like that, the buttons now have constraints added to them. 2:36 By default, views that are embedded in a stack view 2:40 are pinned to the edges of the stack view with zero point offsets. 2:43 Here the start label has a leading edge constraint, let me zoom in. 2:48 So here the start label has a leading edge constraint to the stack view's 2:53 leading edge, a trailing edge constraint to the leading edge 2:57 of that suspend account button, and so on. 3:00 With stack views, 3:03 while we don't necessarily have to add constraints between the sub-views 3:04 inside the stack view, we do need to position and size the stack view itself. 3:08 This is important because sometimes the size of the stack view will 3:13 affect how the views inside of it are laid out. 3:17 Going back to the example we did earlier where we had the three labels 3:20 in the horizontal axis, and we had to manipulate the content size or 3:23 the content resistance priority because we were running out of space. 3:27 Well, depending on the size of the stack view, 3:31 it may have to make those same considerations. 3:33 For now we're going to position our stack view 50 points from the bottom. 3:36 And we'll align the center xXanchor to the view's horizontal center. 3:43 Our layout is now resolved. 3:49 Stack views are quite useful, in that you don't have to handle the position and 3:51 size constraints for each of these sub views. 3:56 You provide some general information and it handles the rest. 4:00 Now, you might have noticed that you only had to specify 4:03 two constraints to lay out the stack view. 4:06 And this is because a stack view can also provide an intrinsic content size for 4:09 both its width and 4:13 height by combining the intrinsic content sizes of all of its sub-views. 4:15 Okay, so while this works, this doesn't look like a reasonable layout. 4:20 When are we ever going to just pin views with zero point offsets? 4:24 With stack views, 4:29 all we need to do though is modify a few properties to adjust the resulting layout. 4:29 Let's tackle that in the next video. 4:35
You need to sign up for Treehouse in order to download course files.Sign up