This workshop will be retired on May 31, 2020.
Distribution in Stack Views9:09 with Pasan Premaratne
The second important attribute when customizing stack views is distribution, which determines how the stack views layouts out its arranged views along its axis.
The next attribute is distribution, which determines how the stack 0:00 views layout its arranged subviews along its axis. 0:04 So there's some important distinctions that you need to make note of here. 0:08 Alignment is perpendicular to the axis, distribution is along the axis. 0:12 By default, again, this value's fill, which makes the arranged views 0:18 fill the available space along the stack view's axis. 0:21 And like alignment, when distributing arranged subviews, the stack view 0:25 takes the compression resistance and content hugging priorities into account. 0:29 If the arranged subviews do not fit within the stack view, 0:34 if their combined size is too large, then the stack view shrinks the views 0:38 according to their compression resistance priorities. 0:42 If they do not fill the stack views, that is their combined size is too small, 0:45 then the stack view stretches the views according to their hugging priorities. 0:50 So after the fill distribution type, we have fill equally. 0:55 Here, the views are resized, so 0:57 that they're all the same size a long the stack view's axis. 1:00 In the horizontal stack view, widths are resized, while in a vertical stack view, 1:05 the heights are modified. 1:09 The next option is fill proportionally. 1:11 Here, the views are resized proportionally based on their 1:14 intrinsic content size along the stack view's axis. 1:16 Equal spacing, the next option, is quite interesting. 1:20 First, the stack view positions the arranged views so that they fill 1:24 the available space along the stack view's axis, like with the fill option. 1:28 When the arranged views don't fill the stack view, 1:34 it pads the spacing between the views evenly until they fit. 1:36 On the other hand, if the views do not fit the stack view, that is they're too large, 1:41 it shrinks the views according to their compression resistance priorities. 1:47 So with this option, 1:51 we have a bunch of different things going on that determine that final layout. 1:52 The last distribution option is equal centering. 1:56 With equal centering, 1:59 the stack view attempts to position the arranged subviews, so 2:01 that they have an equal center to center spacing along the stack view's axis, 2:04 while at the same time, maintaining the spacing distance between views. 2:09 We haven't talked about spacing just yet, we'll get back to that. 2:13 If the arranged views do not fit within the stack view, the stack view shrinks 2:17 the spacing until it reaches the minimum spacing defined by the spacing property. 2:21 If the views still don't fit, the stack view shrinks the subviews then 2:27 according to their compression resistance priorities. 2:31 When using equal centering, 2:34 the stack view places a higher priority on maintaining the intrinsic 2:36 content size of the view at the expense of the center to center spacing. 2:41 However, if we have specified a minimum spacing between the views, 2:46 then the stack view prioritizes this minimum spacing, and 2:51 shrinks the views beyond their intrinsic content size. 2:54 Back in Interface Builder, if you change the distribution values, 2:58 you won't see any changes. 3:01 And that's because distribution currently occurs along the stack view's axis, 3:03 which is in the vertical orientation. 3:08 Since the height of both buttons defined by the intrinsic content size is the same, 3:11 since they are single line buttons, 3:16 all the distribution options will give us the same end result. 3:18 So let's go ahead and change this axis back to Horizontal. 3:22 In this axis, they have different widths, so we should get different layouts for 3:26 the different options. 3:29 With the distribution of fill, nothing changes. 3:31 We said that fill makes the stack view size, 3:33 its arranged subviews to fill the entire space. 3:36 But since our stack view has no defined width of its own, 3:39 it accommodates the width of both labels given their intrinsic content size. 3:42 If we change it to fill equally, now the first button, 3:47 the start button is stretched to the width of the second button. 3:51 Fill proportionally, in this case, is the same as fill, because it is the intrinsic 3:56 content size of the button that determines the size of the stack view. 4:01 And they now take up the proportional amount of space based on their own widths. 4:05 Equal spacing won't change anything either. 4:10 But here, if we were to give the stackview, so 4:14 let's select the stackview at the top. 4:16 And we'll go ahead and give it a width constraint of 350 points. 4:18 And now you'll see, I might have to zoom out here a tiny bit, there we go. 4:26 Now you'll see how equal spacing changes things. 4:31 In addition, here, so you see how this works? 4:34 We can drop another button in, and 4:36 the equal spacing aspect becomes even more obvious. 4:38 As an aside, notice how I was easily able to add a third button to the stack view, 4:43 and everything is sized and positioned automatically. 4:48 With the third button added, you should cycle back through the distribution 4:51 options, and see how they are affected. 4:55 Notice, for example, 4:58 if we were to change things to fill, the first button is stretched, 4:59 while the intrinsic content size of the remaining buttons are maintained. 5:03 Now, this behavior can frustrate you if you don't know the underlying reason. 5:08 In this case, all of the buttons have a combined intrinsic width 5:13 that is less than the width of the stack view. 5:17 When we specify fill as the distribution strategy, sense of views 5:20 don't already fill the stack view, it has to decide on which views to stretch. 5:24 When setting up the views, we did not modify the content hugging priority values 5:29 on any of the views, meaning these buttons all have the same value. 5:34 So this leads to a situation of ambiguity, where the system cannot decide the stack 5:40 view, cannot decide which button to stretch. 5:45 In such ambiguous cases, 5:48 the stack view shrinks the subviews based on the index in their underlying array. 5:50 Now, you might have noticed that I've been saying, arranged subviews all this time? 5:55 And that's because they are arranged in a very specific order. 5:59 So by default, auto-layout modifies the size of the first view in this order, and 6:04 then works its way down to satisfy any layouts. 6:08 We can also modify this. 6:11 We can get rid of this ambiguous situation by specifying in the size inspector, 6:12 for example, a lower content hugging priority here. 6:17 So let's say, change this to 249. 6:21 And now, you can see how the system makes a different decision. 6:22 It decides to stretch that suspend account, because relative to the other 6:26 buttons, it has a lower content hugging priority value in the horizontal axis. 6:31 Okay, so that is distribution. 6:37 The last attribute we're going to look at here is spacing. 6:41 Now, actually, let me modify that. 6:43 I'm going to set this back to 249 here. 6:46 I undid that change, but this way, we won't have any ambiguous layouts. 6:48 Okay, so the last attribute we're going to look at here is spacing, and 6:52 that's back in the stacked view attributes, at the top. 6:57 Spacing is simply the distance in points between the adjacent 7:02 edges of the stack view's arranged views. 7:06 If we increase the spacing value in our scene, 7:08 you can see how the stack view rearranges the subviews to add spacing. 7:12 So go ahead, up that value. 7:15 And we'll change the distribution to fill proportionally. 7:19 And then go back and modify it. 7:25 Let's get this back to the base. 7:27 So this is 250 again. 7:28 All right, so they all have the same values. 7:33 Now, we can go back to the stack view, go to the attributes. 7:34 And as we increase the spacing, you can see how this starts to affect our layout. 7:38 When the distribution is fill proportionally, 7:44 the stack view treats the spacing as a strict spacing requirement. 7:46 It is the value specified, and no more. 7:51 When the distribution is equal spacing or equal centering, however, 7:54 the spacing value, as we mentioned earlier, is treated as minimum spacing. 7:58 The stack view can increase the spacing to satisfy layout constraints. 8:03 So, as you can see, despite being a relatively straightforward tool, 8:07 stack views can be used to build fairly complex layouts. 8:12 Now, we didn't get much practice in here. 8:16 This three button layout doesn't really show the full complexity of 8:18 what we can do. 8:21 So as always, check out the links below to work through a few examples. 8:23 In general, when building layouts for your app, always start with stack views. 8:27 Even though it's the last thing we learned here, 8:32 you can build most of your simple to fairly complex layouts with stack views. 8:34 And then the amount of work you have to do as you can see is a lot less. 8:38 Once you've reached the limits of what's possible with stack views, 8:43 then start defining individual constraints. 8:46 And that's it for the auto-layout basics. 8:50 But this isn't the only way to create constraints and 8:53 modify our layouts and position and size things in iOS. 8:57 We can also write auto-layout code to do the same thing. 9:01 And to learn about that, check the links in the teacher's notes. 9:05
You need to sign up for Treehouse in order to download course files.Sign up