Hi, Alex here from rebeloper.com and welcome back to this awesome tutorial series on
Tiny Constraints where you can learn how you can use auto layout the super simple
way of course all of this in Swift 5. So let's jump right into today's lesson.
Okay! In the previous one we have talked about constraining our view to our super
view and we have covered everything there, but now we have crone up to
constrain more than what super view and let me just take a look at the tiny
constraints dot swift file and if you take a look at it you will see that it
starts off with center. Now we have already learned center in super view and
this is kind of the same and it has in view and this is a constrainable.
A constrainable is basically a UIView that can constrain too and yeah
the constrainable in center super view was the basically the super view
and now we can center our current view to another view and that is not the
super view. Here we have the offset priority and is active as usual and all
of these are have, do have a default value. So we can omit them if we wanted to.
So let's take a look at how this works in action. So we are really tired
of this view zero. So if you recall on the first lesson I have added some more
views and I will use this view1 and view2 for these purposes, okay. So for that I
will just add our view one as a sub view to our view and and the next
one too. So view dot
add sub view, view 2. There we go. And I will just delete all of this, okay.
So what do we want to do. Well we want to add in our view 1 and then our view 2
should center to the, should be added to the view 1 center.
So first we are going to add our view 1 and yeah let's add that to our
super view like so. So view one constrain or rather yet not constrain that's.
Let me just show you how this works with the center in super view and yep set in
super view. So we are going to center this into the super view and if you
recall in the previous lessons we need to add a width and a height. Width and
that will be let's say 300 and view 1 dot height again 300, okay. This is goes a
little bit further I will go deeper into width and height later on, okay. So let's see.
Let's build and run and see how this looks. So basically we are doing old
stuff that we have already learned and you can see here I have added some
awesome rounded corners and edges. So we have not edges borders. So now we can see
where these borders are, okay. Yeah that is it. Now comes the fun part we are
going to add this view 2 the center of view 1 and yeah maybe let's add this
as a super view to our view 1 because why not and we will see if this works
well it should. Okay! So next up let me just type
in here view 2 and center in and we are not
going to use centring. So we are going to use center in and we are going
to add a constraint but now that again is any view and we are going to use view 1.
And let's add our width and height real quickly width let it be 100 and view 2
height again 100 and let's hit command R so we can see how this looks
and I'm pretty sure you already know what we will have here, there we go.
And yeah it is advisable to add the view 2 upon the view 1. So you too should
be a sub view of you 1 because yeah we are constraining to it so yeah why not.
Okay! And that is it center in view 1. Of course we have some other options
here and if you follow the long this tutorial series you can know that we
have center in let's see here we have our constrainable 1 and we have a
constrainable, so yeah that is view 1 and we can have our offset. So that
would be a CG point and let me offset this let's say X should be zero and Y
should be let's say minus 50 and the priority is always required I don't mess
around with priority required is okay. You should have other priorities if
let's say we have animations or some strange facts, okay. It's active let's delete
that because we want to have that as active. So let's build run and see
that we should be having this pumped up by 50 and yeah that is all to it.
Okay, let's go back to our tiny constraints file and see what do we have
next and that is edges and if you recall from the super view that will edge the
current view to the edges of the parent view. So let's delete all of this and
type in edges not to super view because that is super view that's the other one.
So let's edge this to our view 1 and yeah that will be straightforward we
will see a green box there. That's it. We don't see anything from the parent view
and that is the blue one. So let me just take a look at the other options and the
constrainable is view 1 and let's exclude the bottom and let's add in here some insets
and again if you don't know what these tiny edge insets are you will see
in just a moment but you can take a look at the previous videos basically they
are having some insects to the edge and top 12, left let's say 32, bottom zero
because that's what we are excluding right. Let's add in here zero so we
cannot so we can see that again it is pinned to the right of view one.
Relationship prior, relation, sorry retention priority and is active we can
omit those safely and again because this is excluding the bottom we need to have
a height for this view. So view 2 dot height and let's have this get 100, okay.
Let's hit command R and see what we have done. There we go. We have edged this to
view 1 rather yet let me just drag this so you can see the code better.
So top is 12, left is 32, right is 0, bottom 0 of course you are not edging it to it and
height is 100, really safe forward. So let's move on here we have our edges and
next up we have our size, okay. Till now we have added our size with width
and height but now we can learn how to add it with a CG size and let's see.
Size and we have this size with the CG size or a size with relation priority or
is active. I will just tap in here because yeah we are we can simply omit
all of this relation priority is active. I told relationship again kind of funny.
Okay! So let's see size with the size and that is CG size, okay and here we have
our width and height I will choose the one with the CG float and let's see
that'll be 200 by 200 and for this to work so we can see it on the screen
let's center it. So what we have learned today center in constrainable and that
is view 1. So we should see this 200 by 200 in the center, yep pretty
straightforward. So let's move even further. So size to view and this is size
relative to a view and we could choose anything but we are just any view but we
are just going to choose view 1 and here we have a multiplier insets
relation priority and is active. So let's see this in action. So size and here it
is to constrainable and yeah I will just choose this one because all of the
others can be safely emitted I am pretty satisfied with the default values.
So constrainable and that is view or rather yet let's
have this with a multiplier because it will just simply fill everything. So size
to constrainable that is our view 1 and let's add it here 0.5 as a
multiplier maybe some insets and that is a CGSize. So CGSize let's see
what should we have here 20 by 20 or let's see 25 by 50 so we can 50 by 50 so we
can see what the insets are relationship priority is active let's
delete all of them, okay. And yep it should be in the center with this size
so let's see here. So yeah there we have it we have half of
the view and I don't know why this insets didn't really work we can leave
it out, it's not that important, okay. Let's see
if I'm correct in this will be size to the view 1. There we go. It's filling all
of this up and let's see if I select here let's say 9 and delete this inset
There we go. Now it is pretty understandable. Okay! So that is size to a constrainable.
Let's move forward. Size 2 and a region to constrainable. Now that is
again pretty straightforward if you saw my other region to super view
explanation then it this will be pretty self-explanatory let's see I will leave
the size so this should be I will set it to 5 or half of the view 1 width and
Let's see origin to constrainable, okay. And yeah we will use view 1 and
let's add in here some tiny edge insets if you omit all of this they will be set to
default zero so I just want to show you. So it will pan view 2 to the origin of
view 1 and that's I did here 32 left 60 button 0 right 0 because it doesn't
really matter and all of these are great as the default values. So let's build and
run and we should see that green box pinned a little bit to the top and as
you can see top 32, left 16 and yeah that is it. That is origin and if you
want to use that you can do so and width we are going to talk about with in the
next video because it's a whole lot of code to write and to explain and I
believe that that will wrap it up for today. I hope you enjoyed this video if
you did go ahead and give it a thumbs up, subscribe to the channel and hit that
notification bell because you know if you subscribe it doesn't really matter you
will get these new videos on your feed or you will not get it, it depends but if
you hit that notification bell you will be notified when new videos do come out
and as usual I will see you in the next one.