Hi, Alex here from rebeloper.com and welcome back to this awesome tutorial
series on tiny constraints and today we are going to go further with super views
auto layout of course all of it in Swift 5 so without further ado let's jump right into the code.
Okay, everybody we have learned how to edge our view to
our super view. We have learned how to edge to the leading, trailing, top, bottom
super view and we have learned along the way some UI add constraints and some
offsets, okay. Today we are going to go even further into our auto layout slash super
view journey and we are going to talk about some advanced properties of our
tiny constraints slash super view, okay. So what I mean by that
if we go into our tiny constraints plus super view dot swift file. You can see we
have already talked about the leading to super view and trailing to super view
function and if we scroll a little bit down you will see that we have this
horizontal to super view and it has these insets of course, the relation priority
is active and using safe area. So let's take a look at this horizontal to super view.
Let's go back and I will leave this top and bottom super view and let's see
you 0 and horizontal to super view. Let's just add this here and yeah lets us
build and run and see that we will have the screen all covered in blue and
yeah. That is it. Let me just restart this with command arrow and there we go, okay.
And yeah we have got written of two lines and that is nice.
So what do we have here super view we have our inset, using safe area.
Let's see I will just use this tiny insets.
Tiny edge insets and let's see here. Top zero left let's say 12 good because
this is horizontal and let's see button zero again and 12 for the right too and
yeah let's see here. Let's use our safe area. So true I already discussed this in
the previous episode but let's just take a look at how this looks, okay. There we go.
We have these 12 inset and of course top
to super view is basically to them all all of the way top and we have this
using safe area. So let's see if we rotate the device if we do get the safe area.
There we go, yap and this is just 12 her and 12 there. Awesome stuff, okay.
The same goes for a vertical to super view. So let's just delete all of these top to
super view and bottom to super view and let's use view zero and vertical to super
view. I will add in here some insets to like tiny edges.
Okay! There we go and now we have to add for top 32 left is zero because it's
not there so we are not using it 32 to bottom, right zero and yep let me just
delete all of this because these are set to default and they are, okay. Using safe
area. Let's use true again. So let's hit command R and rebuild our project and we
will see that now on the top we have 32 to the bottom we have 32 and of course
we have our safe area here and yep for the other one
these are responsible. So let me rotate this and back here as you can see awesome
stuff, okay. And yeah that is horizontal to super
view and vertical to super view. Let's move forward.
Okay! Horizontal, vertical to super view and really have some layout edges don't
worry about this these are just declarations. Okay! Safe constraint is
private so we don't have to worry about that but here we have center in super
view. Now that is a good thing because we want to center things into our views and
of course we are talking about super view so we are going to center it super view.
So let me just stop this. Lets go back and before we do that I'm just
going to skip ahead and I will add the width and height of our view but yeah we
will talk about that later. So view 0 width and as you can see it's pretty
straightforward but let's add it here 200. View zero, height and again let's
add in here 200 so we get a square and now we can use view 0 dot center in
super view, okay. There we go. Center it super view. Let's see how
this works and if you have a good imagination you already know that yeah
it is centered into the super view. Let's add 300 for our height so we can see
that actually that is our height and it works pretty straightforward let's
rotate this. Awesome! Works with auto, that is the magic of auto layout.
Okay! Let's see let me just add this back to 200 and what else do we have here.
So view and we have our offset and this is a CGPoint. So let me just show you how
this works and a priority is active using safe area. I just omit all of
these you already what this means but don't have to bother
explaining now and a CGPoint. There we go and it has an x and y value. Now if
we add in here is zero and zero pretty straightforward we will not change
anything but let's add in here let's say 100 for the x value.
Let's build in run and this is just so we can bump this to the right to y by 100.
What happens if I add in here minus 100 and you have pretty much against it
it will bump this view to the left. Okay and the same goes for y let's add in
here 100 and of course you most probably will have one of these as zero. So let's add in
here minus 100 and build and run and because you maybe just want to bump
a little bit up, a little bit down, a little bit to the right
you don't actually want to have this to have this minus 100 x and minus
100 y. Yeah and that is it center in super view pretty straightforward one
line of code and again I'm using this width and height because we need to
constrain. So we can see that view. Okay! Origin to super view. Now this is a
real interesting one. We'll leave this with height again and
let's type in origin to super view, okay. And let's see how this works and yeah if
you know what origin means it's basically here up zero and zero X zero Y
and he's adding this to the origin and it has this width and height of 200.
Pretty straightforward and let's add in here view and of course you can have our
insets you can type in tiny edge insets and let's add in here let's say to
the top let's say 32 maybe two left and that is what takes a fact again 32.
Bottom right you can set this to zero because basically it doesn't really have
effect. Relationship priority is active. Let's delete those because we want to
use the default one and using safe area. Let's add in here false for now so we
can see what happens and what happens if we set this to true and as you can see
we have at this 32 and 32 here and yeah it's kind of ugly because it's adding this
this to the notch. So let's set this to true. Hit command R to build and run
again and we will see that it handles the safe area layout count and of course
this is down here because we have our top edge inset set to 32 and let me
just rotate this so you can see how awesome it is, okay. Yeah that is origin
to super view. What is up next? Width the super view, okay. And this is again and
width and height to super view. This again a real interesting one. Let's take
a look at I will just leave the height as is and delete this width, okay.
Height is that and with two super view. Okay, yes let's see I have deleted
this parentheses. So let's see if this works. If not then maybe we will need to
add some constraints but no that is it with the super view and height it is
pretty straightforward. If we wanted to we can add in some more. So let's delete
that and let's add in some dimensions and we have here but I'm not going to
use that multiplier so set in here 0.5.
0.5, okay. Let's delete everything else and see how
this works. As you can see it's multiplying. Okay and that is pretty straightforward
we have half of the screen, okay. Let's move forward and let's take a look at
not the multiplier because that is pretty okay or maybe let's multiply this
by 0.5 so we can see the offset and the offset let it be 100. Relation
priority is active again and using safe area.
I will use this to true. You already know what that means I have covered it
multiple time. So now we are focusing on the offset and as you can see here we
have our multiplier, okay 0.5 but we have this offset by 100. There we go 100 and
the half of it. So yeah it's kind of self-explanatory
but that is why we have this tutorial series to have you deep dive into this.
And let's see let's add in here height to super view, to super view dimensions
let's ad in here well nothing. Let's omit the multiplier for now and have this
offset set to let's say 200 and let's not use the safe area for now. There we go.
Let's see what do we have now. These are simple functions that we can
use to make our lives easier as you can see two lines of code. Let's hit command
arrow and see how this looks on a landscape, okay. And that is height to
super view and width to super view. What else do we have? Left to super view right
to super view you already knew this a kind of
touch this but it is basically self-explanatory we are constraining
left to super view. So I'm not going to go with top to super view, button to
super view. Let's move on to center X to super view, okay. So let's go and delete
all of this and again let's add some width. So view 0 and widht and that
will be let's say 200. View 0 height and again 200 and now we are going to
center x to super view okay and yeah it is kind of again self-explanatory but
let me just show you center x to super view, okay. Hit command R and let's see
what happens. There we go. It's at the very top because we haven't added any
center y to super view or any anchors that refer to the top. We could and in
here let's say view 0 top to super view and we are going to add in here on
offset of let's say 100 and using safe a area. So true there and just
delete this now you will see that it is bumped a little bit down from the top.
There we go. Okay of course we could use this view
and we can anchor it with multiplier and and an offset. So let's see how that offset
works because I want to show you if we add in here let's say 300. Let's add in
here 300 and using safe area layout guide priority and is active let's use
the default ones and let's comment this out, okay. And now we
should see the magic happen. Okay because we have this x offset, okay. Let me just
add in here just 100. There we go. It's offset only by 100. Okay and of
course you can use this top to super view and that is center x to super view
of course the same goes to center y to super view I wanted to go into this
because it's self explanatory, okay. And we have gone to the end of our
super view anchoring with auto layout. Okay! That is it.
In the next video we are going to move even further and have some more views
and we are going to jump right into this tiny constraints dot swift file where
you can see we have a lot of extensions and yap we are going to
constrain a lot more views not just only this one that we our kind of tired
by now. So we want more views. Now I hope you enjoyed this video if you did go
ahead and give the thumbs up, subscribe to the channel and hit that notification
bell so you get notified of the next video. Again if you don't hit that
notification but you maybe will get it on your feed you will maybe not get it
on your feet so go ahead and smash that bell and as usual I will see you in the
next one.