What's up everyone doesn't feel calm and in this exciting lesson we're going to learn how to work with
auto layout and multiple screen sizes namely iPad versus iPhone.
What a lot of new developers do is they'll just make one set of designs that look good.
OK.
An iPad but it's mostly for iPhone but they want to support iPad only but that's not the Apple way the
Apple way to build a user interface that accentuates the larger screen size and makes the experience
even better.
And so on the pope and a couple of images here.
OK so this app is called The Death profile.
OK.
And notice here there are some differences between the phone version and the pad version.
OK.
So the phone version you know the these icons right here are lined up here in the middle center in the
middle of the screen.
This icon this image here is a little bit taller Looking at least when you compare them side by side
that's taller versus when you can see look there's more space between this computer and the bottom than
there is right here and here on the iPad these three icons are on the right hand side of the screen
and then on the iPhone These are squares.
But on the iPad these are rectangles.
And one more thing on the iPad there's a button called customized dashboard on the iPhone that doesn't
exist.
It's hidden altogether.
And this is a lesson that a lot of courses and lessons out there neglected to teach and that's how to
use basically traits for the different devices.
So basically being able to build a layout for let's say a compact with which is an iPhone versus a regular
with regular height which is an iPad and then varying for those different traits.
And so you can do lots of things that you can hide and show things you can have bigger font sizes for
bigger tablets and things bigger devices and things like that.
OK so that's what we're going to work on.
But first things first.
Let's go ahead and just clone repo here.
You don't have to follow the step unless you've created a repo for this project which you probably should
get help you should go create a repo for your project and then clone it like so.
Which is what I'm going to do you're going to clone the S-sh you're ill and then in my terminal here
I'm already in the right directory.
I'm just going to say get clone and paste in the URL like so.
And it's going to cloning here and I've cloned an empty repository which is fine.
LS And there it is a CD app dev profile and this is cool.
So all I need to do now is creating an X code project in here.
So let's do that and go to X code beta create a new X code project single view app is fine and I'm going
to call this dev Dasch profile.
And this all looks good here.
And then let's go ahead and just put it in the profile here and click Create awesome.
So it looks good to me.
Let's go back to my terminal command space for the spotlight and LS here and we've got this new project
profile.
So now we're in here and see get status so we've got our changes here so get at a good commit an initial
x code project and then the last thing I want to do is actually just create a branch so get check out
to Ashby and we're going to call this lesson 0 1.
Boom.
OK.
So we're all set up ready to go.
And again you don't have to use version control and this if you want but I recommend that what you do
is whenever you current project going to get create a new project especially if you're learning and
want to get a job having these projects on there will help you get exposure and let people look at your
code and your work.
So we're going to do first is we're going to build out the iPhone screen here.
What I typically like to do is look at both the profiles or both the iPad and the iPhone layouts together
like we did and kind of just think about what I'm going to have to do differently for an iPad because
what we'll end up doing is will be the iPhone first but it lets us think ahead.
So I already know that you know this image might be a little different.
I know that these icons might be a little different and these ones here and this one here so it's just
something worth thinking about as we're building the iPhone layout.
So let's go ahead and do the iPhone first.
So what I'm going to do is zoom out here so I can keep this image open at all times.
Like so it's not letting me move it as usual.
That's OK we'll just move this right here and move this over here.
And now this is looking real nice.
OK.
Cool.
And so let's open up our navigator here again and let's go into our main storyboard and we've got a
blank canvas here that's great.
So the next thing I want to do is just bring over all the images that are required for the project.
I've got them here and a folder you have them as well.
And all we're going to do is go into the assets folder and we're going to drag all those and so comment
on the images that are on my other screen here.
And I'm going to drag them in and I've given you 1 x 2 x 3 x images for everything.
Cool.
So back to the main story board.
Let's go ahead and build this layout.
So first things first is I know this is an image back here.
And so what we're going to do I mean this could have been you know a view that we set a grading on and
put an image in the middle.
But the way our designer did it was he gave us a single image.
OK.
So it's open with the right hand side here by clicking this top right icon over here utilities and I'm
going to type in the word image to bring up an image of you and we're simply going to drag it up here
to the top.
And I'm just going to eyeball this.
I'm going to make a pixel perfect.
And what I'm going to do is go ahead and pin this from the top from the left and from the right hand
and I will give this a fixed height.
For now I may change it later if we need to but for it I'll give it a fixed height and just assuming
it will work on both iPhone and iPad.
Again you don't want to over stress about supporting both screen sizes at the same time.
Build it up for iPhone first and then go into the iPad.
So give it a fixed height let's say 150 since it's a more even number.
And that looks good.
Now the next thing is I'm going to select this image here and let's just go ahead and get the background.
It's just the slopes here.
And of course we have a problem.
It's stretching it.
So instead of Skelp to feel how about aspect feel.
Now you notice when we do aspect feel it goes out of the edges here OK which isn't good.
We don't want it to do that we want to cut it off.
And so whenever you're working with aspect feel if your image goes beyond the bounds all you have to
do.
You can do this via code or here in Interface Builder is go down to clip to bounce and click it and
what's going to happen is anything that's out of the bounds is going to be clipped.
And this is a common problem that a lot of new developers have is this clip to bounce Oh what do I do.
How do I it's going off the edge and they think something's wrong.
That happens a lot is that you sometimes just like to bleed out and stack and you think your stack is
broken but it's not it's just your clip to bounce.
I'm going to turn that on so it clips it cool.
That was easy.
So next thing we'll do is this sort of icon here on the left hand side.
So I want to do another image of you.
This might be you like a profile right like on a profile screen or something.
So let's just say 150 by 150.
That's a little large.
Say one 21:20 I'm still seems a little big.
How about 110 by 110.
Again I'm just eyeballing this.
I know it is a square but just eyeballing it drag it around here and it looks about right.
So when you change the image on this and this one is like a profile image so that's not it.
Let's look for slopes profile logo.
There it is perfect.
And let's just go ahead and do aspect feel it.
It's not going to stretch because the image is a square but I always keep an aspect feel anyway in case
it ever did change.
So I've got this image here.
Let's get the label on the screen
says Death slopes.
And notice how it's not actually here in the center if it's in the center.
On the image if it's in the center it just doesn't look quite right.
Looks like it's almost a little lower but for the time being I will put it in the center just to just
to keep things easy for now.
We'll go back and adjust later.
Going to change my font to custom am I go to Avenir I just like that font.
Avenir And let's just change it to medium and I might change the font size a little bit and we're gonna
make the same slopes.
We're not going to write any code in this lesson we're this is all about supporting iPad and iPhone
using just the constraint system OK.
And the different size classes.
So slow.
Silex good.
And also I'm not going to go in the code and show you how to do these rounded corners.
You already know how to do that which is.
You can either reference an outlet or create a custom view and then set Lehre dark corner radius and
then it'll set the corner radius on this on this image here.
So you can do that on your own for practice and then I'm going to put three more images these icons
here.
You know these could be buttons as well.
Now I guess we can make them bunds let's make them buttons.
Why not make three little buttons like so and we'll take out the word button and what we'll do is we'll
put an image here.
And this image is probably going to be the camera icon with the camera but no camera button Rigaud make
it a little bigger.
I'm holding down shift so it stays in the square it maintains the aspect ratio.
And all I'm going to do is command c command V or I can command to duplicate.
Same thing.
You got three buttons that's the camera.
I think the other one is the favorite psilocybin favorite button and this one is in box but and like
so.
And of course it probably makes sense to put those in a stack.
You will get to that in a minute.
So whenever you start seeing grid things like this immediately comes to mind stack you stack because
it just it makes things really easy to work with here on this.
I'm not sure yet if we want to use a stacked view because we may have to manipulate the text and it's
position and stuff.
So anyway we'll see.
Let's go out and get these other four images on here.
So we have an image here and force an iPhone a square right.
So let's let's round let's guess.
You know we want to own 50 about 150 could be four on there.
You know maybe let's do one 30 by 130 just to be safe for now.
And what we'll do is we'll set the image on this one.
So this one is data and it's stretching it stretching stretching the graphic a little bit so let's say
aspect feel OK.
And then of course turn on clip to bounce because it's bleeding.
Looks good to me.
And then let's go ahead and commanded a duplicate and we got another image right here and this one is
going to be data not data.
This one is video code videos image is not right.
I think it's this image images image.
That's a weird name.
Blame it on the designer.
You can yell at him later.
OK.
So now we can probably put these two in a stack.
You just to make sure we start tying tying up the loose ends here.
We've got to tie some loose ends so let's select this and this and let's put them in a stack.
And of course you're like oh it's broken again what do I do again Mark.
Stock futures are scary.
Well it is really annoying that it does this but we'll fix it.
So what's happened here is stack views.
They like to do the thinking for you right remember they do constraints for you.
And so without putting some type of limitations on the stack.
We have weird things that happen like this.
And so what I want to do is maybe set a max with on this one image here.
Let's say a max with and this is how you do it.
So let's click the pin button on this image so it kind of like the image itself here.
Data image put the pin button and sets a set of Max with not 500 but let's add it to what we had of
that one let's say 130.
OK.
Is that really that small.
OK maybe we should say 1 140 on 140 on that looks a little small.
OK 140.
And notice how when I double clicked on that constraint so select your image and see that constraint
there the with equals 140.
So with stack views you don't typically want to fix with a fixed height you can it and it'll work in
most cases but sometimes it'll break.
So what's actually better to do is set a less than or equal to or greater than or equal to.
So we we want the value be less than or equal to 140 in case it's like on an iPhone and it's really
small.
We don't want to set a fix with the 140.
We want it to be able to scale down on its own so we stack views.
You can set a fix within fixed type.
Apple actually recommends doing a less than or equal to or greater than or equal two.
Not to actually do the equal to itself and that's fine.
So that looks OK but of course this is like really long.
And so we can set one more constraint on it.
So what I want to do is I'm going to select this image data image click the pin menu and I'm going to
click this icon here called aspect ratio.
So we've set a max with OK.
And so if you have a max with with an aspect ratio It'll keep it as a square.
OK which is what we want to hear an iPhone so click aspect ratio and you may notice I didn't do anything
Mark.
Well that's because the aspect ratio is the one that is the way it looks right now is the 14 to 25 but
we don't want that.
We want a 1 to 1 ratio.
Nice little square.
So double click the aspect ratio constraint and we're just going to type in one colon one and it's going
to put it into a square.
I hope this isn't overly confusing to you.
So if I can recap this when you're working with a stack you remember stack views add the constraints
for you.
OK.
But it didn't look the way we wanted it.
It's it's smart thinking wasn't smart enough for our apps so we just a few limitations on the stack.
One is we say hey don't let it be any wider than this.
And then we also forced it to a square.
OK.
Using a 1 to one aspect ratio that way it always stays a square.
OK.
And so we got those constraints there.
But of course this one didn't really obey Well what I'm going to do first is I'm going to go to my stack
view and I want to change the properties because most of the time you don't need to set those same constraints
on every single thing in there.
Sometimes you might have to but sometimes you don't.
And when do I not use constraints and when do I use constraints or when do I use that.
You adjustments here in the in these items here.
It's just you have to play and fill around with it.
So what I'm going to do is make sure my distribution says feel equally OK and notice how it made the
other ones match.
So what happened was this first image it has limitations.
Right.
We set one to one aspect ratio and a max with.
And when we say when we say feel equally then it has to adopt those.
On the other items in there.
And so we don't then we don't have to go and add those constraints because it's doing it for us automatically
which is really nice.
So now that we have the stack you looking about the way that we want K we're going to go and wow we
should pin from the top down we're not ready to pin it yet so let's go ahead and start pinning these
items.
So we have pinned this I believe this image up here.
So the next thing to do is to pin this.
So what I'm going to do is I'm just going to pin it in the left margin at zero with the margins on and
we'll say 100 from the top just to keep it equal and we'll give this a fix with a fix.
So it doesn't do anything weird.
And then this label here I'm just going to pin it self to this image right here.
I had them in a stack when I was building this out and I just couldn't get the height and positioning
the exact right way that I wanted.
You can try it with a stack do.
But again when stacked these aren't giving you the look that you want you you just set the manual constraints
which is no big deal.
So what we're going to do is I'm going to select this and this.
OK and I'm going to click the align menu and I want to give these guys vertical centers here.
Now the slopes label is going to adopt to the death slopes logo image because those already have constraints
on them.
So when I put vertical centers you know moved them slopes just slightly there.
So these will now always be in the vertical center to each other always the same.
Now what I'm going to do is click the slopes logo and I'm going to just pin it to the left.
So pin it to the image here by 8.
And yeah looks good.
I don't think we need to know all that.
There's no read there so I think that's not going to move anywhere.
It's going to stay at the center of this image here and it's going to stay just to the right of it because
we pinned over there to the right.
So that's looking real nice.
And then the next thing is holding shifts like these three buttons and click the stack view.
And let's go over to the attributes and let's go ahead and distribution feel equally and let's just
add some spacing.
No big deal just some nice nice spacing.
Very good aka you're working with staff they use an interface builder is kind of like like you know
painting like Bob Ross like where you just kind of go on the canvas and you're just like you splash
things on and you put a little inspiration in it
for you.
And I know it's a little annoying for those of us who are more scientific as US programmers are people
who are more into math because we want everything to be perfect.
But when it comes to us that use some things just aren't perfect.
It's just the way that it is.
But the benefit of it not being perfect is it looks good on multiple screen sizes without having to
write tons of code which I think is more important.
It's about the user experience more than anything else.
So that looks good.
We've gone ahead and made it equal.
I just want to go ahead and pin this in the center of the container.
Like so and then I'm going to pin it to the top of this.
Let's see.
It's this depth slopes image here 24 hours to say 20 let's say let's just leave it at 24.
I like that.
So 24.
OK.
So that's going to stay right there in the middle which is looking really good.
OK.
Now we have this bad boy here this stack to you.
So let's do something similar it's pinnate 24 from the top.
Similar to the other one.
And in this case I will pin it to the edges so let's make sure margins are on and I'm going to say let's
say eight from the left and eight from the right are perfect and let's go ahead and add some spacing
to this stack.
So we have the nice spacing in the middle.
Notice how shrinks down automatically.
OK this is really important.
Remember when I went in here and I said it's a width of less than or equal to 100.
We've basically given it permission to shrink itself down which is what we want if I just set max with
this would not be doing what we want it to do.
In fact we'd probably have something broken right now.
So again when working with things inside of stacked view you can use fixed width and height but sometimes
it can break and so it's better to use greater than or equal to or less than or equal to.
And that's a good let's say 15 spacer and I'm OK with that right there.
This is awesome.
This has come this is really come on together.
All right.
And so yeah this is looking good.
And then let's go ahead and command to duplicate this and I feel like it just did something naughty.
It did.
It just pasted junk out here in the no man's land.
OK.
All right in your face you just keep acting weird.
So I just can see that it can even be in here.
It does drag this down like so it's just acting weird.
And in our stack you hear we had a spacing of 15 so we want this to be 15 away from the stack you above
it.
So I'm going to go ahead and pin it 15 from the top and again similarly eight from the left eight from
the right and boom.
I like it.
You know it's there we don't have enough spacing on the bottom.
I'm OK with that.
What we could do.
So it's less than or equal to 140.
We can make it smaller.
I could say 130 we can give that a shot.
So if I said less than or equal to 1 30 it's still not enough Yeah it's OK.
What you're probably asking why is this not working.
The reason is stacked you add the constraints automatically so it will decide on its own if it wants
to shrink it or not.
So one thing we could do is reduce the space here and the space here to move these up but I don't want
to.
I'm OK with the way it looks if the designer really cares that much he can come yell at us later about
all of this here.
So let me make sure that this is all looking good.
So if I go to i-Pad here I should look almost identical.
OK cool.
So here's the problem with the iPad right.
So like well these mark these images are too big we need to change images to actually do that here.
We're looking at like the images are too big.
Yeah I know it looks like the iPhone right.
But it.
I don't know.
It just doesn't feel like the right experience and it's not like this is not the right experience.
It's a great experience for iPhone but not the right experience for for iPad.
So I just change this image.
The video on and this one is the code one I'm typing code and the data image code.
Yeah there you go.
Again these are very well named you can blame that on Evan laong our designer.
Next time you see him.
OK.
So there's four images is not looking great and it's definitely not looking according to our designs
if you remember correctly right.
OK this is a better user experience because you know the icons are better you're utilizing the space.
And this is over here.
You know better laid out.
You know you don't need to hear on the media the extra button that you know the iPad calls for where
you can customize your dashboard.
Remember you couldn't do that on iPhone because there's not enough screen space so we have few things
to fix here but what we've done so far is we've built out the we've built out the layout for iPhone
and is looking well and good so we're going to call this video done and in the next video we're actually
going to use what's called size classes sized classes will allow you to specify specific traits for
different screen sizes that affect that screen size only and other screen sizes and that's how we create
wonderful user experiences without having to write any other code under the hood.
You can hide stuff and turn things off but you don't have to write extra code which is really nice so
that's it for now.
Mark Price it does slows the com let's support i-Pad
saying have a good.
Have a good.