Hi, Alex here from rebeloper.com and welcome back to the channel and welcome back to
this awesome tutorial series on Auto Layout with Tiny Constraints all of this
of course in Swift 5. So without further ado let's jump right into today's episode.
Okay, in the previous episode we have learned
about centering our views. Center Y and center X to our constrainables so other
views and if you scroll a little bit down in this file you will see that we
have an extension for our view with set hugging priority for axis at
compression resistance priority for axis. We will talk about that maybe in a later
video. But for now let us just jump into some awesome new territory and that is
stacks and if you don't know what I'm talking about here and you really are
confused what I'm talking about go ahead and take a look at the whole
playlist we are talking about auto layout with tiny constraints and till
up to this moment we have learned how to anchor views to the super view and
anchor views to themselves. So we are just moving views and within views of course.
But today we are going to talk about this awesome extension called
stack and as you can see it takes in an array of views and you can set it access
of course it can be vertical or horizontal and you can set optionally
witdh or in the height and you can of course that spacing and this current
default spacing is zero which is okay. So let's see all of this in action so you
can see the power of this stack extension and you might be asking well
we have UIStackView why do we want to use this. Well it's kind of
easier to use this stack extension and it is fitting right into the
tiny constraints ecosystem. So let's do that today and let's go back to our root
view controller setup views swift file and as you can see I have already added
some more views and I'm adding all of this, all of them into our view. So we are
adding them as sub views. We are not adding arrange abuse or anything like that
as you would do on the UIStackView. So let's start coding so first of all let's
arrange our view 1 and that will be our container, okay.
So view 1 and I will edge this to our super view and I'm going to use this
with excluding in sets and so on and if you again don't know what this really
means go ahead and take a look at the previous videos I go into that how to
use these and you will see the link down below to the whole playlist. So it is the
super view excluding bottom, insets I will add in here some tiny insets
because yeah I don't want to make them stretch all the way to the side and for
the top I will add in 12 left well bottom zero because yeah that is
what we are excluding and 12 for the right and relation priority and is
active can be emitted because I am pretty fine with the default values of
course I will talk about this later in a next video. So I will demystify all of
these. But for now let's add using safe area true and for this to show up
with still need to add a height for our view and yeah if you are brand-new to
this video that is how easy it is to add view and I will not have this as a
height of 300. So two lines of code remained adding this to the view.
There we go. We have our view1 edge to the super view with insets and with a height of
300, okay. Now that's that. Now we want to add
let's see here view 2 and view 3 as a stack. So let's do that let's type in
view 1 and stack and we will use this long one. So stack views access width
height and spacing so we can get custom too, if not you may omit it because you can
use the default values of course and let's add in here our array. So that is
view 2 and view 3. There we go. Access let it be by default this is
vertical I'm just adding here vertical just so you can see and the width and
the height let's omit this so let's add in a nil
here for now because let's just see how all of this looks like. And spacing let's
add in here or rather yet 12 it's or 16 that's a magic number that I like to use.
Okay and let's see how this looks like and as you can see we do have this spacing
added here but all we can see is this blue view 1 and the orange one if we go
back to our root view controller it's basically view 3. So we can't see
view 2 that is the green one. So what goes here. Well the issue here is that
while we do have our vertical axis selected that means that the width of
our view 2 and view 3 are already set but height isn't set. So let's set in
here our height. So CGSize or rather yet it's not the CGSize is just a float.
So let's add in here 100 for the size, okay. Let's see what happens here.
Okay and yeah now you can see the green one and you can see the background or
the container view view one with the blue one with a spacing of sixteen and
this one the free view 3 isn't 100 and as you can see here we
have some errors and it basically says that the height of our master tiny
constrains the view one is 300 as you can see we have said that correctly and
it's trying to add all of these views with a height of 100 and yeah that is
basically not correct because we want to feel everything here and we still are
missing 100 minus the spacing and that is 84 and we are breaking one height and that
is the height of our view 3. So yep that's what this means. So what we
could do here is basically let's change the spacing to 10 because it's much
easier to calculate so we have 10 here and let's have this 310
and let's get 150 for the height. So yeah that will make sense
because we have two 150 height views and one spacing of 10. So that is how it goes
but yeah maybe you don't want to have this height set as 150 for both of these
views. So let's set this back to nil or we could just simply delete it.
It doesn't really matter and now before we stack these views or I believe it could
be added even without later on or the other line.
Let's add our height specifically for view 2 and let's see let this be 100
and let the view of the height of view 3 be 200. Let see height 200. So let's not
break any constraints here. Of course you may break it and auto layout we try to
get everything that you want to do but it's
always a good idea to not have these braking constraints in your log ,okay.
So yeah that is how you can set separate heights. But what if there's a lot of
calculations and I don't really know how to calculate this maybe it's dynamic.
What do we do here? Let's say let's set this to 500 by default and let's build
and run and we do want to have this to be 200 and of course you will see that
again we have these issues and it's spanning all the way down. Now a neat
trick here is that you could add an empty UI view and that will spend that
extra length, okay. So let's build run and you will see how the view 3 is
actually now 200 in height. Now another thing that we could do is basically be
sure that we have heights for all of the views that are inside the container, view 1
and simply omit this and let me just delete view this empty view and let's a
build and run and see that yeah it's actually self sizing and this and just
for fun and you can see the blue one is not there. If I add in here let's just
add back here our UI view so we can get that spacing because yeah this is a view
and its height will be zero because it's an empty view but we still have this
spacing and just for fun let's add in here 500. Let's see how that looks and
see that it is yes basically it is auto sizing. Yeah, really cool isn't it.
So I would rather delete this and have this too let's say 200, okay. And yeah this is
for vertical stacks and of course we still have this view 5 and view 4 so
what are we going to do? Well we are going to stack
them horizontally and let me just build run again so we get this height with 200.
So we are going to create a horizontal stack and yeah let's just add it.
So under or anywhere else as a matter of fact let's add our view 3 a stack. So stack
and those stack, that stack will be containing view 4 and view 5, okay.
Axis should be horizontal of course and of course you can add vertical inside the
vertical but yeah it doesn't really make sense maybe if you want to change
spacing. Yeah, that is a good idea. Let me just show you how that goes and then we
will move on to the horizontal. So here we have our vertical space stack and
with the width nil and height yeah let's add in a height of let's say
100 rather yet let's just add in 50 because yeah that will and let's add in
here a spacing of 50, not 50 again 20. So double of the spacing that we have here.
Let's build and run and see how this looks like, okay. So what have we
achieved here? Well basically we have and let me just move this a little bit down
so you can see the code too. So we have our blue container view that is view one
and it has a spacing of 10 and it has two views the green one and the orange
one and the orange one also contains two views this purple one and red one but
the spacing here is 50, so 20 sorry. So it's 20 and yap that is basically it.
So yeah and of course because we set the height of 50 and this and we didn't
add any UI views and then the red one let me just add in our UI view
and show you what we are going to fix. This red one is stretching all the way
down to the size of our orange view. So let's hit command R again and now we
should really see that we have this height, okay. There we go.
Pretty nice and now we have these two 50s. Okay and that is how you can manage
spacing when you don't want to have the same spacing all over the place.
So now let us just delete all of these and finally talk about
horizontal axis. So it will be a horizontal axis and I will set the width
now to 50 and the height should be nil because yeah it should
auto resize according to view 3's height and yeah the spacing should be 20
that is okay with me. So let's build and run and see how this
looks like and he will basically see that the red view is stretching all the
way up here and it is bringing some constraints let me just see what is
wrong here. Yes, we are not setting a view here. So let's see UIView. There we go.
And let's hit command R and hopefully we are getting rid of all of these and I
believe we didn't. So again let's set this to nil and lets set all of our
views heights programmatically with the height. So view 4 dot wait sorry we are
going to set the width to 50 and view 5 dot width let set this to 100, okay.
Let's see how this works.
And again all of this works, yep. We should use this width and height only
when we want to have this stack as with the same width / high elements, okay.
And yeah that is it basically we now know everything that we need to know.
Just one thought here. What if we wanted to have this here. So let's add this aligned
to the right so view 4 and view 5 should be aligned to the right and that
is what we have to do. Pretty straightforward and all of this with
just a few lines of code. Now that was super awesome. Now I hope you enjoyed
this video of tiny constraints with stack. I know this is kind of a hidden
feature of tiny constraints but it is really really powerful. Now I hope you
enjoyed this one if you did go ahead and give it a thumbs up, subscribe to the
channel and hit that notification bell to get notified of new videos
as they do come out because in the next video we are going to talk about
animations. So that will be a really interesting topic. And as usual I will
see you in the next one.