1
00:00:09,350 --> 00:00:14,930
Building applications means that we have to build something with the user in mind so we can build symbol

2
00:00:14,930 --> 00:00:17,570
applications to very complex applications.

3
00:00:17,570 --> 00:00:25,640
Now Swifty y relies heavily on a structured way of building our user interface by breaking down our

4
00:00:25,640 --> 00:00:28,600
user interface into manageable pieces.

5
00:00:28,610 --> 00:00:33,360
That way we can compose those smaller pieces into independent views.

6
00:00:33,380 --> 00:00:34,840
What I mean by that is follow.

7
00:00:34,850 --> 00:00:37,200
So imagine we are building an Iowa application.

8
00:00:37,210 --> 00:00:43,190
We have a screen here and we want to put a logo there and we can put some sort of a text to the right

9
00:00:43,430 --> 00:00:43,790
now.

10
00:00:43,790 --> 00:00:50,660
This works fine but a better way would be to actually enclose the logo and company into what we call

11
00:00:50,960 --> 00:00:54,410
a stack Stack essentially as a container.

12
00:00:54,410 --> 00:01:01,850
That again gives us that flexibility of composing our user interfaces into smaller pieces of views that

13
00:01:01,850 --> 00:01:04,760
we can then move them around in two sort of things.

14
00:01:04,780 --> 00:01:05,200
Okay.

15
00:01:05,460 --> 00:01:09,020
Now in this case here we can see that the logo is to the left in those right.

16
00:01:09,020 --> 00:01:09,860
We have a company.

17
00:01:10,100 --> 00:01:13,260
So this is what we call the H stack.

18
00:01:13,260 --> 00:01:20,270
K H stands for horizontal meaning anything that goes inside of our H stack will always be horizontally

19
00:01:20,510 --> 00:01:21,890
laid out.

20
00:01:21,890 --> 00:01:27,740
And obviously if we have a horizontal stack that means we should also have as you guessed it we will

21
00:01:27,740 --> 00:01:30,120
have a vertical stacks with height.

22
00:01:30,140 --> 00:01:36,890
This case will be a V stack now stacks are and remain components of building complex user interfaces

23
00:01:36,890 --> 00:01:38,420
using Swifty y.

24
00:01:38,740 --> 00:01:39,090
All right.

25
00:01:39,320 --> 00:01:43,180
So we talk about stack which we talked about the horizontal stack.

26
00:01:43,190 --> 00:01:48,230
We talk about the vertical stack but there is another stack called Z stack.

27
00:01:48,800 --> 00:01:54,950
What is this stack does is it allows us to actually put things on top of each other.

28
00:01:55,010 --> 00:01:57,060
So for instance we have a view.

29
00:01:57,160 --> 00:01:57,850
It's a logo.

30
00:01:57,860 --> 00:02:05,210
We can actually overlay with a company which we can then overlay in the back with another view or a

31
00:02:05,210 --> 00:02:08,370
stack or whatever else we are trying to put on the screen.

32
00:02:08,570 --> 00:02:09,950
Now de Dios this stack.

33
00:02:09,950 --> 00:02:14,170
Is that everything that is put first will be in the back.

34
00:02:14,270 --> 00:02:18,290
Meaning the last thing that we put on the screen and let's say we have three texts that we're putting

35
00:02:18,710 --> 00:02:19,550
on top of each others.

36
00:02:19,550 --> 00:02:21,290
The first thing is going to be in the back.

37
00:02:21,290 --> 00:02:25,760
The second thing is going to be in front of the back and so forth so the last thing we added It's going

38
00:02:25,760 --> 00:02:27,110
to be in front everything.

39
00:02:27,710 --> 00:02:32,080
So there is indeed an order of whatever we putting on the screen.

40
00:02:32,120 --> 00:02:35,390
All right so let's go ahead and take a look in code so we can see the differences here.

41
00:02:35,480 --> 00:02:41,870
So back to our code editor here we last had this text Hello there and we add a few modifiers here to

42
00:02:41,870 --> 00:02:45,830
change the font to a large tidal color green and bold and so forth.

43
00:02:45,830 --> 00:02:52,100
I hope you were able to add other modifiers here ago can see what else can you do with the text.

44
00:02:52,100 --> 00:02:55,560
OK so we're talking about stacks so to create a stack it's very simple.

45
00:02:55,610 --> 00:03:02,210
Let's start with a vertical stagnancy v like this and you can see that we have the option here of the

46
00:03:02,210 --> 00:03:02,590
stack.

47
00:03:02,600 --> 00:03:07,400
Just hit enter and of course going to put inside of a coral embraces here to say that whatever it's

48
00:03:07,400 --> 00:03:12,290
inside the stack it's going to be of course vertically aligned.

49
00:03:12,320 --> 00:03:18,320
Now this will not do much and want to go ahead and run this because you're not going to see any difference

50
00:03:18,320 --> 00:03:22,030
at all because we only have one item instead of a V stack.

51
00:03:22,220 --> 00:03:27,470
However the moment we actually add another item here let's just put text because that's the easiest

52
00:03:27,470 --> 00:03:35,030
thing and I'm going to say another item like that save and run you'll notice something very cool will

53
00:03:35,090 --> 00:03:35,630
happen.

54
00:03:35,630 --> 00:03:41,600
Now we see that these two are vertical in lines meaning that now we have these stacks so everything

55
00:03:41,600 --> 00:03:47,510
we add inside of our v stack it's going to be vertically aligned so we can put as many items as we want

56
00:03:47,540 --> 00:03:50,160
as many little views as we want.

57
00:03:50,330 --> 00:03:55,820
And you will see there will always be vertically aligned or stacked.

58
00:03:55,820 --> 00:03:56,200
OK.

59
00:03:56,270 --> 00:04:01,700
Now the beauty here is that I can always because remember all of these are actually views I can always

60
00:04:01,700 --> 00:04:08,450
come down here and do some other modifiers here so I can say for instance foreground or can say background

61
00:04:08,450 --> 00:04:13,730
color I'm going to see color dot grey save and run.

62
00:04:13,730 --> 00:04:16,420
Now notice the whole background.

63
00:04:16,430 --> 00:04:17,630
It's going to be gray.

64
00:04:17,630 --> 00:04:23,090
Now notice not the whole background the whole screen but yet the background of our v stack.

65
00:04:23,240 --> 00:04:29,330
This is how you can see that indeed our v stack contains all of these text inside there.

66
00:04:29,330 --> 00:04:34,400
But the other thing we can do here is with a V stack we can actually pass a few parameters.

67
00:04:34,400 --> 00:04:35,980
Now notice the moment you hit enter.

68
00:04:36,010 --> 00:04:39,260
There's alignment I can align whatever is inside of our stack.

69
00:04:39,290 --> 00:04:43,550
Now there's a few options here for our alignment and get rid of all of this.

70
00:04:43,700 --> 00:04:49,850
If you go ahead and say dot notice it's gonna give us center leading and trailing center as the name

71
00:04:49,850 --> 00:04:53,540
implies it means everything inside of our v stack is going to be centered.

72
00:04:53,690 --> 00:04:56,720
If I can enter here and let me go ahead and get rid of spacing for now.

73
00:04:56,750 --> 00:05:02,310
Because we don't need it for now at least to focus on one at a time.

74
00:05:02,530 --> 00:05:07,240
Okay this one you can see now everything is centered whatever is inside.

75
00:05:07,240 --> 00:05:08,980
Now it's all centered.

76
00:05:09,040 --> 00:05:14,140
Now if I get rid of this again just leave it empty or just like that.

77
00:05:14,140 --> 00:05:23,350
Let's go ahead and see you notice if all shows the same thing again the reason why is because if you

78
00:05:23,350 --> 00:05:29,560
just put a v stack and pass nothing or remove these like that the default is always centered.

79
00:05:29,560 --> 00:05:33,770
So that's why if you don't put anything it's just going to put everything center.

80
00:05:33,790 --> 00:05:38,660
Now let's go back and put back what we had and we a dot center again.

81
00:05:38,710 --> 00:05:44,980
We can also pass the spacing within the items inside of our v stack so I can pass and number here I

82
00:05:44,980 --> 00:05:50,560
can say I want the spacing to be twenty three grand delete the contents like that we don't need to worry

83
00:05:50,560 --> 00:05:51,200
about that.

84
00:05:51,430 --> 00:05:55,480
And if you run notice going to be center by the spacing is going to be a little bit bigger.

85
00:05:55,480 --> 00:05:55,870
Look at that.

86
00:05:55,870 --> 00:06:01,540
Now the spacing between all of these items vertically is going to be of twenty three units or pixels.

87
00:06:01,840 --> 00:06:02,760
Let's change this.

88
00:06:02,760 --> 00:06:06,990
Two leading leading mean everything is gonna be leading to the left.

89
00:06:07,000 --> 00:06:08,620
So it's gonna move to the left.

90
00:06:08,620 --> 00:06:11,410
All these should be to the left let's say for this and give a run and see

91
00:06:14,240 --> 00:06:17,470
and while I can see now they all went to the left.

92
00:06:17,480 --> 00:06:18,980
The spacing is still the same.

93
00:06:18,980 --> 00:06:25,880
Let's change to trailing you will realize that this is the opposite of leading which means should go

94
00:06:26,060 --> 00:06:27,250
all to the right.

95
00:06:27,310 --> 00:06:27,700
Angela.

96
00:06:27,740 --> 00:06:29,140
Everything went to the right.

97
00:06:29,150 --> 00:06:33,570
Now if we change this let me go ahead perhaps and copy this.

98
00:06:34,100 --> 00:06:35,110
Do something like that.

99
00:06:35,130 --> 00:06:38,700
I'm gonna go ahead and comment this out so we'll have that.

100
00:06:39,410 --> 00:06:40,810
Gonna change some things here.

101
00:06:40,820 --> 00:06:42,750
Let's changes to horizontal stack.

102
00:06:42,770 --> 00:06:46,560
Notice we're gonna have a little problem here because when it comes to horizontal we're not going have

103
00:06:46,670 --> 00:06:50,890
any trailing or heading because everything is going to be horizontally aligned.

104
00:06:51,170 --> 00:06:53,150
So we can't do that.

105
00:06:53,180 --> 00:06:55,590
So but I can come down here and do Dot.

106
00:06:55,610 --> 00:06:59,710
Again you can see there's no bottom center for sticks by its line.

107
00:06:59,730 --> 00:07:01,660
Last text baseline and top.

108
00:07:01,860 --> 00:07:04,910
Okay so if I go to bottom what you think is going to happen.

109
00:07:04,910 --> 00:07:08,470
Let's save this and run.

110
00:07:08,470 --> 00:07:08,890
There we go.

111
00:07:08,900 --> 00:07:13,300
We can see now they're all horizontally aligned and to the bottom.

112
00:07:13,300 --> 00:07:13,830
Very good.

113
00:07:13,840 --> 00:07:18,320
And I'm going to change the spacing to about twelve so everything is all right.

114
00:07:18,320 --> 00:07:21,850
Less changes to top you notice now.

115
00:07:22,000 --> 00:07:24,250
They all move to the top there.

116
00:07:24,250 --> 00:07:26,230
Now you can see that this helo there.

117
00:07:26,230 --> 00:07:28,640
It's kind of indifferent in a way.

118
00:07:28,720 --> 00:07:29,440
Not really.

119
00:07:29,440 --> 00:07:34,390
Let's change this to a let's see that let's say none.

120
00:07:34,390 --> 00:07:35,380
Just to see.

121
00:07:35,380 --> 00:07:38,050
So it's not big or small.

122
00:07:38,050 --> 00:07:44,440
Now you notice that the moment that happened a few things were made the Hello there to have a standard

123
00:07:44,650 --> 00:07:46,810
font size not as big or anything.

124
00:07:46,810 --> 00:07:51,310
You notice now that our H stack is just using the space that we need.

125
00:07:51,310 --> 00:07:57,280
Meaning it got smaller because we don't need to have the bigger space if everything is fit in in a smaller

126
00:07:57,430 --> 00:07:57,850
space.

127
00:07:58,000 --> 00:07:59,740
So this is actually a good thing.

128
00:07:59,830 --> 00:08:05,770
They d that everything that we put instead of using a face can only use enough space or can only use

129
00:08:06,040 --> 00:08:07,860
the space that it needs.

130
00:08:07,930 --> 00:08:10,150
You can force things if you want to do so.

131
00:08:10,150 --> 00:08:15,760
So if you change as you saw defined to be a little bigger force the whole space will also tried to accommodate

132
00:08:16,000 --> 00:08:17,010
everything which is good.

133
00:08:17,020 --> 00:08:19,150
So everything is flexible.

134
00:08:19,150 --> 00:08:26,890
OK let's go to center and see what's going to happen so at center of course everything is going to be

135
00:08:26,890 --> 00:08:27,610
in the middle.

136
00:08:27,610 --> 00:08:30,610
But look something here for less changes to about 45.

137
00:08:30,610 --> 00:08:33,790
So make the spacing in between real a big what do you think is going to happen.

138
00:08:35,240 --> 00:08:35,690
Look at that.

139
00:08:35,720 --> 00:08:37,060
It's growing right.

140
00:08:37,070 --> 00:08:41,240
So now have these 45 spaces in between now the other thing we can do.

141
00:08:41,240 --> 00:08:44,080
We can make our H stack a little bit larger.

142
00:08:44,090 --> 00:08:45,260
We can actually do that.

143
00:08:45,260 --> 00:08:46,630
Remember you can go outside.

144
00:08:46,640 --> 00:08:48,740
This is outside of our H stack.

145
00:08:48,740 --> 00:08:51,640
We are now trying to access a different modifier.

146
00:08:51,690 --> 00:08:59,120
And when I call a frame modifier a frame modifier allows us to frame or change the size of our stack.

147
00:08:59,120 --> 00:09:04,970
So in this case here we can pass a height width and height and let's start with width of about let's

148
00:09:04,970 --> 00:09:10,440
say 300 in a height of also about 240.

149
00:09:10,580 --> 00:09:13,760
Let's save and run.

150
00:09:13,860 --> 00:09:14,310
Look at that.

151
00:09:14,610 --> 00:09:19,470
So what happened here is that the with is a little bit smaller because we say 300.

152
00:09:19,560 --> 00:09:24,480
If we don't put the width what happens is that it takes enough space.

153
00:09:24,660 --> 00:09:28,290
So all these alignments top bottom center and so forth.

154
00:09:28,290 --> 00:09:33,870
They become more apparent when we actually have say a view such an image and and we have tax when we

155
00:09:33,870 --> 00:09:39,350
have a circle and so forth then we can be able to actually see how everything fits together.

156
00:09:39,390 --> 00:09:43,290
But hopefully by now we understand a little bit more about h stack and V stack.

157
00:09:43,290 --> 00:09:49,560
Try to understand by changing certain values here and see what happened on the screen here.

158
00:09:49,560 --> 00:09:49,830
All right.

159
00:09:49,830 --> 00:09:50,220
Perfect.

160
00:09:50,550 --> 00:09:53,340
So in the next video we're going to tap into the z index.