In the last lesson, we created a bunch of these container views, so that we can layout the containing 1
elements relative to the containers. 2
But the problem is that we haven't given these containers any dimensions or positions of their own. 3
We haven't specified how they themselves are going to be laid out which is why if we add some constraints 4
to the subviews or the things that are inside these containers, well, it's still ambiguous because it 5
doesn't know how to layout these containers. In order to solve this problem, 6
we're going to learn about something called StackViews. And a StackView is exactly the way it sounds. 7
It's a way for us to be able to stack views together, either vertically, for example, in this case, our 8
three views are vertically stacked on top of each other. 9
Or we could also create horizontal stacks such as our two dice views that are horizontally aligned with 10
each other. 11
If we take our Top View and then hold down the command key, and select the Middle View, and the Bottom 12
View, 13
so we have all three selected. 14
We can go ahead and embed them inside a StackView, so you can go to Editor, Embed in, StackView, or we can 15
simply just select this button and embed it into a StackView. 16
Now that they are in a StackView, Xcode knows how to align these three things relative to each other. 17
But we still got some problems because while we know how these three should be placed relative to each 18
other, namely in a sort of horizontal column, we don't actually know where the StackView begins and ends. 19
So in addition to putting these views inside a StackView, we also have to give the StackView some constraints 20
relative to its superview. 21
But this is relatively easy because we want that stack to stretch out so that it takes up the entire 22
screen and to make sure that it doesn't go into the safe areas. 23
Think about what you did for the background in terms of setting its constraint. And as a challenge, I 24
want you to add some constraints to the stack view to make these errors disappear and the stack view 25
should be constrained so that it doesn't go into any of the safe areas at the top or at the bottom. 26
Pause the video and have a think about this problem and try to solve it. 27
All right. 28
So we've got our StockView selected and we're going to add some constraints. Now, in my case, I want it 29
to be zero from all four sides. And instead of being relative to the superview, I want it to be relative 30
to the safe areas. 31
Now, notice how when we click on the dropdown, we can select Safe Area in most of these dropdowns, other 32
than the top one. 33
Well, in my case, the reason is actually because this top part of the StackView has already gone past 34
the safe area. 35
You can see where the safe area is and you can see where my StackView ends. 36
So if we bring it down just a little bit so that it's right next to the safe area, then if I try to add 37
my constraints this time, you can see that the safe area now exists as a possible relationship. 38
So let's go ahead and add these zero to all four sides. 39
But notice how my bottom constraint is no longer showing the safe area. 40
So let's go ahead and simply add this as a zero constraint to the containing view, 41
and then we're going to add these four constraints and we can find unit using our Attribute Inspector. 42
So if I go ahead and select the bottom of my StackView, 43
so it should read Stack View.bottom. 44
You can see that currently, it's set relative to the superview's bottom. 45
So let's go ahead and change that to the Safe Area Bottom and change that constant to a zero. 46
And now if I hit enter, it will be aligned relative to the bottom of the safe area. 47
Now that we've constrained our StackView to all four sides, 48
the next thing to do is to configure the stack. 49
Now, notice when you drop three elements that are roughly vertically on top of each other inside a StackView, 50
it'll automatically choose the vertical axis. 51
Now, the next thing we're going to do is we're going to change the distribution to fill equally because 52
we want all three of these views that are contained in my stack to have equal heights along the vertical 53
axis. 54
And as soon as I do that, you'll notice some more errors will go away, and you'll know how to layout these 55
three elements even if it's in a horizontal orientation. 56
Notice how it's avoiding all of the safe areas. 57
Meanwhile it's dividing the height evenly between all three containers. 58
So now that we've specified our stack, it makes it so much easier to align these other elements. 59
So our Roll button, for example, can now be horizontally and vertically aligned in its container which 60
is, of course, now the bottom view rather than this one. 61
So let's go ahead and add those two constraints. 62
And it gets put in the middle. 63
Now, as a challenge, I want you to put these two dice views in a horizontal container, so that they are 64
equally aligned to each other horizontally. So pause the video and try to complete that challenge. 65
Okay. 66
So as we did before, we select these two things, and then we go ahead and embed them in a StackView 67
and because they're roughly next to each other on the horizontal axis, they automatically get placed 68
in a horizontal StackView. 69
And now we can select our stack and make it centered in the middle container. 70
You can also adjust the spacing between the elements in the stacks. 71
So, for example, our vertical stack, if you wanted to have more spacing, say, let's change it to 30, then 72
you could have these elements spaced further apart. 73
But in our case, I actually want the spacing to be minimal, just enough so we can actually see the edges 74
of each of the containers, but I don't want them to have a lot of distance away from each other, so that 75
when we go into the horizontal, there's enough space to go around. 76
Now, for our horizontal stack, I'm going to change the spacing to about 50 to keep them a little bit closer 77
together. 78
And once you're done with using these containers, because we're only using them for layout, we don't actually 79
want it to look like this in our final app, we can go ahead and select these container views and change 80
the background to default or see through 81
and now, therefore, layouts, but then no longer obscuring our background. Now, the final thing 82
I want to show you is notice how our Roll button has been collapsed, so that it's very small, and fits 83
precisely the size of the text that's inside. 84
And this is because we've added alignment, so center, horizontally, and vertically, in its container, 85
but we haven't specified any sort of size constraints. 86
So by default, it resize itself to fit its contents. 87
So that means that if I had a little bit more text in here, then it will actually make it larger. 88
But if we wanted a little bit of space around the text, then we would actually have to add our own width 89
constraint, so we can specify a custom width and even a custom height if we so wish. 90
So I'm gonna change the width to a hundred and the height to 50, and now I'm gonna add my constraints. 91
But notice that as soon as I added the width constraint, I get a warning here and the warning tells me 92
that there's a problem with Auto Layout because I have a Fixed width constraint. 93
And if we go over here, you can see that it tells us this problem in a little bit more detail. 94
The width is set to always be a hundred, but what if we had more text in there? 95
What if we had a longer piece of text that was being rendered? 96
Well, then it will clip the text, 97
right? 98
It won't show the entire line. 99
So this is what it's trying to warn us about. 100
And there's a couple of ways of fixing this. 101
So if we click on this triangle, you can see we can either remove the constraint which will resize our 102
label to the size of the content or we can set the constraint width being a hundred to being greater 103
than 100. 104
So this allows the label to extend if there's more text or we can set it to greater than the minimum 105
width, 106
so to make sure the button doesn't shrink below the minimum size. 107
So I'm going to select this one and click Confirm. 108
And now it's going to say that it should always be greater or equal to 100. 109
So it means that if I didn't have a lot of text in here, let's return it back to our previous Roll text, 110
then it's going to make it a hundred. 111
But if we had more text in there, then it's going to resize it to fit the text which is exactly what we 112
want. 113
So now we've learned about constraints, namely alignment and pinning constraints , as well as StackViews, 114
vertical, and horizontal stacks, and also these modifiers such as the greater than or equal, or less than 115
or equal. 116
And I think you're ready for a challenge. Head over to the next lesson where we've got a challenge for 117
you to test your understanding of Auto Layout and you're going to apply all of these things to a new 118
app and see how well you've understood what we've talked about. 119
Have fun on the challenge. 120
And I'll see you on the next module.