This was a duck pond we're going to continue on and forward in our quest to support the iPad using size
classes and first things first.
Let's do a little get cleanup get work here so get status.
I'm going to say Get add dash a good commit and we're going to say built iPhone interface.
All right.
And the branches are one I believe.
So you get push origin less than 0 1.
OK.
We're ready to go almost yet.
Check out Dasch be less than zero 2.
All right.
Perfect.
So here's our interface does not look right on iPad but does look right on iPhone.
So the key and trick here.
All right is going to be supporting the iPad without breaking the iPhone.
And we're going to size classes to do that but it's going to be fun and be magical.
So let's just go ahead and make some magic.
So first things first.
All right.
On the iPad that does SILVIS logo is a little bit down.
OK.
We talked about that and so I'm going to move it a little bit and this guy here.
I'm OK with it.
It's not perfect but I'm going to leave it as is so let's change this guy right here.
OK.
So zoom in and this Dev's slopes label.
So if we go to our attributes here they are constraints.
I mean will notice that it's the center of it's to the center of this logo here.
But what we really want is an iPad.
We want to the center of this logo and down a little bit maybe probably make the font on a little bit
bigger on iPad 2.
I think the designer neglected that and I think we should fix that thing designers.
OK.
So what we want to do and this align center Why would I want to do double click this.
And here's something very important and it's super obscure.
If you're just gliding through here but you're going to see something called installed and what that
means is is this constraint installed across all devices.
And currently it is so whatever we have set here is applying to all device sizes but we no longer want
that.
OK so if you want to make another constraint or a size class that supports iPad or a bigger screen size
or smaller screen size right next to install there's a plus button in which you want to do is click.
Plus OK and what we want to do is regular with regular height.
That is an iPad.
OK.
Compact with regular height is an iPhone regular with regular height is an iPad.
So I'm going to click add variation and is it installed on regular with regular.
Yes it is.
But we no longer want it to be installed on the pad.
So what we're going to do is turn it off and notice how it's read now.
OK but if we go to the iPhone it's not red it's just says it needs to be OK but on the iPad it's red.
That's because it's now missing constraints because we turned it off on the iPad.
And we did so here in the Over here in the constraints.
OK.
And if you notice it's gone now.
If we click all though it's right there but it's hidden is it saying Hey there's constraints here but
they're not being applied to the size class of this iPad.
OK.
So this size class is what's currently affecting the view that you're working with which is really important
be careful not to click between these and think you're doing something that you're not.
So we're in this size class and now we need to go ahead and do the same thing that we did before except
with a different a different attribute.
OK with a different value.
So what I'm going to do is I'm going to control drag just to be different from dev slopes to this logo
and I want to say center vertically.
So now yeah it looks just like it looked before right.
However however on this one.
OK.
What we're going to do I mean to take this off installed what we're going to do is we're going to add
regular regular and on this one what we're going to do is we're now going to set a constant maybe plus
10 plus 15.
So it's got aligned to the center plus 15.
OK.
Yeah I like that.
So it's not installed on regular iPhone it's only installed an iPad.
So it's what it's about plus 15 almost to the bottom you're not centered anymore.
But if we go back to the iPhone.
Notice how it's it's where it where we left it right here in the center.
And let's look at this again.
I'm on the iPhone.
I've clicked the iPhone device.
And if we double click in the align center Why notice how it is not installed on the regular with regular
height.
OK it's installed and everything except for that when it says installed.
That means everything.
But if you turn off one of them like so it is no longer installed on that screen device.
OK.
So makes sense.
And so if we go to iPad OK you'll click the label and you'll notice that this is not installed in anything
else except for regular with regular height which is i-Pad.
And what it is it's the center of equal centers vertically plus 15.
OK so we've just done our first sized class where it works on one screen size but not on another.
OK and you're going to want to watch this video again if this confuses you.
I have no other way to explain it.
We've done the steps slowly and curiously as possible.
So that's working there.
So the next thing we need to do is we need to get these icons lined up with this.
And if you notice in the image here they're lined up with the word Debb slopes.
So notice how we did that center plus 15.
We're probably going to do the exact same thing for this stack view here.
So I'm going to select the stack you hear on the iPad and let's look at what we got here.
So in this case it says a line center X to Super view well we no longer want this centered in the screen
so we need a change.
So double click this align center X because we created it applied it to all the size classes that will
click it and notice how it's installed everywhere.
So now what we want to do is this go ahead and add the regular regular and turn it off.
It is no longer installed an iPad.
OK it's installed everywhere else except for iPad you with me so far.
OK so it's no longer and sold an iPad but of course it is still centered in the Virgin vertically here
on the iPhone.
OK.
So now what we want to do is with this stack you select did we want to just move it to the center of
this plus 15.
So what I'll do.
See and there's a bottom space and a top space you learn any changes to this top space the devs those
Loga we no longer need that as well either.
So double click that and let's add regular regular and turn it off.
There we go so it's no longer pinned here and you're going to start seeing a bunch of red lines here.
Why.
Because we broke the whole system.
The system is down because we had to remember how we've talked about in the past with Atalia when you
build layoffs you have to build everything from the top down you can't miss one thing.
When you work with constraints everything entirely entire has to be built out.
And so we just broke that because it is no longer pinned to the top of this so it's like oh no where
do we go next.
And everyone's confused and crying and never fear we will save the day by simply grabbing the stack.
You all right.
And I'm just going to control drag.
I'm a little worried that it's slipped in my button and not the stack.
You know let's just go ahead and grab it from here control direct from the left side and then to the
logo.
And what we want to do is we want to center vertically like so right and now all the constraints are
back together.
The red lines are gone but of course we don't want to center vertically.
We want to center vertically plus 15 right so line center Y.
All we need to do is first off make sure it's not installed on all the devices.
So add a variation and then turn off the other devices.
OK.
So it's only installed on i-Pad.
All right.
This is really important stuff.
You can't just leave both on or one on you forget.
They both need to be done this way.
Take off all the devices and just put the regular with regular height.
And we want the plus 15 just like the dustups work.
So it's centered and there's really only one more thing that we need to do and that's in this stack
view the right hand side as far as this goes here.
So with the stack you selected Let's go ahead and click the pin menu and what I want is it to be and
just ate from the right hand side.
And boom.
That was not that bad actually.
And so save this here if we would look at the iPhone it should still be intact which it is.
That's great.
The spacing is a little bit bigger than I want.
Now though that's interesting.
It played around with some things I'm not happy with it so this is really cool.
If we want to fix this we can actually add size classes to specific attributes so see how the spacing
is 29.
It's a little bit too much.
What if we click the plus sign.
OK so compact regular So on an iPhone.
Let's make it 29.
OK.
But on an iPad.
OK I'm going to click it again.
Regular regular and I bet it will be whatever we want it to be.
Or actually let's leave out the regular regular and on the iPhone.
Let's just make this less.
How about 15.
Well that's not enough.
How about 10 still not very much.
Is it feel equally it's.
It's because it doesn't want to shrink them because it has to feel equally full.
No we want them to feel equally here.
Let's see what we have for images here.
These are buttons it's maintaining the button size and see how the outline here is feeling.
Equally here Mm hmm what I'm going to do is I'm going to have to say I'm going to make an executive
decision as a programmer and say hey designer I know you wanted these buttons a lot closer but I'm using
a stack.
And it gives us a lot of convenience.
Are you OK with the way it looks and then he'll say yeah you know this isn't too bad.
If he says no it really needs to be fixed.
Then I would probably need to take these out of stack views and hand do the constraints like we've done
in the past.
But I'm making an executive decision.
Why.
Because the designers are not here.
And what the designer doesn't know isn't going to hurt them.
So it looks good enough to me.
We did adjust the spacing a little bit for an iPhone but it didn't get it quite to where the image needs
to be.
But that's OK.
That's the decision sometimes.
In conversations we have to make as programmers.
So the other thing here is these images right now there's a one to one aspect ratio.
OK so if I click this image here and this one too.
They both have one to one aspect ratio.
So what I want to do is I just want to turn this off on iPad.
So click the image click the ruler up air and then see this one to one ratio.
What I want to do is click the plus button add variation and I do not want to install on regular regular
phone.
It's just gone no longer affecting iPad.
That was pretty easy right.
All we did was we turned off the square the one to one ratio on iPad and will do the same thing with
this image here.
So it says one to one.
Let's just go ahead and say add this here regular regular and turn it off.
Boom.
Now could these be a little bit smaller.
Yeah they could but this was this was really easy work here.
Like I almost don't want to change.
We've got a lot of space extra space here.
So I kind of just want to leave it although I do want to move this top stack view down slightly from
the button.
I want to utilize the screen space better and I also want to add more space maybe even more space between
these icons here as well too.
So if we look over here the top space is 24.
OK let's click that let's add a regular regular for iPad and let's turn off the other one here.
Actually let's let's think about this here for a second.
Let's turn off the let's turn off the iPad on this constraint.
We're going to create a whole new constraint.
Now guys let's turn off that one and then let's click this stack you again right here.
So now the top space is gone which is exactly what we want so let's go ahead and make a new top space
and instead of twelve point five let's say 25.
All right.
25 from the top.
And what I'll do on this one is we'll make this installed on regular regular but then turn off the other
devices.
So this was only an iPad and 25 is not enough let's say 50.
That looks much better.
And if we go to iPhone it's still maintaining the old one because we left that constraint there.
Looks perfect still.
So this is coming together very nice.
And so 50 there.
And then let's just do a little more spacing between the stack these themselves.
So score to this bottom stack view here.
And this top space says 15.
Let's just go ahead and turn that off on regular regular.
And then we'll add a brand new constraint to it.
Like so top space and let's say 25.
And I like that.
And then let's go ahead and turn this off on the everything and just leave it on private and that's
looking good.
Let's make sure nothing broken iPhone.
And it did not.
And so yeah this is great.
We've actually building a custom custom designs just here an interface builder that looks differently
and is better suited for the user.
One other thing was I said I wanted to increase the font size here which I do.
So I see this dev slopes label here.
Let's go to the attributes inspector and you'll see right here next to the font.
There's also that plus button.
So let's click it and do one for iPad and on the iPad.
Let's just make it bigger iPad only is going to be bigger.
And that's nice.
Like fills up the space better and we go to the iPhone and still the same size.
That's looking great.
And the last thing we want to do is hide something completely if it's on the iPhone.
And that's not too big of a deal either so let's add a button says size it up the way that we want it
a little bit here and the text is going to say customize dashboard like so and the text color will make
it white.
You know and give me what I want or my color slider greyscale.
Thank you.
White.
And then what we'll do is we'll set a background color or background color.
Here you are.
Let's set it to a nice red pick any red you want whatever.
Make it a little bigger here and I'm not going around the corners on this either.
OK.
I'm going to change the font size here.
So I want to change this to a custom font and we'll just keep it consistent with Avenir.
And instead of book let's just do medium and it's increase the font size so we can actually see it there.
And there's our nice butt and then all we need to do is really just pin this.
So I'm going to go ahead and select the button.
Let's give it a fixed width and fixed height because it's on i-Pad only so we can really trust that
it'll look good on all the devices all the I-pads and 66 would just leave it there.
That's fine.
And that looks good there.
And then I just want to center it in the container so click the align book and do it horizontally in
the container.
OK and there's one more thing that we need to do.
So click your button and all the way at the bottom.
They have this installed.
And what that means is this component altogether is installed across all devices and currently it is
on the iPhone.
It's there.
I don't know if we'll see it because it's now old.
It's life down there but on the iPad what we're going to do.
So select that button square all the way down and instead of installed on all devices we're going to
say iPad only and then we're going to turn off other devices.
So now if I go back to the iPhone it's no longer selected it's not even visible and noticeable here
this customized dashboard button is greyed out.
But if I select the iPad the customized dashboard button is back.
And so what we've just done is we've actually hit a button altogether UI element just by installing
on on regular regular.
So which is really cool.
You can also you can also install things on landscape devices as well too.
So a landscape iPhone device we're not going to go into this too in detail because it's the exact same
as what we just did but see this iPhone here.
Let's pick this iPhone 7.
I can go into the landscape and notice how it's all funky right.
Oh this is all broken.
And so if you had another layout for landscape what you could actually do is on these things here for
instance let's say the stack you and I'm just giving you an example.
You're not going through this but on the stack you know it's how it's installed across the board.
OK.
Well we could do is we could add a new one and this one is going to be height is compact and with is
regular.
OK.
So regular compact that's that's an iPhone in landscape.
And then we would add that here and then we could go ahead and change it around.
However we wanted for landscapes so well you could do is for both tablets and for phone you can have
things in landscape and portrait for iPad and for iPhone.
And you can have you know four or even five different variants of constraints and move things around.
So pretty cool stuff.
I don't recommend most apps supporting landscape for iPhone unless you have a video of some kind then
you can rotate it.
But on iPad it's a lot more common.
So again you would just do the exact same things we did here.
You would just add more constraints for you know a compact high and regular with.
All right.
And then on iPad just to keep just one thing keep in mind is even in landscape it's still regular regular.
OK.
So if you have to have things look differently on iPad in landscape no matter what you're going to have
to write some code.
Ok so if we go into our iPad here and let's just put it in landscape so if you want to look fantastic
in landscape you're going to have to write code.
There are a few more things you could do that's very advanced.
We're not going to cover it here.
I don't think that this is something that you want to put in your brain right now because it's very
hard but what you can do is you can work with content hugging and compression.
OK.
So basically things that you have in your views.
OK.
You can in your and your layouts here.
OK.
Click the ruler you you're going to see something here called content hugging and conta and compression
resistance and that's how much compression items have and so you can start adjusting these values so
things shrink more on different devices.
And it does it for you automatically.
Again it's a lot of work and sometimes it's even faster to programmatically move things.
If you're going into a into like landscape or something but my point is i-Pad is still regular regular
in landscape mode and so it's still applying the same constraints there and you may have to write some
custom code but that's out of the scope of this.
That's far in the advance world and there's a heap of tutorials out there on that.
Of course the documentation by Apple is great as well too.
But you've got a lot on your plate already to digest here.
One more thing is that you can preview adaptations like split views.
So that's a new feature I think was Iowa.
I was 10.
At some point they introduced split views were that you could have two apps open.
OK.
And then it's what it's showing you here is what it would look like if it was on the left split view
or what it would show you if it's on the right split view you know really small little sliver here.
And notice how it's picking the iPhone portrait in this case.
And so anyway you can play around with those and make sure it looks good on apps that have split views
as well too.
So a lot's taken.
OK.
Now this is the bare bones framework but very important stuff.
And what you're going to find is when working with Interface Builder it takes lots of trial and practice.
It is a science but sometimes it's a little artistic too.
So just take time be patient and play around things have fun with it and that's it.
Mark Price a Dove soaps dot.com that's Atilio sized classes.
So you assume.