1 00:00:00,350 --> 00:00:04,703 The next attribute is distribution, which determines how the stack 2 00:00:04,703 --> 00:00:08,014 views layout its arranged subviews along its axis. 3 00:00:08,014 --> 00:00:12,590 So there's some important distinctions that you need to make note of here. 4 00:00:12,590 --> 00:00:18,370 Alignment is perpendicular to the axis, distribution is along the axis. 5 00:00:18,370 --> 00:00:21,860 By default, again, this value's fill, which makes the arranged views 6 00:00:21,860 --> 00:00:25,470 fill the available space along the stack view's axis. 7 00:00:25,470 --> 00:00:29,470 And like alignment, when distributing arranged subviews, the stack view 8 00:00:29,470 --> 00:00:34,770 takes the compression resistance and content hugging priorities into account. 9 00:00:34,770 --> 00:00:38,140 If the arranged subviews do not fit within the stack view, 10 00:00:38,140 --> 00:00:42,390 if their combined size is too large, then the stack view shrinks the views 11 00:00:42,390 --> 00:00:45,720 according to their compression resistance priorities. 12 00:00:45,720 --> 00:00:50,550 If they do not fill the stack views, that is their combined size is too small, 13 00:00:50,550 --> 00:00:55,260 then the stack view stretches the views according to their hugging priorities. 14 00:00:55,260 --> 00:00:57,604 So after the fill distribution type, we have fill equally. 15 00:00:57,604 --> 00:01:00,264 Here, the views are resized, so 16 00:01:00,264 --> 00:01:05,220 that they're all the same size a long the stack view's axis. 17 00:01:05,220 --> 00:01:09,350 In the horizontal stack view, widths are resized, while in a vertical stack view, 18 00:01:09,350 --> 00:01:11,340 the heights are modified. 19 00:01:11,340 --> 00:01:14,210 The next option is fill proportionally. 20 00:01:14,210 --> 00:01:16,920 Here, the views are resized proportionally based on their 21 00:01:16,920 --> 00:01:20,590 intrinsic content size along the stack view's axis. 22 00:01:20,590 --> 00:01:24,390 Equal spacing, the next option, is quite interesting. 23 00:01:24,390 --> 00:01:28,610 First, the stack view positions the arranged views so that they fill 24 00:01:28,610 --> 00:01:34,080 the available space along the stack view's axis, like with the fill option. 25 00:01:34,080 --> 00:01:36,600 When the arranged views don't fill the stack view, 26 00:01:36,600 --> 00:01:40,490 it pads the spacing between the views evenly until they fit. 27 00:01:41,500 --> 00:01:47,020 On the other hand, if the views do not fit the stack view, that is they're too large, 28 00:01:47,020 --> 00:01:51,380 it shrinks the views according to their compression resistance priorities. 29 00:01:51,380 --> 00:01:52,170 So with this option, 30 00:01:52,170 --> 00:01:56,650 we have a bunch of different things going on that determine that final layout. 31 00:01:56,650 --> 00:01:59,990 The last distribution option is equal centering. 32 00:01:59,990 --> 00:02:01,120 With equal centering, 33 00:02:01,120 --> 00:02:04,350 the stack view attempts to position the arranged subviews, so 34 00:02:04,350 --> 00:02:09,830 that they have an equal center to center spacing along the stack view's axis, 35 00:02:09,830 --> 00:02:13,900 while at the same time, maintaining the spacing distance between views. 36 00:02:13,900 --> 00:02:17,290 We haven't talked about spacing just yet, we'll get back to that. 37 00:02:17,290 --> 00:02:21,730 If the arranged views do not fit within the stack view, the stack view shrinks 38 00:02:21,730 --> 00:02:27,100 the spacing until it reaches the minimum spacing defined by the spacing property. 39 00:02:27,100 --> 00:02:31,150 If the views still don't fit, the stack view shrinks the subviews then 40 00:02:31,150 --> 00:02:34,780 according to their compression resistance priorities. 41 00:02:34,780 --> 00:02:36,630 When using equal centering, 42 00:02:36,630 --> 00:02:41,430 the stack view places a higher priority on maintaining the intrinsic 43 00:02:41,430 --> 00:02:46,910 content size of the view at the expense of the center to center spacing. 44 00:02:46,910 --> 00:02:51,220 However, if we have specified a minimum spacing between the views, 45 00:02:51,220 --> 00:02:54,570 then the stack view prioritizes this minimum spacing, and 46 00:02:54,570 --> 00:02:58,490 shrinks the views beyond their intrinsic content size. 47 00:02:58,490 --> 00:03:01,940 Back in Interface Builder, if you change the distribution values, 48 00:03:01,940 --> 00:03:03,374 you won't see any changes. 49 00:03:03,374 --> 00:03:08,090 And that's because distribution currently occurs along the stack view's axis, 50 00:03:08,090 --> 00:03:11,130 which is in the vertical orientation. 51 00:03:11,130 --> 00:03:16,390 Since the height of both buttons defined by the intrinsic content size is the same, 52 00:03:16,390 --> 00:03:18,540 since they are single line buttons, 53 00:03:18,540 --> 00:03:22,370 all the distribution options will give us the same end result. 54 00:03:22,370 --> 00:03:26,060 So let's go ahead and change this axis back to Horizontal. 55 00:03:26,060 --> 00:03:29,540 In this axis, they have different widths, so we should get different layouts for 56 00:03:29,540 --> 00:03:31,110 the different options. 57 00:03:31,110 --> 00:03:33,820 With the distribution of fill, nothing changes. 58 00:03:33,820 --> 00:03:36,335 We said that fill makes the stack view size, 59 00:03:36,335 --> 00:03:39,320 its arranged subviews to fill the entire space. 60 00:03:39,320 --> 00:03:42,690 But since our stack view has no defined width of its own, 61 00:03:42,690 --> 00:03:47,540 it accommodates the width of both labels given their intrinsic content size. 62 00:03:47,540 --> 00:03:51,940 If we change it to fill equally, now the first button, 63 00:03:51,940 --> 00:03:55,410 the start button is stretched to the width of the second button. 64 00:03:56,700 --> 00:04:01,256 Fill proportionally, in this case, is the same as fill, because it is the intrinsic 65 00:04:01,256 --> 00:04:05,014 content size of the button that determines the size of the stack view. 66 00:04:05,014 --> 00:04:09,630 And they now take up the proportional amount of space based on their own widths. 67 00:04:10,650 --> 00:04:14,010 Equal spacing won't change anything either. 68 00:04:14,010 --> 00:04:16,310 But here, if we were to give the stackview, so 69 00:04:16,310 --> 00:04:18,170 let's select the stackview at the top. 70 00:04:18,170 --> 00:04:25,370 And we'll go ahead and give it a width constraint of 350 points. 71 00:04:26,490 --> 00:04:31,030 And now you'll see, I might have to zoom out here a tiny bit, there we go. 72 00:04:31,030 --> 00:04:34,170 Now you'll see how equal spacing changes things. 73 00:04:34,170 --> 00:04:36,213 In addition, here, so you see how this works? 74 00:04:36,213 --> 00:04:38,605 We can drop another button in, and 75 00:04:38,605 --> 00:04:42,330 the equal spacing aspect becomes even more obvious. 76 00:04:43,360 --> 00:04:48,330 As an aside, notice how I was easily able to add a third button to the stack view, 77 00:04:48,330 --> 00:04:51,620 and everything is sized and positioned automatically. 78 00:04:51,620 --> 00:04:55,530 With the third button added, you should cycle back through the distribution 79 00:04:55,530 --> 00:04:58,430 options, and see how they are affected. 80 00:04:58,430 --> 00:04:59,160 Notice, for example, 81 00:04:59,160 --> 00:05:03,730 if we were to change things to fill, the first button is stretched, 82 00:05:03,730 --> 00:05:08,110 while the intrinsic content size of the remaining buttons are maintained. 83 00:05:08,110 --> 00:05:12,130 Now, this behavior can frustrate you if you don't know the underlying reason. 84 00:05:13,140 --> 00:05:17,310 In this case, all of the buttons have a combined intrinsic width 85 00:05:17,310 --> 00:05:19,270 that is less than the width of the stack view. 86 00:05:20,270 --> 00:05:24,310 When we specify fill as the distribution strategy, sense of views 87 00:05:24,310 --> 00:05:29,740 don't already fill the stack view, it has to decide on which views to stretch. 88 00:05:29,740 --> 00:05:34,610 When setting up the views, we did not modify the content hugging priority values 89 00:05:34,610 --> 00:05:40,640 on any of the views, meaning these buttons all have the same value. 90 00:05:40,640 --> 00:05:45,220 So this leads to a situation of ambiguity, where the system cannot decide the stack 91 00:05:45,220 --> 00:05:47,570 view, cannot decide which button to stretch. 92 00:05:48,680 --> 00:05:50,227 In such ambiguous cases, 93 00:05:50,227 --> 00:05:55,092 the stack view shrinks the subviews based on the index in their underlying array. 94 00:05:55,092 --> 00:05:59,720 Now, you might have noticed that I've been saying, arranged subviews all this time? 95 00:05:59,720 --> 00:06:04,320 And that's because they are arranged in a very specific order. 96 00:06:04,320 --> 00:06:08,410 So by default, auto-layout modifies the size of the first view in this order, and 97 00:06:08,410 --> 00:06:11,630 then works its way down to satisfy any layouts. 98 00:06:11,630 --> 00:06:12,368 We can also modify this. 99 00:06:12,368 --> 00:06:17,642 We can get rid of this ambiguous situation by specifying in the size inspector, 100 00:06:17,642 --> 00:06:21,280 for example, a lower content hugging priority here. 101 00:06:21,280 --> 00:06:22,860 So let's say, change this to 249. 102 00:06:22,860 --> 00:06:26,470 And now, you can see how the system makes a different decision. 103 00:06:26,470 --> 00:06:31,350 It decides to stretch that suspend account, because relative to the other 104 00:06:31,350 --> 00:06:35,759 buttons, it has a lower content hugging priority value in the horizontal axis. 105 00:06:37,090 --> 00:06:39,530 Okay, so that is distribution. 106 00:06:41,250 --> 00:06:43,913 The last attribute we're going to look at here is spacing. 107 00:06:43,913 --> 00:06:46,430 Now, actually, let me modify that. 108 00:06:46,430 --> 00:06:48,429 I'm going to set this back to 249 here. 109 00:06:48,429 --> 00:06:52,901 I undid that change, but this way, we won't have any ambiguous layouts. 110 00:06:52,901 --> 00:06:57,720 Okay, so the last attribute we're going to look at here is spacing, and 111 00:06:57,720 --> 00:07:02,390 that's back in the stacked view attributes, at the top. 112 00:07:02,390 --> 00:07:06,060 Spacing is simply the distance in points between the adjacent 113 00:07:06,060 --> 00:07:08,980 edges of the stack view's arranged views. 114 00:07:08,980 --> 00:07:12,450 If we increase the spacing value in our scene, 115 00:07:12,450 --> 00:07:15,830 you can see how the stack view rearranges the subviews to add spacing. 116 00:07:15,830 --> 00:07:17,890 So go ahead, up that value. 117 00:07:19,400 --> 00:07:23,690 And we'll change the distribution to fill proportionally. 118 00:07:25,120 --> 00:07:27,720 And then go back and modify it. 119 00:07:27,720 --> 00:07:28,771 Let's get this back to the base. 120 00:07:28,771 --> 00:07:30,247 So this is 250 again. 121 00:07:33,087 --> 00:07:34,580 All right, so they all have the same values. 122 00:07:34,580 --> 00:07:38,900 Now, we can go back to the stack view, go to the attributes. 123 00:07:38,900 --> 00:07:44,052 And as we increase the spacing, you can see how this starts to affect our layout. 124 00:07:44,052 --> 00:07:46,983 When the distribution is fill proportionally, 125 00:07:46,983 --> 00:07:51,540 the stack view treats the spacing as a strict spacing requirement. 126 00:07:51,540 --> 00:07:54,970 It is the value specified, and no more. 127 00:07:54,970 --> 00:07:58,970 When the distribution is equal spacing or equal centering, however, 128 00:07:58,970 --> 00:08:03,140 the spacing value, as we mentioned earlier, is treated as minimum spacing. 129 00:08:03,140 --> 00:08:07,560 The stack view can increase the spacing to satisfy layout constraints. 130 00:08:07,560 --> 00:08:12,530 So, as you can see, despite being a relatively straightforward tool, 131 00:08:12,530 --> 00:08:16,420 stack views can be used to build fairly complex layouts. 132 00:08:16,420 --> 00:08:18,570 Now, we didn't get much practice in here. 133 00:08:18,570 --> 00:08:21,800 This three button layout doesn't really show the full complexity of 134 00:08:21,800 --> 00:08:23,250 what we can do. 135 00:08:23,250 --> 00:08:27,210 So as always, check out the links below to work through a few examples. 136 00:08:27,210 --> 00:08:32,550 In general, when building layouts for your app, always start with stack views. 137 00:08:32,550 --> 00:08:34,380 Even though it's the last thing we learned here, 138 00:08:34,380 --> 00:08:38,660 you can build most of your simple to fairly complex layouts with stack views. 139 00:08:38,660 --> 00:08:43,118 And then the amount of work you have to do as you can see is a lot less. 140 00:08:43,118 --> 00:08:46,980 Once you've reached the limits of what's possible with stack views, 141 00:08:46,980 --> 00:08:50,490 then start defining individual constraints. 142 00:08:50,490 --> 00:08:53,310 And that's it for the auto-layout basics. 143 00:08:53,310 --> 00:08:57,730 But this isn't the only way to create constraints and 144 00:08:57,730 --> 00:09:01,530 modify our layouts and position and size things in iOS. 145 00:09:01,530 --> 00:09:05,760 We can also write auto-layout code to do the same thing. 146 00:09:05,760 --> 00:09:08,950 And to learn about that, check the links in the teacher's notes.