Hey, guys. 1
In this video, I'm going to walk you through the solution for the Calculator Layout Challenge, so we know 2
that this is what we're aiming for, right? 3
This is what it should look like on portrait 4
and this is what it should look like in landscape. 5
Notice a couple of things here. 6
Firstly, we've got nicely stacked rows and columns, 7
right? 8
So it makes it a perfect opportunity to use these StackViews that we've learned about. The other things 9
are a couple of small details. 10
Notice how 11
between each of these buttons, there's a very, very small gap in between. 12
So we're going to have to take into account of that when we create our layout. 13
And finally, also notice how this zero inside what seems to be a label is actually indented from the 14
right. 15
It's not glued to the right edge. 16
There's a little bit of space there. 17
So let's think about some of these things and try and layout our interface. 18
So, of course, we're gonna go to our Main.storyboard. 19
And here you should see that I've already created, essentially, the User Interface that you are aiming 20
for. 21
So this is very handy because it means that everything is really pretty much pixel perfect, whereas in 22
reality, you probably wouldn't get access to a file that's already been laid out for you, 23
so you might end up with things that are a little bit more misplaced and, you know, sized kind of differently. 24
And it's your job to use these rules in these constraints to bring it together and make it look the 25
way you want it to. 26
So the first thing we notice about our User Interface is that it's really regular. 27
There's a lot of rows and a lot of columns. 28
So let's start off by creating some StackViews. 29
So this seems like a natural stack, right? 30
So if I'm holding down my command key and I'm selecting all four of these buttons, then I can simply 31
go ahead and embed them into a StackView like this. 32
And because they are roughly along the same horizontal line, they get embedded into this nice, neat, little 33
horizontal stack. 34
Now, don't worry if at this point you see it's completely messed up the user interface. 35
The point is not to keep it pixel perfect every step of the way because as we change these rules and 36
as we apply new constraints and new StackViews, it's obviously going to evolve and change. 37
All that matters is that the final thing looks like this. 38
And in the process, we're going to be messing it up even more than this. 39
So now that I've created one horizontal stack, it kind of seems to make sense that if I have one row 40
here, one row here, one row here, 41
row here, row here, row here. 42
So I have five rows of buttons here. 43
Now, I'm going to go ahead and embed each of these rows into a StackView. 44
And now you should end up with five stack views. 45
We've got five horizontal stacks and this label at the very top. 46
Now, if we go ahead and select each of the five stack views, as well as the label at the top, and drop 47
all of these into a StackView, then it's going to create a vertical stack. Now, our interface is pretty 48
much completely messed up, but that's not a problem, it's now laid out in roughly the relationship that 49
we want. 50
So all we have to do now is to add some constraints on top. 51
Firstly, our vertical StackView which contains all of the rows is gonna need to go to all the edges. 52
So we're gonna put 0, 0, 0, 0, so that it gets stretched and fit to the entire size of the screen. Now, the 53
next thing to address is some of the properties of this stock view. 54
So, for example, notice how at the moment the spacing is massive between each of these rows. 55
It's like 81. 56
Instead, we only want that small space that you see here, right, 57
which let's just call it one pixel and let's see how that looks. 58
So let's go ahead and change the spacing to one pixel. And you can see that this part now looks pretty 59
much like the outcome that we want. 60
But for some reason, there's a big gap here between these top parts and the bottom parts. 61
So how can we make it distributed more evenly? 62
Well, you might remember that we can change the distribution of the stack, so that it's filled equally 63
like so. 64
And the alignment instead of making it leading so everything all squished up to the left, we can also 65
change it to Fill, so that it fills the entire space that it's got access to which is the entire width 66
of the screen. 67
Now, at the moment, if we look at each of these rows they look a little bit messed up, right? 68
So how can we make them look like the way that we saw in the README file, like this, evenly distributed 69
and filled to take up the entire space? 70
Well, we, of course, have to change some of the properties for each of these StackViews. 71
So let's start with the top one 72
and we're going to change the alignment from top to fill. 73
We're going to change the distribution to fill equally so that they take up an even amount of space 74
along that horizontal row. 75
So that's now looking pretty good, right? 76
And if we want apply the same things to the rest of the StackViews, then all we have to do is select 77
them by holding down shift. 78
And now we've got all four stack views which we're going to change the alignment to film and the distribution 79
to fill equally. 80
So we're getting pretty close to what we've got in the README file, right? 81
So now the only one that looks pretty weird is this bottom one because in the README file in the example, 82
we kind of had the zero button taking up twice as much space as these two. 83
So there are certain ways that you can set this or the simplest way is actually to just embed these 84
two into their own StackView. 85
So now if we look at this bottom row, we have two items which are meant to fill equally. So this width 86
and this width is meant to be equal. 87
And then if we go into this second horizontal stack view, and we make it also fill equally, then we get 88
the effect that we want which is where the zero takes up as much space as these two buttons, and everything 89
is now more or less aligned. 90
Now if you're noticing that on the iPhone 11 or the X series, canvasses and it's not going all the way 91
down to the bottom, the reason for this is because for our main vertical stack view, we set the constraints 92
so that they would go to all four edges. But remember that on the iPhone X series, there's actually a 93
sort of home button of sorts here where the user can swipe up, so that they can go back to the home screen. 94
So this area in black here is known as the safe area. But if you wanted the bottom of this stack view 95
to go all the way to the edge, then you can double click on this and change that from safe area bottom 96
to superview bottom, and change that constant to zero so that there's no distance between them, and then 97
you end up with this kind of effect. 98
Now, it depends on you really because, usually, it's not a good idea to put User Interactive Elements into 99
the safe area because it makes it really confusing when the user is trying to dismiss your app going to 100
home but, instead, they end up pressing on zero or the dot. 101
So I'm going to go ahead and select that constraint and change it back so that the stack view bottom 102
is equal to the safe area bottom with zero pixel distance, like this. And I'm going to show you how to 103
address the next thing which is, 104
notice how our zero here is right up to the edge here. 105
There is literally no distance between it and the right edge. But in the README file, you can see that 106
there's clearly a big gap here, 107
so it looks a little bit better. 108
Now how can we do this? 109
Well, at the moment, we've got our label inside our stack view and it is being asked to fill the entire 110
width 111
right? 112
That's what this Alignment Fill tells it to do. 113
But if we wanted this to have a little bit of a gap but none of these other rows to have a gap, then 114
we have to embed this label into its own view. 115
Now, it's kind of inside a container. 116
And let me just go ahead and make the background of this container see-through, so that it doesn't actually 117
affect our label. And then our label that's inside the view can then be asked to have some constraints. 118
So, for example, we could set the constraints, so that it's zero from the top, zero from the bottom, and 119
then 20 from the left and 20 from the right. 120
And now if we add our constraints, you can see that we're now getting that little indentation there inside 121
our stack view. And that's it. 122
That's the solution to this challenge. 123
If you struggled with this challenge, I recommend playing around with this interface seeing if you can 124
remove the stack views, create new stack views, maybe switch things around a bit, and just make it a few times 125
and until you really understand what's going on here and what each of these settings and properties 126
do. And just mess around with it. There's nothing that can really break. 127
So change it up to change, the alignment, change the distribution, change the axis. 128
See what happens until you get a good grasp of how this works.