The next thing to tackle is, of course, our logo, and we want it to be centered in the screen in all orientations 1
and device sizes. 2
So let's first bring it to the middle where we want it, so we can see these margin lines pop up. 3
And now that it's bang in the middle we have two options, right? 4
We could simply go ahead and do what we learned before which is where we select it and add the Constraints 5
so that it's pinned to the edges of the superview. 6
But this is not going to look very good 7
when we turn to landscape, because unable to have 300 from the top and 300 from the bottom. Because now 8
that the phone is in landscape, there isn't so much vertical space. 9
So let's hit command Zed to undo all of those Constraints. 10
So we're now left with our pre-logo without any Constraints. 11
Instead, let's go ahead and click on the alignment button here and align it to be horizontally in the 12
container and vertically in the container. 13
So let's add those two constraints. 14
And now when we turn to landscape, you can see it works just perfect. 15
It behaves exactly the way we want it to. 16
Now, that's pretty easy. 17
And it means that we're leaving the phone to work out the size of the screen that is being rendered 18
on and place the element in the center even if it's on an iPad or on a iPhone 4 device. 19
So when we think about adding constraints, we can think about it in terms of pinning where we add these 20
constraints that define the distance between our element and the containing view. 21
And when we turn our phone, in this case, the landscape, it'll try to fit it still to the edges. But, of 22
course, some of these will have to break because we can no longer afford 100 pixels, say, in this case 23
from the top and 100 pixels from the bottom. There isn't that amount of vertical space anymore. 24
The alternative to this pinning method is by using the alignment technique where we say that we want 25
to align our button horizontally in the center of our screen as well as vertically in the center. 26
So now when our phone turns, our button is going to forever remain in the middle. 27
Now, we can also use a combination of these two techniques where we say that our button needs to be in 28
the horizontal center of the phone, but it also needs to be constrained so that it's always 30 points 29
from the bottom of the safe area. 30
So now when our phone turns, it's going to keep all of those rules and it's going to look slightly different 31
from before where it was just simply in the middle of the screen, but we're now using a combination of 32
both alignments, which aligns to the center vertically or horizontally, as well as pinning, where we add 33
a distance that our element needs to be from the edge of its containing view. So let's restore our size 34
class to the iPhone XR and let's think about how we can use what we've just learned. 35
Now, if we go into the object library and drag on a new label, 36
so just below our logo, and then go ahead and style 37
and at the label, however you want. 38
In my case, I'm simply going to change it to a company tag line, and now I'm gonna change its color and 39
I want it to be a little bit below my logo, 40
but in the horizontal center of the app. 41
So now here's a challenge. 42
Add some constraints to the label to make it centered in the horizontal axis, but make sure it's also 43
about 30 pixels below that logo 44
even when we turn to landscape. So pause a video and try to complete that challenge. 45
All right. 46
So the first part is easy. 47
If we wanted to be horizontally aligned in the center, we simply have to click on the alignment button 48
and click on horizontally and center. 49
And then we add that Constraint and it's now in the middle. 50
But now we get some errors because it doesn't know how to lay it out on the vertical axis, 51
so should it be here, 52
should it be here, 53
should it be-- 54
Where should it be? 55
Well, now we're going to use our combo move where we click on the add a Constraint menu and we set it 56
to be 30 pixels from the app brewery logo. 57
So let's change that to 30. And we can click on the dropdown list to make sure that we're actually putting 58
that 30 pixels relative to the App Brewery logo, rather than the view or the safe area or something else. 59
So now let's make sure that, again, it says 30, and then click Add a constraint. 60
And now the errors go away. 61
And when we turn it to landscape, it'll still be in the center horizontally, but it'll be 30 pixels below 62
the logo. So we've now learned about the two main type of rules that we can set or Constraints which 63
are the Alignment Constraints, as well as the pinning Constraints. In the next lesson, 64
let's tackle some more complex layouts namely our Main.storyboard using some of the things that 65
we've learned, but also creating some containers to embed our elements in, so that we don't always have 66
to align or pin it to the super view. For all of that and more, I'll see on the next lesson.