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 and of
course swift 5. So without further ado let's jump right into today's episode.
Okay! Today we are going to learn how to set the width and the height and maybe
some aspect ratio to our views. So let's jump into our tiny constraints dot
swift file and as you can see here we have our width and we have a CG float
relation priority is active and we are going to of course omit this relation
priority and is active because those default values are okay. So let's jump
right back into our view controller and today I believe we are not going to need
view 2 and yeah as you can see here we have our center in super view. It is
centering our view 1 into super view and we already have this added here but I
will just type it again out its width and you can choose this one or you can
just simply go a little bit down and use this one with relation priority is
active. Well we are not going to use that one we are going to use this width with
a CG float and I will set this to 400 so we can see that and the same goes for
the height of course. So let us just build and run and see that we have this
width set to 400 and throughout this video tutorial series we have already
said our with other CG floats so that should not be a surprise for you. So let
me set this back to 300 and let's center or rather yet let's edge this or a center
in super view I want to move this a little bit up so we can
and the next one so we are going to use an offset here and if you don't know
what I'm talking about go ahead and take a look at the previous videos where I
talk about centering views in superview or rather at anchoring and setting all
of the layout constraints. So zero but I will have this as minus 200 and then
everything else can be deleted. Let me build an to run again. So let's let it be
centered in super view so there it is. Okay, of course this is an arbitrary
value if you want to have this so let me just show you what happens if I rotate
the device it doesn't really show. So this is not advisable to do but in our
case this is pretty okay. So what is up next in our tiny constraints file.
Well it is width to constrainable. And we have our dimensions multiplier, offset, relation
and so on. So let's do that. So first of all we want to set our view 2s
width and we want to have this to constrainable but I want to have this
with the all of the elements of course because yeah we can just constrain it to
anything but we'd rather yet explain all of the other properties. So constrainable
is view 1 dimensions we are not going to talk about dimensions that is
okay. Now multiplier okay I will send this multiplier to one for now and
offset CG float let's see float, there we go.
Yeah, it's a CG float so let's add in here let's say 50. Relation
priority and is active we can do that. So that is our width. We still need to
let's say let's just center this to our super view so I will just copy and paste
this so we can be much faster and I will bump it down. So I believe we still need
to add our height let me just double check and quickly run because we don't
have a height and that this will not show up at all that is correct.
So one last thing we need to add in here is view 2 dot height and again let's
add this to 300, okay. And now we should be ready and see that oh yeah
one thing that I forgot is to add the view 2 to our view. So to our super view.
So let's build and run and see that basically we have this centered to our
super view by an offset of Y by 200 so we have this lower and the height is 300
that is okay it's the same as the blue one and the width is the view ones width
and the multiplier is one so it's the same plus an offset of 50. So let's have
this back to zero so we could omit all of these but we should see the same
width as the view one. There we go. It is the same. So let's play with the
multiplier so 0.5 and as you can see it's half and let's do the same with the
height too. So where this would not be
just 300, okay. So yeah as you can see it's half and half width and height half
and half. Great! So that is width to constrainable.
Okay, let's move further and see the next one
it is width to height of a constrainable and that is pretty straightforward
again we are not constraining to the view 1 with we will constrain to the
height and I will set this to again 300 and let's type this again width to
height of constrainable and first of all let's use this because I really want
to have this multiplier but for now let's have this to one and the offset is
zero, okay. So now we should have kind of the same so width height is the same
here but what if the height here is let's say 300 and the width is only 100.
Okay! So now the view 2s width should be the height of the view 1.
So it should be 300. Let's see. So we should get the square here too. There we go.
We have a dead square pretty self-explanatory the multiplier of course should be let's
see it could be 0.5 and now we should get half of the heights of 150 here we
go 150 and 300. So that is again how to use width to height. Let's move forward
because next up is we have a width with a minimum value and a maximum value so
yeah that is something that you could have when you are animating it.
So for now and let me just type in here with and min, minimum
value that is that and let's ad in here a minimum value of 100 and the
maximum value of 300 and let's delete all of this because the defaults are pretty okay.
So let's see what happens now. There we go.
We get basically the minimum value for our width. Now if we would animate
this or move this round then and this would be pushed around it would be
pushed till the maximum value specified here, okay. Let's move forward and here we
have our height it is basically the same. Here we have our height for the minimum
x value and finally today I am going to use this aspect ratio. Now that is pretty
straightforward. Let's see if we have this width let's say set the width to
100, okay and we don't want to set the height, okay. So we want to set aspect
ratio and let's use this ratio relation priority is active so we could have used
the other one so the simple one okay and the aspect ratio let's say 1
because we want to have the width, as the height the same as the width. So let's
see. There we go. 100 by 100 let's see here 3, okay then we should have the
height 300 and as you can see the aspect ratio is set to free but because we are
setting the aspect ratio according to the width we are getting the third of
its size. So let's change that or maybe if we add in here 0.33 then we should
get the desired effect but I will change that to the height according to the
height. There we go and let's see I will add in here height
and that is 100 and then set the aspect ratio to be 3. So that is basically
what we want to achieve here. There we go. The height is 100 and indeed the width
is 300 three times the height, okay. Now that is it for this tutorial. I hope you
enjoyed this video and if you did go ahead and give it a thumbs up, subscribe
to the channel and hit that notification bell because you do want to get notified
of next videos as they do come out and as usual I will see you in the next one.