Let's change our size class back to the default which is the iPhone XR and we want to fix our problem 1
where our background image gets cut off when the orientation changes. 2
So how can we do this? 3
Well, essentially, we need this background to resize itself, so that all four edges of that image is tied 4
to the four edges of our screen, so that the top edge here is always sticking 0 pixels to the top of whatever 5
orientation the screens in. The right is always sticking 0 pixels to the right of the screen. 6
The bottom is zero from the bottom and the left is zero from the left. But, of course, we can't just adjust 7
our image like so 8
because as soon as we flip back to the other orientation it stays exactly the same. 9
So we need to add some rules or Constraints onto this image view. And that is what we're gonna tackle 10
in this lesson. To begin, let's make sure that you also have the same size class selected, the iPhone XR, 11
and that it's in portrait mode, 12
and then we're going to select our AppBrewery Background image view, and we're going to resize it so 13
that it fits the entire screen of our iPhone XR. And then we're going to make sure that our logo is 14
bang in the middle of our screen. 15
So this is kind of our desired look at least in portrait. 16
From here, we're going to add some constraints to our AppBreweryBackground, so that even when it's in 17
landscape or on a different device, it still is touching all four sides of the phone and it's stretching 18
to fit the entire screen. 19
And then we're gonna go and click on this button right here, 20
the little square button which is going to allow us to add a Constraint. And the Constraint that we 21
want to add is to specify a zero pixel distance from the top of the phone, zero from the left, zero from the 22
right, and zero from the bottom. 23
So we're going to click on these red lines and turn them from these dash lines to solid lines to activate 24
those four Constraints, and then we're simply going to click on this button. 25
Now, if you don't see zero in each of these boxes, then go back and make sure that your background is 26
placed exactly like so, 27
and it's a fitting the entire screen. 28
Once you're done, go ahead and click Add 4 Constraints. 29
And now we go into our landscape orientation. 30
You can see that our background image view is now more or less stretching to fit the entire space. But 31
there's a couple of problems here. 32
Firstly, why is it that our background is not going all the way to the left and right? What's going on 33
there? 34
Well, we can actually explore our Constraints and figure out what's gone wrong with them by expanding 35
our Constraints here and we can see what these constraints or rules are doing to our User Interface. 36
So the first one is a rule that says the right side or the trailing side, as highlighted here, of our 37
AppBreweryBackground should be equal to the safe areas trailing. 38
So this means that when our phone goes into landscape, the safe area is the area which normally contains 39
either the battery information or the signal information of the phone. And at the bottom of the iPhone 40
XR, it's the home button essentially, it's the part which you swipe to go back to the home area. 41
So often if we're creating an app that has buttons on it, then we don't want it to be in these safe areas. 42
So we'll define rules that keeps it out of these areas. 43
But in our case, because it's just a background, we want our background to actually cover the entire screen, 44
rather than have this sort of blocky effect. 45
So we actually don't want it to be set to the safe areas trailing 46
and in fact, we want it to be set to the superview. 47
So this is our current element. The superview is the view that contains this element. And the superview 48
that's at the base of our View Controller is always going to be covering the entire screen. 49
So we want to define this constraint. Rather than relative to the safe area, 50
we're going to define it to the superview. So this one right here. And we're going to say that it should 51
be equal to the superview's trailing. 52
So now our AppBreweryBackground, the trailing, the right side edge, is now fitted to be zero pixels from the 53
trailing edge of our view. 54
So that's the one that's highlighted in blue right here. 55
And if we now go into landscape, you can see it's now fitting right to the edge of that right side or 56
the trailing side. 57
So let's go ahead and fix the same thing with our leading view. 58
So you can see we've got our AppBreweryBackground leading set to be equal to the safe area leading. 59
So let's go ahead and change that from safe area to the superview. 60
And now when we go into landscape, you can see that it looks perfect as it is. Now 61
you can see that each of these rules when you click on them you can view them in more detail in the 62
attribute pane. And you can see the rules that have been set up here that set the Constraint between 63
a first item and a second item and the relationship between them. 64
So for example, if I wanted my AppBreweryBackground app to stop at the safe area, then I would change this 65
to my safe area and change that constant to zero. 66
So the top of my image view is now zero from the top of my safe area. 67
And if you want to see where the safe area actually is, you can simply click on it here, and you can see 68
where it stops on the top and the bottom, and also in the landscape orientation as well. 69
Let's restore that Constraint back to what it used to be 70
which is where the top is equal to the top of the superview. 71
And let's look at another thing. 72
If we take a look at the trailing, so the one on the right, it's currently set to the superview's trailing, 73
but we can also set it to be relative to the margin. 74
So the margin is that thing that pops up when we have an element that we drag to the right or to the 75
left. 76
You can see that blue line that pops up. And often when you have a button or when you have a logo, you 77
don't want it to be right to the edge because it's hard to read. 78
And instead, you want it to have a little bit of a margin to the edges. 79
So in that case, you can define this to be relative to the margin of the superview's trailing area. 80
So if I select that, then change my constant to zero and hit enter, 81
you can see it's now limiting my background to that margin. 82
So these are some of the things that you can do with your Constraints. And when you add them using the 83
menu here, they don't always get added the way that you think it will, 84
you can have a little bit more control over it if you click on the dropdown list. 85
So, for example, if I select my logo here and I click on here, then you can see that I can define it relative 86
to the safe area or to the view, and I can change the distance or the value from those areas. So our background 87
is now pretty much sorted. And if we take a look at all the different device sizes all the way from small 88
ones to large ones, it's basically adapting it to fit the entire screen background. 89
And even when we change the orientation, it still looks pretty good. 90
The next thing to do is to figure out how we can layout our logo. And to do that, we need to learn about 91
alignment. And that is what we're gonna do on the next lesson, 92
so I'll see you there.