0
1
00:00:00,120 --> 00:00:08,610
The next thing to tackle is, of course, our logo, and we want it to be centered in the screen in all orientations
1

2
00:00:08,700 --> 00:00:10,140
and device sizes.
2

3
00:00:10,170 --> 00:00:16,500
So let's first bring it to the middle where we want it, so we can see these margin lines pop up.
3

4
00:00:16,500 --> 00:00:21,250
And now that it's bang in the middle we have two options, right?
4

5
00:00:21,270 --> 00:00:29,280
We could simply go ahead and do what we learned before which is where we select it and add the Constraints
5

6
00:00:29,310 --> 00:00:34,440
so that it's pinned to the edges of the superview.
6

7
00:00:34,470 --> 00:00:37,680
But this is not going to look very good
7

8
00:00:37,680 --> 00:00:46,080
when we turn to landscape, because unable to have 300 from the top and 300 from the bottom. Because now
8

9
00:00:46,080 --> 00:00:49,820
that the phone is in landscape, there isn't so much vertical space.
9

10
00:00:50,460 --> 00:00:56,130
So let's hit command Zed to undo all of those Constraints.
10

11
00:00:56,130 --> 00:01:00,310
So we're now left with our pre-logo without any Constraints.
11

12
00:01:00,330 --> 00:01:07,110
Instead, let's go ahead and click on the alignment button here and align it to be horizontally in the
12

13
00:01:07,110 --> 00:01:09,690
container and vertically in the container.
13

14
00:01:09,690 --> 00:01:12,120
So let's add those two constraints.
14

15
00:01:12,120 --> 00:01:17,560
And now when we turn to landscape, you can see it works just perfect.
15

16
00:01:17,640 --> 00:01:21,060
It behaves exactly the way we want it to.
16

17
00:01:21,120 --> 00:01:22,510
Now, that's pretty easy.
17

18
00:01:22,560 --> 00:01:27,840
And it means that we're leaving the phone to work out the size of the screen that is being rendered
18

19
00:01:27,840 --> 00:01:37,450
on and place the element in the center even if it's on an iPad or on a iPhone 4 device.
19

20
00:01:37,470 --> 00:01:44,160
So when we think about adding constraints, we can think about it in terms of pinning where we add these
20

21
00:01:44,160 --> 00:01:51,580
constraints that define the distance between our element and the containing view.
21

22
00:01:51,690 --> 00:01:59,040
And when we turn our phone, in this case, the landscape, it'll try to fit it still to the edges. But, of
22

23
00:01:59,040 --> 00:02:05,130
course, some of these will have to break because we can no longer afford 100 pixels, say, in this case
23

24
00:02:05,220 --> 00:02:10,730
from the top and 100 pixels from the bottom. There isn't that amount of vertical space anymore.
24

25
00:02:10,770 --> 00:02:17,880
The alternative to this pinning method is by using the alignment technique where we say that we want
25

26
00:02:17,880 --> 00:02:24,260
to align our button horizontally in the center of our screen as well as vertically in the center.
26

27
00:02:24,270 --> 00:02:30,500
So now when our phone turns, our button is going to forever remain in the middle.
27

28
00:02:30,540 --> 00:02:36,240
Now, we can also use a combination of these two techniques where we say that our button needs to be in
28

29
00:02:36,240 --> 00:02:43,650
the horizontal center of the phone, but it also needs to be constrained so that it's always 30 points
29

30
00:02:43,650 --> 00:02:46,370
from the bottom of the safe area.
30

31
00:02:46,380 --> 00:02:52,350
So now when our phone turns, it's going to keep all of those rules and it's going to look slightly different
31

32
00:02:52,350 --> 00:02:58,800
from before where it was just simply in the middle of the screen, but we're now using a combination of
32

33
00:02:58,830 --> 00:03:06,600
both alignments, which aligns to the center vertically or horizontally, as well as pinning, where we add
33

34
00:03:06,660 --> 00:03:15,650
a distance that our element needs to be from the edge of its containing view. So let's restore our size
34

35
00:03:15,650 --> 00:03:21,620
class to the iPhone XR and let's think about how we can use what we've just learned.
35

36
00:03:21,800 --> 00:03:26,810
Now, if we go into the object library and drag on a new label,
36

37
00:03:26,810 --> 00:03:31,920
so just below our logo, and then go ahead and style
37

38
00:03:31,970 --> 00:03:34,150
and at the label, however you want.
38

39
00:03:34,220 --> 00:03:42,170
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

40
00:03:42,170 --> 00:03:45,280
I want it to be a little bit below my logo,
40

41
00:03:45,310 --> 00:03:49,400
but in the horizontal center of the app.
41

42
00:03:49,400 --> 00:03:51,810
So now here's a challenge.
42

43
00:03:52,070 --> 00:04:00,050
Add some constraints to the label to make it centered in the horizontal axis, but make sure it's also
43

44
00:04:00,320 --> 00:04:03,780
about 30 pixels below that logo
44

45
00:04:03,920 --> 00:04:10,230
even when we turn to landscape. So pause a video and try to complete that challenge.
45

46
00:04:13,190 --> 00:04:13,530
All right.
46

47
00:04:13,560 --> 00:04:15,290
So the first part is easy.
47

48
00:04:15,360 --> 00:04:20,820
If we wanted to be horizontally aligned in the center, we simply have to click on the alignment button
48

49
00:04:21,240 --> 00:04:24,050
and click on horizontally and center.
49

50
00:04:24,270 --> 00:04:27,080
And then we add that Constraint and it's now in the middle.
50

51
00:04:27,270 --> 00:04:32,010
But now we get some errors because it doesn't know how to lay it out on the vertical axis,
51

52
00:04:32,010 --> 00:04:33,300
so should it be here,
52

53
00:04:33,300 --> 00:04:34,290
should it be here,
53

54
00:04:34,290 --> 00:04:35,070
should it be--
54

55
00:04:35,070 --> 00:04:36,510
Where should it be?
55

56
00:04:36,510 --> 00:04:45,450
Well, now we're going to use our combo move where we click on the add a Constraint menu and we set it
56

57
00:04:45,540 --> 00:04:50,340
to be 30 pixels from the app brewery logo.
57

58
00:04:50,340 --> 00:04:56,730
So let's change that to 30. And we can click on the dropdown list to make sure that we're actually putting
58

59
00:04:56,730 --> 00:05:04,260
that 30 pixels relative to the App Brewery logo, rather than the view or the safe area or something else.
59

60
00:05:04,260 --> 00:05:08,820
So now let's make sure that, again, it says 30, and then click Add a constraint.
60

61
00:05:08,960 --> 00:05:10,470
And now the errors go away.
61

62
00:05:10,500 --> 00:05:16,380
And when we turn it to landscape, it'll still be in the center horizontally, but it'll be 30 pixels below
62

63
00:05:16,380 --> 00:05:24,850
the logo. So we've now learned about the two main type of rules that we can set or Constraints which
63

64
00:05:24,880 --> 00:05:32,430
are the Alignment Constraints, as well as the pinning Constraints. In the next lesson,
64

65
00:05:32,440 --> 00:05:38,920
let's tackle some more complex layouts namely our Main.storyboard using some of the things that
65

66
00:05:38,920 --> 00:05:46,330
we've learned, but also creating some containers to embed our elements in, so that we don't always have
66

67
00:05:46,330 --> 00:05:52,390
to align or pin it to the super view. For all of that and more, I'll see on the next lesson.