0
1
00:00:00,210 --> 00:00:00,510
All right.
1

2
00:00:00,540 --> 00:00:07,740
So now that we've learned about the basic components of Constraints namely alignment and pinning, we're
2

3
00:00:07,740 --> 00:00:13,170
ready to move on to are more complex interface which is our Main.storyboard.
3

4
00:00:13,680 --> 00:00:20,260
So if we head over there, you can see that we've got the same kind of green background and that we want
4

5
00:00:20,260 --> 00:00:22,590
it to cover all four sides.
5

6
00:00:22,590 --> 00:00:28,620
So as the first challenge, to review what you learned in the last lesson, add some Constraints to that
6

7
00:00:28,620 --> 00:00:29,400
background,
7

8
00:00:29,400 --> 00:00:36,930
green felt, so that even when it's in landscape, it covers all four sides without stopping at any of the
8

9
00:00:36,930 --> 00:00:42,840
safe areas. Pause the video and try to complete this challenge.
9

10
00:00:43,050 --> 00:00:43,400
All right.
10

11
00:00:43,400 --> 00:00:49,760
So just as before, we're going to select the item that we want to add a Constraint to, either in the document
11

12
00:00:49,790 --> 00:00:54,570
outline or on the canvas depending on how cluttered it is.
12

13
00:00:54,680 --> 00:01:00,860
And then we're going to go and set our Constraints to be zero from all four sides and we can click on
13

14
00:01:00,860 --> 00:01:09,300
the dropdown to make sure that it actually is selecting the view, rather than the safe areas. And now we've
14

15
00:01:09,300 --> 00:01:13,550
got zero from all four sides of the superview here.
15

16
00:01:13,710 --> 00:01:19,490
And now we can add our constraints and we can check in landscape, as well as portrait,
16

17
00:01:20,010 --> 00:01:26,280
and also we can inspect our constraints in more detail by clicking on it and looking at the Attribute
17

18
00:01:26,280 --> 00:01:26,880
Inspector.
18

19
00:01:27,510 --> 00:01:29,280
So that's pretty easy,
19

20
00:01:29,280 --> 00:01:31,050
but the next part gets harder,
20

21
00:01:31,530 --> 00:01:40,290
because how are we going to layout all four of these elements on screen in this layout and make sure
21

22
00:01:40,290 --> 00:01:44,280
that it looks decent in the landscape orientation as well.
22

23
00:01:44,430 --> 00:01:49,830
Because the problem here is that, firstly, we can't simply just use alignment because we don't actually
23

24
00:01:49,830 --> 00:01:53,670
have anything that's right in the middle of our screen.
24

25
00:01:53,690 --> 00:01:55,830
There's nothing that exists here.
25

26
00:01:56,070 --> 00:02:02,910
And if we wanted to use pinning, well, we don't actually have enough vertical space to be able to pin
26

27
00:02:03,000 --> 00:02:04,710
all of our elements together.
27

28
00:02:05,250 --> 00:02:07,490
So what can we do instead?
28

29
00:02:07,500 --> 00:02:18,150
Well, we could use some containers to split up the screen into three equal parts, and then we can embed
29

30
00:02:18,270 --> 00:02:22,320
each of these elements inside its own container.
30

31
00:02:22,320 --> 00:02:29,910
So now the superview to this particular logo will be this purple container and we can set it to be
31

32
00:02:30,030 --> 00:02:34,870
vertically and horizontally aligned in the middle of that container.
32

33
00:02:34,980 --> 00:02:37,200
So let's give that a go.
33

34
00:02:37,200 --> 00:02:45,780
Let's start by creating a container. To do that, all we need to do is go to our Object library and locate a
34

35
00:02:45,900 --> 00:02:52,530
view element. Now, because there's a lot of things that are called views, Table View, Image View, Progress
35

36
00:02:52,530 --> 00:02:59,550
View, I find it's usually easier to type UI View which is actually the underlying element here.
36

37
00:02:59,790 --> 00:03:03,000
And it's simply just an empty view.
37

38
00:03:03,000 --> 00:03:07,100
And in this case, we're using it to layout some of the sub views,
38

39
00:03:07,140 --> 00:03:10,030
so something that we're going to put inside this container.
39

40
00:03:10,260 --> 00:03:16,920
Let's click and drag it onto our screen and I'm going to put it somewhere near the top here, and then
40

41
00:03:16,920 --> 00:03:19,090
we're going to drag it out.
41

42
00:03:19,200 --> 00:03:26,910
And now what we need to embed our Dicee logo inside this new view. And to do that, I'm going to click and select
42

43
00:03:26,910 --> 00:03:35,370
my Dicee logo, and then drag it, so that this little circle here is indented below the view.
43

44
00:03:35,610 --> 00:03:42,270
So this shows that it's going inside, whereas when it's alongside it, it means it'll be just parallel.
44

45
00:03:42,270 --> 00:03:48,240
So we know that the layout of our view goes from the bottom to the top.
45

46
00:03:48,300 --> 00:03:50,030
So this is at the very top,
46

47
00:03:50,160 --> 00:03:52,830
and then it's this at the next level than this,
47

48
00:03:52,980 --> 00:03:55,140
and this is at the very bottom.
48

49
00:03:55,200 --> 00:03:59,940
So our eye is looking at this direction. We could change
49

50
00:03:59,960 --> 00:04:05,270
where our Dicee logo lives relative to that new view.
50

51
00:04:05,270 --> 00:04:08,320
But in our case, we actually want it to be inside the view,
51

52
00:04:08,350 --> 00:04:12,710
so we need it to be embedded, so we get this effect.
52

53
00:04:12,710 --> 00:04:19,070
So now that we've embedded our Dicee logo in its own view, let's go ahead and embed these two dice image
53

54
00:04:19,070 --> 00:04:21,830
views in its own container in the middle.
54

55
00:04:21,840 --> 00:04:24,630
I'm gonna use a different way of embedding.
55

56
00:04:24,710 --> 00:04:31,140
I'm gonna go to Editor and then I'm gonna go to Embed In, and I'm going to select a View.
56

57
00:04:31,190 --> 00:04:38,360
So now the two dice image views have been embedded in its own view and it's exactly the same thing as
57

58
00:04:38,360 --> 00:04:39,420
what we did before,
58

59
00:04:39,500 --> 00:04:42,670
but it's perhaps a little bit easier, a little bit quicker.
59

60
00:04:42,740 --> 00:04:47,450
And finally, for the Roll button, I'm going to show you a third way of embedding in a view which is the
60

61
00:04:47,450 --> 00:04:50,330
click on this button, and then Embed, and View.
61

62
00:04:50,810 --> 00:04:56,540
So depending on which method you remember or you find the easiest, then you can choose whichever way
62

63
00:04:56,570 --> 00:04:59,730
you want to do it, but they all do the same thing.
63

64
00:04:59,750 --> 00:05:03,790
So now we have three views and they're all called View,
64

65
00:05:03,800 --> 00:05:06,010
so it's a little bit confusing.
65

66
00:05:06,170 --> 00:05:12,890
So we can go ahead and select it, and then click on the Identity Inspector and give it a label, so we
66

67
00:05:12,890 --> 00:05:21,500
can call this one the MiddleView because it's right in the middle, and we can call this one the Top
67

68
00:05:21,500 --> 00:05:28,980
View, and maybe this one the Bottom View.
68

69
00:05:29,210 --> 00:05:36,470
So now we've got all three on screen and we can collapse them and you can rearrange them if you want
69

70
00:05:36,650 --> 00:05:42,560
to make sure that it says Top Bottom and Middle, although, be careful that you don't accidentally embed
70

71
00:05:42,590 --> 00:05:44,480
one of the views in another one.
71

72
00:05:44,510 --> 00:05:50,030
So by the end you should have all of them aligned to the same indentation showing that none of these
72

73
00:05:50,030 --> 00:05:54,890
are inside each other, but they are all inside the superview.
73

74
00:05:54,890 --> 00:06:03,150
And now we have all three containers which can now be used to layout these subviews or these items
74

75
00:06:03,150 --> 00:06:04,310
that are inside it.
75

76
00:06:04,910 --> 00:06:14,420
So for example, our Dicee logo can now be aligned to the horizontal and vertical center of that Top view.
76

77
00:06:14,420 --> 00:06:17,710
But notice that as soon as we do that, we get an error.
77

78
00:06:17,750 --> 00:06:20,740
If we click on this button, it tells us what the problems are.
78

79
00:06:21,210 --> 00:06:28,040
And it's because even though we've defined the constraints for the logo, well, the location of this container
79

80
00:06:28,040 --> 00:06:34,880
view is kind of ambiguous. It doesn't--we don't know where to put it for its X position or for its Y position
80

81
00:06:35,240 --> 00:06:41,270
because it's currently kind of just hanging out in the middle without any Constraints of its own.
81

82
00:06:41,270 --> 00:06:44,190
So how can we give it some constraints?
82

83
00:06:44,210 --> 00:06:47,750
Well, to explore that and more, we'll see you on the next lesson.