It what's up everyone.
Mark Price read slopes dot com and we have been diving into the world of laying out our views and controls
and we've done things programmatically so far.
But now we want to talk about the way that is Apple recommended.
And the way that we'll be building all of our apps and that's using the constraint system with auto
layout and again auto layout means that it's automatically laying things out for you even though you
got to do a lot of legwork to set it up.
In the end it's a more elegant solution.
And so we're going to do that in this video for our welcome screen.
We're going to get all the things laid out as they need to be.
OK.
So what we have here is our code that I no longer want.
OK I want to take that out and we'll leave our outlets for now.
We may get rid of them later.
That's OK.
And so we've gotten rid of the programmatic code to move things around.
And let's go back to our main storyboard here.
OK.
So we've got some fundamental problems with our layout namely it's staying one size and it's not moving
as it should.
And so what I want to do is go back to the iPhone 7 Leo and let me give you a important rule.
Protip always build out your entire user interface for a screen in one layout at first.
So we're picking just pick one and stick with it.
And you typically want to do either an iPhone 7 depending on which device just a phone device.
Don't start with the iPad and work your way down.
So usually with a smaller device you could even go as low as the for us but I like sticking with the
iPhone 7.
OK.
Or whatever the current standard device size is at the time.
Build out your entire layout in that screen first then set constraints and then as you go to other screen
sizes bigger or smaller then you can make constraints for those specific screen sizes.
So things look perfect.
So constraints how do they work.
Well let's first read the apple documentation.
OK.
And what it says about constraints is this auto layout defines your user interface using a series of
constraints.
Constraints typically represent a relationship between two views.
Auto layout then calculates the size and location of each of you based on these constraints.
This produces layouts that dynamically respond to both internal and external changes.
OK.
And if we look at this image here.
OK you're going to see these little blue lines that say 20 20 20 20 20 what does all this madness means
we're all.
I'll explain this image and then we'll actually go and do something similar.
So if you can see there's a super view or that light gray view.
OK that represents let's say the main view of the view controller.
So when I type in view in the code it's referencing that Super view.
And then let's say we've got a UI view.
Image is that dark grey image.
OK so what these constraints are saying is hey I want the left side OK or the leading side of this view
to be 20 points from these super views leading side.
OK.
So the leading side of the image view that dark gray.
Or let's just say the dark gray the leading side of the dark gray view.
I want to be 20 points from the leading side of the super view.
Same with the top.
I want the top side of the dark gray view to be 20 points from the top side of the super view.
OK.
Or the like review and then on the right hand side.
OK it says I want it to be 20 points I want the dark Grays trilling view or trailing side to be 20 points
away from the trailing side of the light gray view or the super view.
OK.
And what's interesting here is if you have a constraint on the left side and a constraint on the right
side your view is automatically going to stretch to that with.
OK so you wouldn't have to set a size here.
In fact if you set a size Let's say you say a hard coded value of 50 points wide your constraints would
actually break.
And the reason why is you've set some rules some relationships.
The left side goes here the right side goes here and the math for the size is automatically calculated.
OK.
And looking at it further here you see that 8.
OK.
Well this 8 is the spacing between the bottom of the bottom side of the top dark great view and the
top side of the bottom part great view.
OK so it's saying it's eight points away from that.
And if you look at the bottom view the bottom dark great view it's 20 from the left 20 from the right
and 20 from the bottom.
OK so which means that this dark view its height is going to stretch automatically until it reaches
the the other view.
Same with that view.
Its height is going to stretch automatically.
And so what you can see here is a completely filled out constraint hierarchy and it's complete in there
everything is accounted for.
See that 8 there.
If we did not specify the date this whole thing would be broken.
Do you know why I want you to look at this image here.
Look at that 8 right there.
And ask yourself why would this break if I didn't have it there.
What do you think.
What do you think it is.
Well the reason why it would break is because there's no longer any type of height being specified for
those two dark gray boxes.
OK.
Unless you had hardcoded a height in there like I said I want each one to be 100 high.
OK.
Which we didn't.
Then there's no information to specify the height and so it's going to break it's going to.
First off you might get a warning from interface builder.
And secondly if your lights are going to be random it's not going to be the height that you desire.
It's not going to automatically space it for you.
OK so when you set relationships OK here's the rule when you set relationships all the relationships
have to be fulfilled or you have to set relationships for everything.
So when you say any type of constraint or relationship you have to set all of them.
And so that eight there is basically saying by I want these to be 8 apart and then it does the math
automatically for the height.
OK.
So we have a complete set of relationships here with the constraints.
And so whenever you get confused I want you to go back to this image and look at it and see what is
going on here.
OK.
So what does that mean for.
What I like to do when I'm building our interfaces with constraint as I like to kind of say aloud just
like I'm doing right now.
This needs to be here and here and here and so starting and I usually start from the top down.
So the top most icons is probably this.
This image OK this background image.
Notice how there's this other image these controls are not actually some views of this image.
You don't set subdues on image views.
OK.
So these are not subdues but it can be in the background and cover all the space.
But my point is this background image is really going to happen not a whole lot to do with any of these
other views because we need it to cover the whole screen.
And so its relationship is only going to be with the parent view right here.
So what we're going to do is we're going to set some constraints.
And what I find the easiest way to do is click this little square icon right here add new constraints
and I've got the background image selected and you just click it and all we're going to do is click
this this this and this.
And what we're saying is I want it to be zero points from the top of the super view.
Zero points on the left.
Zero points are from here and points from here.
OK.
And why do we want that what we wanted to touch the edges of the screen.
No matter how big the screen gets we want it to always be zero.
We want it to always be right next to it hugging it right at the zero.
OK.
Why would we not set a width and height.
Well because the screen sizes can change we don't know if the user has an iPhone 7.
If they have an iPad and so we would not want to set width and height because then it wouldn't look
good on all the devices but this will sending it zero from every edge to zero from the top zero from
the left zero from the bottom and zero from the right.
We want it hugging at all times.
And last I'm going to do is click add for constraints.
So if I run this now OK.
Actually may not even need to run it.
Let's actually click and look at the devices here and sure enough we don't have to run anything look
that.
It's working on these different screen devices.
So the constraints have already been applied to these previews here.
OK.
So that's one way you can quickly check it out.
It's just by swapping between these views here.
You used to have to x 7 you'd have to run OK run your app to see what it's going to look like but now
as of X code 8 you can click these devices here and see what it's going to look like on the screen size.
So clearly those constraints are correct.
And just to show you what it would look like if we had different constraints are going to go back to
my iphone 7 click that here and what I've done is I click the ruler over here.
So this the size inspector and I'm going to scan it just going to delete these constraints and selecting
them and deleting the ones I just added.
Ok deleted deleted deleted deleted.
OK.
So it's all broken now.
And look at even kind of messed up my screen.
It kind of threw the background off of the edges here.
As you can see it's tried to fix that there.
Now let's set those same constraints again so I've deleted the constraints but let's set some different
ones.
Let's say I wanted a little bit of background to show.
So what I could do is I could say I want it 15 from the top 15 from the left 15 from the right and 15
from the bottom.
Let's add those constraints.
And as you can see you can now see the green OK.
So those constraints are instantaneous and are you seeing how it works.
We just set a relationship.
We set the relationship from the the top side of the image view to the top side of the super view the
leading side of the image view to that from the leaning side of the suit preview the trailing side of
the image view and the trailing side of the review and the bottom side of the image to the bottom side
of this preview.
So we said a relationship we wanted at 15 points from each ad edge.
Of course that's not what we want.
Let's put them back to zero.
And so the edit constraints you can click the size inspector here and then double click the constraints
and set to zero and then click off click it again.
It's kind of a hassle but that's how you edit them and just editing the constant to zero zero zero and
zero.
And one more thing I want to show you here.
You can actually see the relationships right here in the vertical space constraint.
The first item is Bottomley out guide top.
OK.
So this is on the super view and it's saying the bottom layout guide of the super view and its top and
it's making it equal to the bottom image to the background image dot bottom.
OK.
And so these layout guides they are the layout guides for an application or your top most level.
And so you'll be working with those at the at the highest level when you have other views.
You'll see the other views here like if I wanted to position two things in correspondence with each
other and we'll talk about that as we get there.
So what we've done is we've got it working on our screen sizes.
Image looks great.
OK.
So the next thing I want to do is this swish image as you can see it's not lining up in the middle and
on the screen side.
So let's do that next.
So what I want to do is I want to pin this so I click the constraint button here and what I want to
do is I want to pin it from the top.
OK.
And as you can see it's currently 20 points from the top.
Now this is really important the numbers over here.
OK.
They're not guaranteed to stay that way.
Those are just the numbers that are there when you're working with an Interface Builder.
So if you want this swoosh image to be 20 point if you wanted to look like it is here we need to make
it 20 points from the top just like we have it over here.
These numbers will change with auto layout and so where they can change.
So we want to hard code them over here so what we want to do is the swish image we want to type in 20
and just press tab OK so we want this to be 20 points from the top.
Now what's the next thing we need to do.
We want to always in the center and we probably don't want to pin it to the left or pinnate to the right
because then that will stretch out our image and we don't want our image stretched out that would look
silly.
One thing we could do is we could give it a fixed width and height but that still doesn't pin it in
the center.
So that's not going to work either.
So I think there's a better way.
So we're going to add one constraint.
OK and it's OK for now.
You know as you can see right here it's it's kind of in the middle are it's always from the top I mean
but it's not in the middle yet.
And so how do we do that.
Well what we can now do is click the alignment menu so as you can see right here there's an inline button
you click it.
And what we want to do is we want to center it horizontally in the container.
Now this is still a constraint.
Even though it's not in the constraints I mean this alignment is creating a relationship with the parent
container or the super view and it's saying we want this to be aligned horizontally so now that I've
clicked that if you see here and the different images OK.
It is now always in the center.
So what did we do again.
We we pinned it from the top we said a constraint to the top 20 points from the top and then we also
set an alignment constraint which keeps the always centered horizontally in the container.
So that's looking really good.
We have a few more to do here.
What do you think do you think you could do this one on your own.
Give it a shot.
I want you to pin this.
So it's always it's always in the center and it always just looks good the way it's supposed to look.
How would you do it
well.
How I'm going to do it.
If you did it hopefully you did.
The deposit video and do it listen to me trust me you want to do these things you don't want me to do
you don't want to just follow along otherwise it's not going to sink in your brain.
So what we want to do here is probably something similar.
So what I can do is something new I could click this this pin button here and see how it says 85 it's
what it does is it finds the next view that's above it.
OK and that's the view it's talking about but that can be confusing.
Maybe there's a hidden view.
It's hard to say.
So one thing we can do is we can control drag from this component and selects some holding control and
I'm dragging to the swoosh.
OK.
And this is really interesting so we can we can set some values here so we can have equal with equal
heights.
I don't want that.
But this is interesting.
Vertical spacing vertical baseline spacing what is all this.
Well what if we what if we pinnate to trebling.
OK what if we pin this to the trailing side of this whoosh.
I'm just I'm just curious to see what happens.
OK.
So if we click on our go all in here can we now have this trailing swoosh alignment.
OK.
And what this has done is it's taken the go all in trebling and it has now aligned it with the trailing
of the swoosh.
But that's not what we want right.
That's that's silly.
It's pinning the edges here.
So what we want to do is delete that click click your size attribute here delete that last hold down
control again.
Click swoosh and let's actually look at this here oh we can now I'm sorry let's go.
We can now pick some other things here.
So there's a top center vertically last baseline that's interesting or the bottom.
Well I think that I would want to pin this to the bottom of the swoosh.
OK.
So it's double click the constraint go all in Dot bottom is equal to swooshed up Bottom Well that's
not exactly what I want.
What I really want is go all in dot top.
I want to pin that to swoosh dot bottom.
And notice how it's saying if there's an 85 distance here.
OK that's not what we want.
We don't want to eighty five distance.
In fact if we are we don't want it.
What I'm saying is what I'm saying is see these orange lines here it's saying right now we're eighty
five points off.
If I update the frame OK it's going to readjust this to zero.
So if we go to our editor and we go to our update frames OK so command alt equals.
It has now moved it up here to the top.
And that's not where we want it.
We actually did want to 85.
That's what I was trying to say.
So in our constraint here this top space the swoosh we can now say a constant of 85 and it's going to
move it down there.
So what did we do.
OK we control drag from the swoosh to there or excuse me from the gall in to the swoosh which gave us
a constraint.
And then what we did is we switch what type of constraint it was.
Now I don't typically do it this way.
There are some people that do they like to control drag constraints and they come in here and edit.
So we want to go all in dot top to be equal to the swooshed bottom.
And then you can adjust things there and you set the constant manually.
I don't like that it just takes too much time but that's just one way of doing it OK.
And every time I I don't teach it someone's like why don't you do it that way.
Well it's a little bit slow.
That's why I don't do it that way.
So we pinned it from the top here.
But we also need to center it vertically because if you notice here it's not centered vertically.
All right.
So we can do the same thing we did before we can take our go all in.
Click the align button and center horizontally in container.
And now if we look over here go all in is now in the center.
So this one.
All right.
This is almost the same set up as this one right here which is kind of this makes it kind of easy.
So what I could do is something similar.
So what I want to do is click this pin button and notice how we have a problem 140 that seems way too
high.
This does not seem a 140 pixels away from here.
Well the problem is these two are overlapping each other which is not good at all actually.
In fact what I'm going to do is an overlap it will let me select it.
It's not come on little fella.
That.
And I'm just going to move it.
So they're not touching which they're not.
Let's see if that fixes it.
So now if I clicked the on going all out now it's how it's now one point away.
You know what we could actually make ZERO points away from the view.
So what just happened or why was it 1:44 work since there was overlapping it couldn't recognize the
top constraint.
And so it was going up to the swoosh.
So here's the flipside of not using the controlled drag.
You have to make sure that this is correct it's pointing to the right thing above.
Otherwise yours or your friends would be wrong.
I could clearly tell that this was not a 100 or 40 points away from go all in.
It was obviously pointing to swoosh.
So I moved I made it so these frames did not touch each other.
So what I'm saying is I want ongoing all out to be zero points from go all in.
OK fine.
Easy easy easy.
OK.
Perfect.
Now let's click the align menu and do it horizontally in container.
And if we look at the different size here it looks good to me.
Ongoing.
All in all right.
Cool cool cool.
Assume something similar here.
I'm going to click the pin menu.
Fourteen point five from the top that's a little bit odd.
Some of the change that the 15 from the top 15 from ongoing all out and I will again click the slide
menu and horizontally and container.
And that's interesting it actually kind of screwed up our constraints here which I'm not overly happy
about.
So what I'm going to do let's see here dominate the league.
Yeah that's that's no good.
So what I want to do is add another constraint.
So exco did this automatically they made it.
They messed it up.
Now your designer is angry.
Well we had it right before.
Well what we probably should do is put it back the way it was and it was about the same width as these
I believe.
So what I'm going to do is I'm going to control drag.
Find your team to on going all out.
And I want to have equal with both of these to have equal with oh this one expanded to bugger.
Yes.
Not good.
Let's fix that.
OK.
So what I'm going to do we're going to start at the top here.
OK.
So ongoing all and what I'm going to do is I'm going to get a fix on here.
OK.
So currently the width is to 160 so I'm going to click the pin menu here and for the with a mess at
260.
OK.
Now what I'm going to do is control drag from going all out to go all in.
Now we're going to say we want it to have it but with this and this one since we had already done that
had equal withs as well too.
OK.
You're probably getting confused a little bit and that's OK we're going to I'm going to explain some
more of this here.
Obviously are going all out.
We didn't center horizontally in the container.
So we need to do that as well to
equal his top space bottom space aligned center extra super view.
Well yeah that's correct.
Oh let's update our frames.
So it was command alt equals right.
Yes I remember Ed..
And then it was updated frames.
There it is.
See how it's great out now because they're all updated.
OK.
It just updates it towards actually going to be at runtime.
So cool.
It's really coming together.
So are you with me so far all we've done is set relationships so if you're confused I want you to think
relationships.
OK we've pinned the swoosh from the top with Senator horizontally.
We can go all in to swoosh.
OK.
You know if I click go all in top space to swooshes 85 We're just saying we want to eighty five points
away from the bottom of swoosh.
So go all in dot top.
OK.
I want it to be equal to the bottom plus 85 just a relationship.
How far do you want these two edges to be with a constant or a spacer 85 eighty the spacer and then
same here.
OK we've said we want it to be zero.
So tops base the goal in zero.
So we want both edges touching each other that's great horizontally in the container.
That's great line center X is what that means.
And the same thing here.
OK we've done the exact same thing.
Pretty cool.
Last thing is the button as you can clearly see the button is not responding as we want it to.
Now maybe with this button we wanted to be we want it to be the full bottom of the screen just because.
So this one's a little bit easier.
All we need to do is click this pen button.
OK.
So we want it 20 from the bottom and this is really interesting.
Why is it Saens 0 from the left as you're from the right.
Even though I have spacier right there's some space here.
Shouldn't it be like 20.
Well there's actually a feature called margin's OK.
And margins keep things from the edge and so it's about I think it's 15 or 20 pixels and it keeps it
I think is 20 pixels and it keeps it from the left and from the right edges and only from the left on
the right by the way up from the bottom or top.
And there's this button here there's this checkmark concern the margins if I turn it off.
It says 16 and 16.
So clearly I have 16 space here and 16 space here.
I said that in if I turn it on it's setting it to 0 and 0.
And so see the margins on it's fine for now because it's this invisible line here.
We want to these the margins and it just it will look fine.
Nothing you need to worry about you could take it off and then program it 60 and then you could just
select these here.
Whatever either or doesn't matter.
However you want to design your app.
You may want to use margins especially when it comes to things like TVO as if your apps for CVO you
might have some bleading content because some screens have overscan then you would definitely want to
use margins.
So something to consider.
But for now we want to zero from the margin over here and zero from the margin over here and 20 from
the bottom is fine.
And one more thing we're going to have to do.
We're going to have to set a fixed height on this because remember there's no relationship on the Get
started button to this league over here none at all.
And so we have to have four relationships.
I told you about this already.
We have to have a full relationship and every single constraint must be defined every Remember here's
the rule again in your face.
OK.
Every auto layout view or view that supports auto layout must have a position or relationship and must
have a size.
OK so same with frames position and size in correspondence with other views or they must have their
own fixed with her height.
If it's missing a relationship in our case there's no relationship from the bottom side of started or
this label up here find a team.
So we need to set a fixed height and 51 is an odd number and I don't like it.
So I'm just going to set it to 50.
So zero from the left margin is zero from the right margin 20 from the bottom and a fix had a 50 because
there's no relationship defining the top.
Wonderful.
Now if I go to my different devices as you can see the button is right where it needs to be.
OK.
This is pretty cool.
So this is a lot better than programmatically writing this.
And of course it goes so much faster once you have it down.
I'm explaining these things to you so it's taking a long time but if I was doing this on my own it would
have probably taken me one minute.
I could have done this all in one minute.
And of course there's other problems too like princes This is a little bit too small an iPad the techs
would be bigger and we can we can talk about that in just a little bit.
So this is good for this video here what we've done is we worked with auto layout I've talked about
how relationships work how it's much better than working with programmatic positioning of frames and
what we just did here.
You're going to do for most all of your apps even though our def slopes app that we use and is in the
hands of many thousands of people it uses these exact same constraints for ninety nine point nine percent
of all of our screens.
So good stuff to know.
Critical stuff to know actually and that's it for now.
Marc price a dev slopes dot com.
Let's move on and forward.