Hey what's up everyone Mark Price here at Davis slopes dot com and we're going to continue our swoosh
app.
And in this video we're going to talk about the madness of auto layout and constraints and how that
all works and frames and positions and all this crazy stuff that can be confusing or scary.
But we're going to make it really easy and it really is very easy once you get the basics down.
And so now we're going to do that and we're also going to fix a few things in her app as well too.
So let's go ahead and pull open our project.
OK.
So I want to do the swoosh app and make sure that you're using X cotinine whether it's the beta or release
version if it has been released and I'm an open up.
So whoosh.
OK.
And then other thing I want to do is this is how I'm managing the lessons and you can do yours however
you want but I'm going to create a new branch for this next lesson or this lesson too.
So get check out Dasch be less than 0 2 so you can get branch were clearly on Lesson 2 now and going
to Lesson 1 on the branch would revert to the code we finish off with there so we're good to go.
And what we want to do is quickly just fix our images.
So before we didn't have the 2 x and 3 X versions of the swoosh.
So it's using the same one for all three.
And what I want to do is just drag those in here.
So the 2 x and the 2 x slot and the 3 x 3 ex-law.
Now you probably didn't notice any visual changes but that's fine.
It's it's in better condition now.
So cool let's look at our app here.
If you remember when we ran this on the seven plus things were not things were not the way they should
be.
Arap was looking a little bit ugly and our boss is a little bit unhappy because we're building things
that aren't working on all devices.
And this is a big problem to solve.
You need to be able to have an app run on all device types and sizes because that's what a great user
experience calls for.
OK and as you can see right here it's kind of boxing everything here in the iPhone 7 screen size.
And so I want to talk about first in this video is how frames and layouts work inside of iOS and I'm
not talking about Ottaway I'm talking about frames and positioning of views in their respective coordinate
space and how things used to be.
And it's important of understanding how things are going on under the hood because there are times when
you will want to move things programmatically.
And so let's look at our device here.
OK we're looking on the iPad here.
As you can see let's zoom out a little bit here.
So this is an iPad and of course our map is definitely not properly supporting iPad.
So what I want to do in this example here is I want to make in an outlet for the logo and the background
and I want to move them programmatically OK.
They show you what what you have control and power over and of course doing things programmatically
gives you the ultimate control and power.
This is where that pixel perfect programming comes in.
I was telling you about if your designer demands it no matter what the cost.
I don't care about the cost just give me pixel perfect because that's what a great designer would say.
And of course all great apps have to be pixel perfect.
No need to look nice and work nice.
In any case he's demanding pixel perfect.
And so this is how you would do it with programmatic constraints.
But first off we got to make the outlets for things that we want to manipulate.
So I've opened up a this two little wheels here the assistant editor and I've opened it up and all we're
going to do is drag some ibl over so I'm going to click the swoosh icon and I get a control drag down
here inside the view controller and we're going to call this swoosh and then I'm going to grab this
background image and drag it in here as well too.
And we're going to call this B.G. AMG for background image.
I'll close the assistant editor.
And what we're going to do now is we are going to go into our view control or swift.
OK.
Also you may notice me increasing and decreasing font size like so and I'm doing that with command plus
in command minus and that increases and decreases the font size in X code 9 previous X conversions did
not allow.
So it's pretty cool.
So what do we have here we've got to be outlet's let's clean up here.
And these are referencing the views in our storyboard.
And currently we are we do we do not have auto layout in action we've not set any constraints.
We just have things sitting here.
Otherwise our app would look really nice which it doesn't look that great on iPad right now.
So how do we do this how will we make a pixel perfect program.
How do we have to satisfied that anal designer.
You know requirements or how.
We just have control over app bullets do that now.
So you did load what we're going to do is we're going to position things.
OK.
And so bear with me as we code the first few things because it may not make sense.
So let's say we want the swoosh always to be in the center of the screen.
So what we would have to do in times past or if we want full control and power is what we better yet
say what we would have to do without constraints is something like this swoosh frame equal C-g recked
and we'll do this one right here with the x y width and height.
And so we want it in the center of the screen of the exposition right so X goes from left over to right.
And so what we want to do is we want to say view frame size dealt with divided by two minus.
OK.
Swoosh framed sized up with divided by two.
I'll explain that in a second.
And here we want to add some type of position from the top so let's just say we want 50 pixels or 50
points from the top k because X and Y they start at the top left.
OK.
And then the width.
Let's just keep it the same with that it already is.
So we're going to say swoosh up frame dot with are that size width and the height is going to be so
whoosh that frame does size height.
OK.
Yeah there's a lot going on here.
So we'll make this a little bit smaller here.
Oops I forgot the period.
Here we go.
So what's going on here so here's something very important.
Understand.
OK.
The coordinate system in Iowa s it starts 00 starts at top left.
And if you've ever done any type of basic algebra OK you'll know how to work with X and Y coordinate
system.
OK.
If you're working in 3-D space the Rhian X and a Y and Z.
OK so X is horizontal case x is the horizontal axis so starts the top left and it goes from the left
over to the right.
OK.
Starting at zero at the top left and why is vertical.
And starts from zero.
Also at the top and then goes down.
OK.
So we're looking at the top left corner is 0 0 0 and you can move things around based on that coordinate
system.
OK.
So a view where it is coming from.
Well this is the view that is inside of a view controller if we command.
Click this and go to jump the definition.
OK.
And scroll down in here we've got a property called view OK.
And every you I do control has a view.
And so we're just accessing the view we're grabbing its frame all views have a frame OK which is their
position and size.
OK.
So we're grabbing its frame and then we're grabbing the sides of that frame.
We're not grabbing the position we're grabbing the size and of the width.
And so what we're doing here is we're saying let's get the views with one a view controller.
That's the entire width of the screen.
OK so it will go to the entire width of the screen on an iPad that might be let's say 768.
And we're what we're doing is we're saying we want to take the with let's say an iPad 768 divided by
two which puts it right in the center.
So we're taking an interview with because remember the coordinates start at the top left from 0 0 all
the way to the right which is the with OK.
So it goes from zero to the width of the view.
And we're dividing it.
We're dividing it by two.
So we're getting it right in the middle so we take that with we divide it by 2 and that's the center
of the screen.
And then we have this extra math here for a very specific reason.
And here's the reason why I just told you that all of use.
OK.
The frames they start at the top left.
So if we look at our our image here see the swoosh.
Okay it's own frame actually doesn't start here in the middle.
You might think that it starts here in the middle the X in the y but it doesn't.
It starts here at the top left zero and zero.
And so if I didn't do this extra math here this swoosh wouldn't be perfectly centered.
What would happen is this swoosh would be right here in the middle.
In fact it's probably better to show you.
So what I'm going to do is I'm going go to my storyboard real quick and I might change the background
color of the view just to a different color so when we're debugging it's more visible.
The problem is that we're going to encounter.
And so back here in view toward us swift.
So remember how I said we won by putting this divided by two the frame with the width of the entire
of you divided by two is going to put something in the middle.
Well let's take off the second bit of math here.
OK.
This minus swish that framed about a bit too.
Cetera.
Let's take that off.
What I want to do is I just want to run it and show you what happens when we write this code here.
View framed size with the entire width of the view divided by two.
So notice how it's putting the swish icon like the starting of it is in the middle but the middle of
it should be in the middle right.
We went the middle of the image to be in the middle of the screen but it's the starting of the image
that's in the middle of the screen.
And that's because that's how we coded it because everything starts at 0 0 0.
OK.
So if I put this back.
So if I say the frame the size that with divided by two minus the width of the swoosh I can divide it
by two.
OK so if I take this divided by two it's going to give me those coordinates here in the middle.
And that's what we want to put inside of our middle of the screen.
So we take the middle.
We divide it into the main view.
OK.
And then we divide the image into and then we subtract that Delta us we subtract the width of the to
about about two out of the width of the image or the view divided by two.
And that's what's going to put it in the middle.
So if I run it again and you're like oh this is too much math is too confusing.
Well it'll take some time but it's ok.
Notice how it's exactly in the middle of the screen right where we want it.
OK.
And the math is very simple.
You've got to wrap your head around it.
So what I want you to do.
Don't understand this and I want you to look at this code and look at it some more to understand exactly
what is happening.
I'm going to explain it one more time.
OK.
As you can see on the screen here.
OK let's let's say the standard iPad with which it is 768 768 points or pixels.
OK we're not talking about retina display just the regular.
So from the left to the right is 768 pixels.
Well how do we get the center of that.
We take 768 or whatever the view with this.
So this green view here the view this viewer you see here is the screen view you see here that is 768
points were taking divided by two.
We're saying we want our squish logo to be right here in the middle but remember when we put it there
it puts the beginning of the swish logo there because X and Y start at the top left.
So what we do then is we find that the center point of the swoosh image OK which is its own with.
Divided by two and we subtract that value from the 768 divided by two which puts it here.
Now again if that's still confusing you'll get overtime because that's how you would center things if
you're doing it programmatically.
OK.
And then we just set the width and the height to the existing width and height of the swoosh image so
it stays the same.
One more thing that we want to do is we want to get this background image to fill the whole screen.
This one's a little bit easier.
All we have to do with the image is a B.G. image frame equals view frame.
OK so what we're saying is we want the entire frame.
Which is what does the frame consist of.
It consists of a position and an origin.
OK.
Or excuse me a position and the size.
So if I if I said B.G. image frame there's going to be a dot origin.
OK that's the position.
Origin X and origin y.
So every frame has an x and y position or an origin.
And it also has a size.
OK so it has a size that width and a size that height.
So again every frame has a position and it has a size.
OK so what we're doing here is we're saying we want the image of the background to always be the same
size and position as the view itself.
The green image.
OK so let's go ahead and run it.
We should see the image filled the entire screen which it does.
Are you starting to see how this works so can you imagine everything on your entire screen.
You'd have to program like this you have to set a position in a size.
And we used to have to do these things.
So we set a position the size of this and a position and size of this and we can make things correspond
to other images or other components.
I could say you know put this go all in label just below the swoosh label 50 points below that we could
do all that.
And this is what we use have to do.
And so like yeah we've programmed the Bakra maybe it's not so bad and we've programmed the logo but
look at this.
If I do command right to rotate OK it's broken right we have green on here again because what happened
is the size of the view is changed it's now no longer 768 10:24.
OK.
And so what we would have to do now is write code to get our frames and positions of the swish and everything
to update.
I would have to write and I would have to write code to do a refresh on my positioning when these things
rotated here and this is all manual.
Again this is how you do pixel perfect programming because you can move things exactly where they need
to be but there's a reason why we've moved on to auto layout.
Hence the word auto.
OK where you can actually let IO west.
OK you can let it do the work for you and it may not be pixel perfect but it's very deep and close and
that's what Apple recommends that you use and you can get really close with the pixel perfect thing.
I'm not trying to say you can't but you know guaranteed pixel perfect isn't.
You can't do that with Attilio.
It's just it's not it's not possible or if it is possible it's insane amounts of work even then.
So what have we done.
OK well we've moved things programmatically we've moved the frames we've talked about frames OK which
consists of a origin or a position and a size.
OK and of course you can have frames and then frame so our swoosh for instance it lives on top of our
view.
OK.
The green view that you saw or swooshes inside of that so the the parent frame for the swoosh starts
at the top left 0 0.
If I added let's say another image within an image which is kind of silly and you wouldn't do that.
But then the new sub view or sub image would inherit the parent coordinates of this image here.
OK.
And wherever that starts and so a views frame is always relative to its parent position.
OK.
It's always relative to its parent position.
So a lot is going on here even though there's only a few lines of code here ran some math.
We positioned some things.
This is what you have to do if you want to put things on the screen pixel perfect as you got to move
things programmatically.
A lot of work.
Nobody typically does this except maybe really old code bases so just showing you here and this is not
irrelevant it's completely irrelevant.
So you need to know these things.
But we're going to call this video done and in the next video I'm going to show you a much better way
which is introducing you to auto layout and constraint.
So that's it for now.
Marc price advice slopes dot com.
I know your brain is probably hurting but as we keep going forward it wants to see you later.