0
1
00:00:00,570 --> 00:00:01,170
Hey, guys.
1

2
00:00:01,260 --> 00:00:07,560
In this video, I'm going to walk you through the solution for the Calculator Layout Challenge, so we know
2

3
00:00:07,560 --> 00:00:09,890
that this is what we're aiming for, right?
3

4
00:00:09,900 --> 00:00:12,630
This is what it should look like on portrait
4

5
00:00:12,630 --> 00:00:16,170
and this is what it should look like in landscape.
5

6
00:00:16,170 --> 00:00:17,670
Notice a couple of things here.
6

7
00:00:17,970 --> 00:00:22,700
Firstly, we've got nicely stacked rows and columns,
7

8
00:00:22,720 --> 00:00:23,060
right?
8

9
00:00:23,070 --> 00:00:29,490
So it makes it a perfect opportunity to use these StackViews that we've learned about. The other things
9

10
00:00:29,520 --> 00:00:31,530
are a couple of small details.
10

11
00:00:31,530 --> 00:00:32,280
Notice how
11

12
00:00:32,280 --> 00:00:37,500
between each of these buttons, there's a very, very small gap in between.
12

13
00:00:37,560 --> 00:00:41,420
So we're going to have to take into account of that when we create our layout.
13

14
00:00:41,940 --> 00:00:49,410
And finally, also notice how this zero inside what seems to be a label is actually indented from the
14

15
00:00:49,410 --> 00:00:49,740
right.
15

16
00:00:49,740 --> 00:00:51,810
It's not glued to the right edge.
16

17
00:00:51,810 --> 00:00:53,790
There's a little bit of space there.
17

18
00:00:53,940 --> 00:00:59,160
So let's think about some of these things and try and layout our interface.
18

19
00:00:59,160 --> 00:01:02,270
So, of course, we're gonna go to our Main.storyboard.
19

20
00:01:02,460 --> 00:01:08,790
And here you should see that I've already created, essentially, the User Interface that you are aiming
20

21
00:01:08,790 --> 00:01:09,120
for.
21

22
00:01:09,960 --> 00:01:15,870
So this is very handy because it means that everything is really pretty much pixel perfect, whereas in
22

23
00:01:15,870 --> 00:01:21,210
reality, you probably wouldn't get access to a file that's already been laid out for you,
23

24
00:01:21,750 --> 00:01:29,470
so you might end up with things that are a little bit more misplaced and, you know, sized kind of differently.
24

25
00:01:29,550 --> 00:01:34,830
And it's your job to use these rules in these constraints to bring it together and make it look the
25

26
00:01:34,830 --> 00:01:36,690
way you want it to.
26

27
00:01:36,690 --> 00:01:41,160
So the first thing we notice about our User Interface is that it's really regular.
27

28
00:01:41,160 --> 00:01:44,460
There's a lot of rows and a lot of columns.
28

29
00:01:44,520 --> 00:01:49,020
So let's start off by creating some StackViews.
29

30
00:01:49,020 --> 00:01:51,600
So this seems like a natural stack, right?
30

31
00:01:51,720 --> 00:01:57,330
So if I'm holding down my command key and I'm selecting all four of these buttons, then I can simply
31

32
00:01:57,330 --> 00:02:02,040
go ahead and embed them into a StackView like this.
32

33
00:02:02,040 --> 00:02:09,180
And because they are roughly along the same horizontal line, they get embedded into this nice, neat, little
33

34
00:02:09,180 --> 00:02:10,370
horizontal stack.
34

35
00:02:10,830 --> 00:02:15,420
Now, don't worry if at this point you see it's completely messed up the user interface.
35

36
00:02:15,420 --> 00:02:21,270
The point is not to keep it pixel perfect every step of the way because as we change these rules and
36

37
00:02:21,270 --> 00:02:26,820
as we apply new constraints and new StackViews, it's obviously going to evolve and change.
37

38
00:02:26,970 --> 00:02:30,840
All that matters is that the final thing looks like this.
38

39
00:02:30,840 --> 00:02:34,970
And in the process, we're going to be messing it up even more than this.
39

40
00:02:34,980 --> 00:02:40,590
So now that I've created one horizontal stack, it kind of seems to make sense that if I have one row
40

41
00:02:40,590 --> 00:02:43,380
here, one row here, one row here,
41

42
00:02:43,380 --> 00:02:44,400
row here, row here, row here.
42

43
00:02:44,490 --> 00:02:48,300
So I have five rows of buttons here.
43

44
00:02:48,450 --> 00:02:53,250
Now, I'm going to go ahead and embed each of these rows into a StackView.
44

45
00:02:59,700 --> 00:03:02,960
And now you should end up with five stack views.
45

46
00:03:03,000 --> 00:03:07,890
We've got five horizontal stacks and this label at the very top.
46

47
00:03:08,010 --> 00:03:13,260
Now, if we go ahead and select each of the five stack views, as well as the label at the top, and drop
47

48
00:03:13,260 --> 00:03:20,890
all of these into a StackView, then it's going to create a vertical stack. Now, our interface is pretty
48

49
00:03:20,890 --> 00:03:26,800
much completely messed up, but that's not a problem, it's now laid out in roughly the relationship that
49

50
00:03:26,800 --> 00:03:27,690
we want.
50

51
00:03:27,700 --> 00:03:31,840
So all we have to do now is to add some constraints on top.
51

52
00:03:31,840 --> 00:03:38,560
Firstly, our vertical StackView which contains all of the rows is gonna need to go to all the edges.
52

53
00:03:38,560 --> 00:03:47,970
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

54
00:03:47,970 --> 00:03:52,780
next thing to address is some of the properties of this stock view.
54

55
00:03:52,800 --> 00:03:58,320
So, for example, notice how at the moment the spacing is massive between each of these rows.
55

56
00:03:58,320 --> 00:04:00,240
It's like 81.
56

57
00:04:00,270 --> 00:04:05,080
Instead, we only want that small space that you see here, right,
57

58
00:04:05,130 --> 00:04:09,360
which let's just call it one pixel and let's see how that looks.
58

59
00:04:09,390 --> 00:04:15,030
So let's go ahead and change the spacing to one pixel. And you can see that this part now looks pretty
59

60
00:04:15,030 --> 00:04:17,600
much like the outcome that we want.
60

61
00:04:17,760 --> 00:04:23,160
But for some reason, there's a big gap here between these top parts and the bottom parts.
61

62
00:04:23,190 --> 00:04:26,040
So how can we make it distributed more evenly?
62

63
00:04:26,280 --> 00:04:32,670
Well, you might remember that we can change the distribution of the stack, so that it's filled equally
63

64
00:04:33,000 --> 00:04:34,080
like so.
64

65
00:04:34,260 --> 00:04:40,530
And the alignment instead of making it leading so everything all squished up to the left, we can also
65

66
00:04:40,530 --> 00:04:47,190
change it to Fill, so that it fills the entire space that it's got access to which is the entire width
66

67
00:04:47,580 --> 00:04:50,090
of the screen.
67

68
00:04:50,090 --> 00:04:56,420
Now, at the moment, if we look at each of these rows they look a little bit messed up, right?
68

69
00:04:56,430 --> 00:05:04,950
So how can we make them look like the way that we saw in the README file, like this, evenly distributed
69

70
00:05:05,370 --> 00:05:09,090
and filled to take up the entire space?
70

71
00:05:09,090 --> 00:05:13,190
Well, we, of course, have to change some of the properties for each of these StackViews.
71

72
00:05:13,200 --> 00:05:15,030
So let's start with the top one
72

73
00:05:15,300 --> 00:05:19,490
and we're going to change the alignment from top to fill.
73

74
00:05:19,500 --> 00:05:25,650
We're going to change the distribution to fill equally so that they take up an even amount of space
74

75
00:05:25,740 --> 00:05:27,450
along that horizontal row.
75

76
00:05:27,990 --> 00:05:29,910
So that's now looking pretty good, right?
76

77
00:05:30,510 --> 00:05:35,730
And if we want apply the same things to the rest of the StackViews, then all we have to do is select
77

78
00:05:35,730 --> 00:05:38,030
them by holding down shift.
78

79
00:05:38,160 --> 00:05:43,440
And now we've got all four stack views which we're going to change the alignment to film and the distribution
79

80
00:05:43,440 --> 00:05:45,660
to fill equally.
80

81
00:05:45,870 --> 00:05:50,880
So we're getting pretty close to what we've got in the README file, right?
81

82
00:05:50,910 --> 00:05:58,230
So now the only one that looks pretty weird is this bottom one because in the README file in the example,
82

83
00:05:58,560 --> 00:06:03,570
we kind of had the zero button taking up twice as much space as these two.
83

84
00:06:03,570 --> 00:06:10,260
So there are certain ways that you can set this or the simplest way is actually to just embed these
84

85
00:06:10,260 --> 00:06:13,180
two into their own StackView.
85

86
00:06:13,770 --> 00:06:21,900
So now if we look at this bottom row, we have two items which are meant to fill equally. So this width
86

87
00:06:22,050 --> 00:06:24,660
and this width is meant to be equal.
87

88
00:06:25,200 --> 00:06:31,770
And then if we go into this second horizontal stack view, and we make it also fill equally, then we get
88

89
00:06:31,770 --> 00:06:38,610
the effect that we want which is where the zero takes up as much space as these two buttons, and everything
89

90
00:06:38,610 --> 00:06:40,940
is now more or less aligned.
90

91
00:06:40,950 --> 00:06:48,690
Now if you're noticing that on the iPhone 11 or the X series, canvasses and it's not going all the way
91

92
00:06:48,690 --> 00:06:56,370
down to the bottom, the reason for this is because for our main vertical stack view, we set the constraints
92

93
00:06:56,760 --> 00:07:02,460
so that they would go to all four edges. But remember that on the iPhone X series, there's actually a
93

94
00:07:02,700 --> 00:07:09,390
sort of home button of sorts here where the user can swipe up, so that they can go back to the home screen.
94

95
00:07:09,450 --> 00:07:16,620
So this area in black here is known as the safe area. But if you wanted the bottom of this stack view
95

96
00:07:16,830 --> 00:07:23,640
to go all the way to the edge, then you can double click on this and change that from safe area bottom
96

97
00:07:23,880 --> 00:07:30,930
to superview bottom, and change that constant to zero so that there's no distance between them, and then
97

98
00:07:30,930 --> 00:07:33,450
you end up with this kind of effect.
98

99
00:07:33,450 --> 00:07:40,350
Now, it depends on you really because, usually, it's not a good idea to put User Interactive Elements into
99

100
00:07:40,350 --> 00:07:46,170
the safe area because it makes it really confusing when the user is trying to dismiss your app going to
100

101
00:07:46,170 --> 00:07:49,350
home but, instead, they end up pressing on zero or the dot.
101

102
00:07:49,980 --> 00:07:55,830
So I'm going to go ahead and select that constraint and change it back so that the stack view bottom
102

103
00:07:56,220 --> 00:08:03,690
is equal to the safe area bottom with zero pixel distance, like this. And I'm going to show you how to
103

104
00:08:03,690 --> 00:08:05,830
address the next thing which is,
104

105
00:08:05,850 --> 00:08:10,050
notice how our zero here is right up to the edge here.
105

106
00:08:10,050 --> 00:08:15,900
There is literally no distance between it and the right edge. But in the README file, you can see that
106

107
00:08:15,900 --> 00:08:18,320
there's clearly a big gap here,
107

108
00:08:18,390 --> 00:08:20,280
so it looks a little bit better.
108

109
00:08:20,490 --> 00:08:21,990
Now how can we do this?
109

110
00:08:22,260 --> 00:08:31,380
Well, at the moment, we've got our label inside our stack view and it is being asked to fill the entire
110

111
00:08:31,380 --> 00:08:31,890
width
111

112
00:08:31,890 --> 00:08:32,670
right?
112

113
00:08:32,670 --> 00:08:36,120
That's what this Alignment Fill tells it to do.
113

114
00:08:36,120 --> 00:08:41,940
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

115
00:08:42,030 --> 00:08:46,790
we have to embed this label into its own view.
115

116
00:08:46,790 --> 00:08:49,870
Now, it's kind of inside a container.
116

117
00:08:50,010 --> 00:08:55,010
And let me just go ahead and make the background of this container see-through, so that it doesn't actually
117

118
00:08:55,010 --> 00:09:03,160
affect our label. And then our label that's inside the view can then be asked to have some constraints.
118

119
00:09:03,170 --> 00:09:08,750
So, for example, we could set the constraints, so that it's zero from the top, zero from the bottom, and
119

120
00:09:08,750 --> 00:09:12,290
then 20 from the left and 20 from the right.
120

121
00:09:12,350 --> 00:09:18,380
And now if we add our constraints, you can see that we're now getting that little indentation there inside
121

122
00:09:18,440 --> 00:09:20,900
our stack view. And that's it.
122

123
00:09:20,900 --> 00:09:23,940
That's the solution to this challenge.
123

124
00:09:24,110 --> 00:09:30,320
If you struggled with this challenge, I recommend playing around with this interface seeing if you can
124

125
00:09:30,380 --> 00:09:37,040
remove the stack views, create new stack views, maybe switch things around a bit, and just make it a few times
125

126
00:09:37,040 --> 00:09:42,830
and until you really understand what's going on here and what each of these settings and properties
126

127
00:09:42,830 --> 00:09:47,010
do. And just mess around with it. There's nothing that can really break.
127

128
00:09:47,060 --> 00:09:51,310
So change it up to change, the alignment, change the distribution, change the axis.
128

129
00:09:51,440 --> 00:09:56,270
See what happens until you get a good grasp of how this works.