Building applications means that we have to build something with the user in mind so we can build symbol
applications to very complex applications.
Now Swifty y relies heavily on a structured way of building our user interface by breaking down our
user interface into manageable pieces.
That way we can compose those smaller pieces into independent views.
What I mean by that is follow.
So imagine we are building an Iowa application.
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
now.
This works fine but a better way would be to actually enclose the logo and company into what we call
a stack Stack essentially as a container.
That again gives us that flexibility of composing our user interfaces into smaller pieces of views that
we can then move them around in two sort of things.
Okay.
Now in this case here we can see that the logo is to the left in those right.
We have a company.
So this is what we call the H stack.
K H stands for horizontal meaning anything that goes inside of our H stack will always be horizontally
laid out.
And obviously if we have a horizontal stack that means we should also have as you guessed it we will
have a vertical stacks with height.
This case will be a V stack now stacks are and remain components of building complex user interfaces
using Swifty y.
All right.
So we talk about stack which we talked about the horizontal stack.
We talk about the vertical stack but there is another stack called Z stack.
What is this stack does is it allows us to actually put things on top of each other.
So for instance we have a view.
It's a logo.
We can actually overlay with a company which we can then overlay in the back with another view or a
stack or whatever else we are trying to put on the screen.
Now de Dios this stack.
Is that everything that is put first will be in the back.
Meaning the last thing that we put on the screen and let's say we have three texts that we're putting
on top of each others.
The first thing is going to be in the back.
The second thing is going to be in front of the back and so forth so the last thing we added It's going
to be in front everything.
So there is indeed an order of whatever we putting on the screen.
All right so let's go ahead and take a look in code so we can see the differences here.
So back to our code editor here we last had this text Hello there and we add a few modifiers here to
change the font to a large tidal color green and bold and so forth.
I hope you were able to add other modifiers here ago can see what else can you do with the text.
OK so we're talking about stacks so to create a stack it's very simple.
Let's start with a vertical stagnancy v like this and you can see that we have the option here of the
stack.
Just hit enter and of course going to put inside of a coral embraces here to say that whatever it's
inside the stack it's going to be of course vertically aligned.
Now this will not do much and want to go ahead and run this because you're not going to see any difference
at all because we only have one item instead of a V stack.
However the moment we actually add another item here let's just put text because that's the easiest
thing and I'm going to say another item like that save and run you'll notice something very cool will
happen.
Now we see that these two are vertical in lines meaning that now we have these stacks so everything
we add inside of our v stack it's going to be vertically aligned so we can put as many items as we want
as many little views as we want.
And you will see there will always be vertically aligned or stacked.
OK.
Now the beauty here is that I can always because remember all of these are actually views I can always
come down here and do some other modifiers here so I can say for instance foreground or can say background
color I'm going to see color dot grey save and run.
Now notice the whole background.
It's going to be gray.
Now notice not the whole background the whole screen but yet the background of our v stack.
This is how you can see that indeed our v stack contains all of these text inside there.
But the other thing we can do here is with a V stack we can actually pass a few parameters.
Now notice the moment you hit enter.
There's alignment I can align whatever is inside of our stack.
Now there's a few options here for our alignment and get rid of all of this.
If you go ahead and say dot notice it's gonna give us center leading and trailing center as the name
implies it means everything inside of our v stack is going to be centered.
If I can enter here and let me go ahead and get rid of spacing for now.
Because we don't need it for now at least to focus on one at a time.
Okay this one you can see now everything is centered whatever is inside.
Now it's all centered.
Now if I get rid of this again just leave it empty or just like that.
Let's go ahead and see you notice if all shows the same thing again the reason why is because if you
just put a v stack and pass nothing or remove these like that the default is always centered.
So that's why if you don't put anything it's just going to put everything center.
Now let's go back and put back what we had and we a dot center again.
We can also pass the spacing within the items inside of our v stack so I can pass and number here I
can say I want the spacing to be twenty three grand delete the contents like that we don't need to worry
about that.
And if you run notice going to be center by the spacing is going to be a little bit bigger.
Look at that.
Now the spacing between all of these items vertically is going to be of twenty three units or pixels.
Let's change this.
Two leading leading mean everything is gonna be leading to the left.
So it's gonna move to the left.
All these should be to the left let's say for this and give a run and see
and while I can see now they all went to the left.
The spacing is still the same.
Let's change to trailing you will realize that this is the opposite of leading which means should go
all to the right.
Angela.
Everything went to the right.
Now if we change this let me go ahead perhaps and copy this.
Do something like that.
I'm gonna go ahead and comment this out so we'll have that.
Gonna change some things here.
Let's changes to horizontal stack.
Notice we're gonna have a little problem here because when it comes to horizontal we're not going have
any trailing or heading because everything is going to be horizontally aligned.
So we can't do that.
So but I can come down here and do Dot.
Again you can see there's no bottom center for sticks by its line.
Last text baseline and top.
Okay so if I go to bottom what you think is going to happen.
Let's save this and run.
There we go.
We can see now they're all horizontally aligned and to the bottom.
Very good.
And I'm going to change the spacing to about twelve so everything is all right.
Less changes to top you notice now.
They all move to the top there.
Now you can see that this helo there.
It's kind of indifferent in a way.
Not really.
Let's change this to a let's see that let's say none.
Just to see.
So it's not big or small.
Now you notice that the moment that happened a few things were made the Hello there to have a standard
font size not as big or anything.
You notice now that our H stack is just using the space that we need.
Meaning it got smaller because we don't need to have the bigger space if everything is fit in in a smaller
space.
So this is actually a good thing.
They d that everything that we put instead of using a face can only use enough space or can only use
the space that it needs.
You can force things if you want to do so.
So if you change as you saw defined to be a little bigger force the whole space will also tried to accommodate
everything which is good.
So everything is flexible.
OK let's go to center and see what's going to happen so at center of course everything is going to be
in the middle.
But look something here for less changes to about 45.
So make the spacing in between real a big what do you think is going to happen.
Look at that.
It's growing right.
So now have these 45 spaces in between now the other thing we can do.
We can make our H stack a little bit larger.
We can actually do that.
Remember you can go outside.
This is outside of our H stack.
We are now trying to access a different modifier.
And when I call a frame modifier a frame modifier allows us to frame or change the size of our stack.
So in this case here we can pass a height width and height and let's start with width of about let's
say 300 in a height of also about 240.
Let's save and run.
Look at that.
So what happened here is that the with is a little bit smaller because we say 300.
If we don't put the width what happens is that it takes enough space.
So all these alignments top bottom center and so forth.
They become more apparent when we actually have say a view such an image and and we have tax when we
have a circle and so forth then we can be able to actually see how everything fits together.
But hopefully by now we understand a little bit more about h stack and V stack.
Try to understand by changing certain values here and see what happened on the screen here.
All right.
Perfect.
So in the next video we're going to tap into the z index.