This this is our very first introduction to utterly and utterly as are really great tools that help
us design our different user interfaces that are just to adapt automatically to different orientations
or different device sizes.
So that's going to start to see how we are going to use those.
I'm going to go through.
I'm going to start a new project I'm going to call it out or lay out intro IAB interface.
Been there but I had next here.
Here's the situation where we're going to need to lay out.
Imagine we have this user interface and in it we have a label.
So my label which is in here I'm one of you with a more distinctive color.
Such as this one.
Now here's the thing.
If I stretch this label all the way across the screen and somehow try to make it nice and tidy and say
well the X is 20 then why is 20.
And David is I think 135 or maybe 40 and a height of 44.
So my assumption is that this labor is always going to be on the top of the screen with 20 pixels margins
from the right from the top and from the left.
And if I go ahead and change my orientation say here instead of having a pro-trade more let's go to
landscape.
All of a sudden that system is broken because all this label knows is maintaining these values.
2048 three three five and forty four which is perfectly accurate in here but doesn't justify what I've
wanted.
I want it to have only 20 pixels margin.
In theory I want to have essentially something like this.
I'm going to undo this real soon but I want it to automatically adjust to this size or if I go ahead
and say when I'm on the same more down the post-trade more but I'm using a much smaller device.
Then all of a sudden my label goes outside the boundaries of this device.
So you can see what I'm going with this auto layout is a very useful tool for us to set a group of constrains
which helps us maintain the shape of our outlets.
It's not going to go back here.
I'm going to go to my original design which is iPhone 8 for now.
And here is how we do utterly out how we add utterly out constraints.
We add them by voting the control button and dragging from one outlet to another one when we drive from
one outlet taller than one.
It means I want to set a constraint between the starting one and the ending one.
Let's see how we do that.
And when is going in here let me get myself a little bit you know a large screen so it's easier to see.
And when I go in here hold the control by then drag from here to the view which is the superior view
of this label.
And you can very well do that in your Navigator.
You can go and do that.
So I want to hold the control drive over here and say Give me a constraint which is against the top
space to the safe area.
So it adds this little blue thing that says Val I'm always going to be from the set in the same distance
from the top I'm going to be always at the same distance.
I'll just go ahead and add another one I'm going to hold the control abandon the right side of the screen
and say Give me a leading space.
This is the leading space the space to the left side of the view.
So that's how much it leads from there.
And as we have the leading We obviously have the trailing.
So if I drive from my label to the view using control then I could say give me a trailing space.
So now as you can see my left is set my top is set and it's also my right.
What do you think is going to happen if I switch to the landscape mode.
Let's see that again.
If I go there it's going to show me all the constraints but it doesn't really fit.
It doesn't show me where it has to be and I have this little update.
Why then are they compressed as going to show me where it would be if it was in the landscape.
Now the update button doesn't automatically update itself if there is something missing.
And I will show you what is missing right now.
Let's go back here and what happened.
We had this label.
It is slightly taller.
It used to be actually 44 but now it is not.
And if you notice is this little color down there the hatchet line that shows us that well I know you
are trying to put the label here but this is how it's going to look like because the values are intrinsic.
And when it come back to intrinsic values in a minute but let's just fix this label.
I have the top I have the left I have the right having the left and right means the video of this is
always taking care of having the top space means you always know where it is.
The one we don't know is what is going to be its height.
Now I could do one of two things.
I could actually go ahead and say well there is one kind of stain between this guy and bottom of the
screen which is not really a good idea or I could go ahead and say I'm going to hold the control drag
on from this view on itself and say here's the height.
So always maintain the same height.
Now if you're if you select your and go to the dimensions down here you can actually see the existing
constraints and it says there is a height of 44 trailing 20 leading 20 and a top is spaced 20.
And if now we go to another orientation it automatically adjust itself to show us the right thing.
Or if I go back and I go to a different device it does exactly the same thing.
It maintains the same set of constraints.
Now I'm going to go and select my object and I could go in here at the labels and try to find all of
its constraints manually.
So there's that.
And there are those three I want to delete all of my constraints.
I could go ahead and select them and delete them or I could just go ahead select my outlet and go down
here and that little triangle and say here are kind of strengths.
So I'm going to say clear constraints is going to kill all the constraints for this object.
So once again we back to a situation where we don't have any constraints.
Now here is what I want to show you.
I'm going to go ahead and say Give me a resume like that again control the click or control drag drop
a space to a safe area and the leading space to a safe area.
So it means the top panel left taking care of and the rest of it is left somehow to the intrinsic UV-A
of it.
It means whatever it is the amount of text in it that you have to accommodate make the vet and the heights
based on that.
So if this was a much longer text then tacks in here what would happen is that takes with a stretch
or if this was a phone that was taller.
So that's called an intrinsic value a value that is being found from the content.
But I personally don't really feel like that most of the time I want to be able to specifically say
this is my label is going to be.
So I'm going to say this change that sticks to my label that's clear constraints.
And here's what I want to happen.
I want this to be right in the middle of my screen.
I'm going to hold the control drive over here and say center vertically in the safe area and then I'm
going to say once again Center up that was horizontally so he said the vertically this time.
And now I'm going to say refresh update it shows me right in the middle.
So now my label is right on the center of this screen except that it's Veith and height are intrinsic.
I don't want that.
Here's what I do want and it's going to be a bit of a complicated process.
All right.
I'm going to say my height is going to be 44.
OK.
So that is 44 irrelevant of what device I'm using So I'm using a larger device is 44.
I have I'm using a smaller device still it is 44 and I want to maintain the same relationship.
What I mean by that is if this is 3:56 and my view is six hundred I want to maintain that relationship.
I kind of fun to keep this aspect ratio.
So I will hold the control right from my label to my view and see aspect ratio.
Now when you do an aspect ratio you actually have to manually set it.
So I'm going to go to my aspect ratio and when I double click on it I add this little window pops which
shows me the exact details of my aspect ratio constraint.
And when I say my label height equals supernovae you height with the ratio of forty four to six hundred
sixty seven I can see these two little equal signs in year if you can notice them.
It says this height is proportional to that height.
Now if you go to another orientation
updated it becomes a lot smaller.
If you go to an other one something that is a smaller device obviously it tries to maintain the same
proportions between them maintaining proportion and not always a good idea.
Sometimes you need to do it sometimes.
It's really a judgment call.
I'm going to show you one last thing before we close this introductory lesson and that is let's select
this guide delete it and all of these constraints I'm going to go in here and say Give me a view.
So that is a you I view I want to put my viewers right in the middle and I want to have no margins for
the left and right.
So that's my view and but I give with a bit of a poor distinctive background color say it always has
the same height of 128 so control click height.
So this object always maintains its own height leading space control and trailing space control drunk
and not you will see this little icon shows up the red the one that says there is a missing constraint.
It's essentially telling you Well you have done some of the things but still something is missing.
In the example I made for you is clearly saying what is missing is saying the avoid position is missing
it's telling you I know lots of it because you have aligned it to the left and the right.
I know what's to hide.
Because you have clearly said that what I don't know is very is it going to be is it here or is it here.
Think of it like this it three constraints so they have suggested so far rather than my alts that is
up there or down here.
They are still being satisfied and that's essentially it herem being satisfied the constraints are being
satisfied or not.
Right now the constraints are being satisfied the height is 128 leading and trailing values are working.
But this object could very well be here or be here.
So for that I'm going to go ahead and say this keep it right in the middle and I'm going to confront
it like and say Center it vertically.
And as you can see those are red borders and the red icons they disappear.
It doesn't tell me anymore that you're missing a constraint simply because I'm not missing a constraint.
Everything is in year if I go to a different orientation it knows what to do.
If I go to a different device it knows it has to do.
Now let's say I had a child for this you I.
I had a label which was a child.
All of it.
If you see here's my hierarchy the main view and then the green view.
I would actually call this one.
You mean you're in the view and then waited with have a label.
Now my label has a more distinctive color.
And here's what I want to happen.
I want my label to have 20 pixels and margin from every side.
So 20 from top left right on bottom here is a very very important thing that you have to know.
You can set a constraint between object and itself.
You can set the kind of state between an object and its parent.
If the object has siblings such as what they have in here you can set kind of stains between siblings
but you cannot do it any other way.
So you can't set a stain between this label and that so purview.
It does allow you to do it your put your outfit essentially break or crash.
So you have to make sure that you set the constrains either among siblings or parents.
So here is what I'm going to do.
I'm going to say control drag our trailing controls right leading control right by them and control
that topless face.
Wouldn't it be nice if I had a way of doing all of these automatically so I didn't have to really go
and strike four times.
And we do have that.
So I'm going to go in here and say clear all of these constraints.
Instead click on this little icon that says Are you trying to add new constraints and I'm going to say
yes.
And it says so what do you want to do.
I want to have 20 pixels margin 20 20 and 20.
And the four constraints and that's what it does for me.
So I left an icon down there it adds kind of scenes for you and helps you decide how you want it to
be.
Sometimes it's easier to use this one.
And sometimes it is easier to use the control right and now as you can imagine there.
Read the label is always maintaining its stance against the corners of the green one is relevant of
the kind of device that you are using it adapts itself perfectly to adjust its its corners.
All right so that's about that introduction to how we use auto play out in court in the next lesson.
You're going to have an exercise their views a lot of these things as well as some of the new things
in to lay out.