Hey what's up everyone.
Welcome back to class Mark Price here at death slopes dot com.
And we've done some amazing things so far we've learned about auto layout we've learned about programmatically
moving views with their frames and their positions and their size.
And in this lesson we're going to talk a little bit more about auto layout but we're also we're also
going introduce stack views which is a very very important principle.
So I'm here in my project directory here and what I'm going to do is create a new branch so get check
out.
And this is for my sake.
You can do something similar if you desire or need lessons 0 4 because that's the lesson that we're
on here.
Very cool.
And let's actually let's see what we got here in our directory got our X co-prophet we can actually
do is we can say open app swoosh.
It's called Project and it should open up X code for us automatically.
Make sure it's the beta though.
It is sweet.
So sometimes it gets confused at last regular x Hoad or the beta but all you have to do is have an open
and then the X code proj and it will open up X code for you automatically which is really cool.
Also if you are familiar with X code you may be wondering hey Mark doesn't X go to have get built in
why are you doing all this committing and stuff you know from the terminal.
I do everything from the terminal end and I'm not going to get on a soapbox here.
Well yes I am.
But the reason why is it gives you full full power you're not limited by Tool and code is nice but I've
always done it with a terminal and I switch back between web development Iowa development and doing
it from the terminal as all the same and I don't have to learn a bunch of new tools so that is why I
do it from the terminal.
You're welcome to do however you want.
I'm not your mother.
OK.
So what we got here so far in our app is the main storyboard here and it supports all the device screen
sizes if I click down here the view as I can change it around and you'll see that it works.
And so what we want to do in this video is let's go ahead and just build out our other two screens.
We're not going to connect them or show them yet but we're just going to build them out so we can talk
more about constraints while it's fresh on your brain.
And so I'm going to go find those designs if I don't have them open already which I don't.
OK.
So the flow is going to be we go from the Welcome screen to the league screen and then from the league
screen to this finished screen.
So let's go ahead and do the league screen first.
So what I'm going to do is here in the object library I'm just going to grab this view controller.
OK.
We're going to drag it on.
This is a whole new screen.
And when I say screen it is a view controller.
OK.
But it manages a bunch of views.
It's unique it's not a bug.
And you know I can't put a bug in.
If you notice if I type in button here I can't drag a button on this white canvas here because there's
nothing there.
All the views that you place have to be on top of view controller here in the Interface Builder.
And so I'm going to leave it here just as is floating for now.
And let's go ahead and build it out.
I'm the type the word image we're going to put on an image view when we've done this before.
We're just going to put it on the edges here.
And what we're going to do is go to our pen menu here at the bottom right.
They add new constraints and we're going to add it to all four corners of the edges because we want
it to hug to the corners of the screen.
We want it to be full screen no matter what device it is or when to click add for constraints.
Great.
And what we're going to do is select the image.
And of course this one was the desired league game.
And what we're going to do is instead of scale to fill say aspect fill we don't notice the difference
right here.
But it does make a difference depending on what device size you have.
So it's very important to put an aspect feel you don't want your image stretched especially with it
because it will move things automatically and at runtime you may notice some differences you don't like
aspect feel always or aspect fit.
OK so let's look at that design again purview.
OK.
So what we have here is the logo.
We've got some texture decidedly three buttons here and then a fourth one here.
Now what I want you to do is I want you to think about how you would build this using constraints.
Can Now if you want puzzle video you can go ahead and do that.
How would you build this using constraints.
And then what I want to do is I want to show you a little bit better of a way to do it.
I was going to use constraints.
OK but we're going to work with the stack you stack he was introduced with I was 9 and it's amazing.
And what it does is it builds the constraints for you and a lot of cases.
You're not always going to use a stack view but you should always use one whenever you can and stack
is another step away from pixel perfect so constraints and Ottaway.
It was one step away from stack.
These are like two steps away from it.
So if you can get your look with a stacked view great if you're finding that you can't achieve the look
that you want with the stack the way you're going to have to not use it and instead use constraints.
So let's go ahead and get this going here.
So we've got the swoosh logo on the first view controller.
I'm going to click the ruler here.
And I notice that it's 40 from the top which is fine.
I sort of remember that number here.
I'm going to copy this so command C and then I'm going to go over here to the other view controller
OK down here and on the view I'm going to command V.
Now if this this is not visible for you right here what we just did here.
There's a little icon right here that you can see as we hover over.
It's called the document outline.
OK clicking it expands and hides it.
So if you don't want to see it there you want more screen space you can always hide it like so.
And so what I've done is I've copied it from one controller over to another.
And the reason why I didn't just grab it here and then click over here in pases because sometimes it
just doesn't work.
So no big deal.
So let's just drag this up to the top here.
We're not going to pin anything yet though OK.
And let's look at our preview again see what else we need so we need the desired league and then the
three buttons here.
So let's go ahead and get some text for the desired league.
I'm going to copy this command see.
And over here on THE VIEW on the second view controller command V.
And I'm just going to drag it up eyeball it for now and I'm going to type in desired desired league
and I can't remember if it was camel case or.
OK.
There you go.
As the capital L.
OK desired league.
Good zoom in here for you.
You can see it better.
For those of you who are watching from your mobile devices and we've got our desired league I think
we want the text to be a little bit bigger.
That's good.
So desired league.
What else is on here the three buttons and then a fourth one right.
So these are our standard buttons.
And then the fourth one is a men's women's coed and then next.
OK.
Simple stuff we've done this before.
And luckily we've got existing controls here and you're going to find this is very similar in your professional
development that you can to reuse a lot of controls and copy and paste which is really really nice and
everything I'm showing you here is how you actually build apps.
You know some people do crazy things but we do things the way Apple recommends.
Here at dustups and in our app so everything if you're using the def subs app to watch this which you
should because it's amazing.
Everything that we've done in this app I'm teaching you OK.
There's nothing that we do that's crazy that you're not learning here.
OK.
I'm giving you the real deal here.
OK.
So sometimes it can be confusing which is fine.
It just takes a lot of time and practice.
And I'll explain things over and over again.
And if you ever feel that you're above the curve you can always speed up these videos and watch me at
2 x which is very entertaining or one x is even more entertaining watching me at one X..
I just it's awful.
So Command they get started.
OK.
So Comanche for this get started button over here on the view command V.
OK.
And there's three buttons right.
So I'm just going to holding this here I'm going to go ahead and command to duplicate command did duplicate
again.
All right and what I want to do is men's a women's women's.
Just double clicking these labels here inside the buttons and Co dash ed.
And then of course there was a next button at the bottom.
Select this either click off and click it and command D wasn't working again.
Sometimes it works sometimes it doesn't.
And it can be finicky like that down here.
We're going to type in the Word next.
OK.
So do you notice how when I click these buttons there they're red on the outside but McLuckie these
ones they're blue right.
Blue is happy blue skies red is like evil demons.
You know you're doing something wrong.
And there's a reason for that there's a reason why this is all red.
And what it's telling us is that our constraints are not set.
Remember how I said when you work with auto lay out everything on the screen must have constraints.
Every single thing on there must be completely laid out with constraints.
So what it's saying is it's not.
None.
Well I don't know why this one's why this was blue shouldn't be but you know these are red.
This is really interesting.
This could be a bug with the X code 9 Beta.
But what it's telling us here is that there's a problem.
OK.
So our stuff's on the screen.
But of course if we look at it you know on an iPad obviously it's not doing what we would expect it
to do.
And so let's go ahead and fix these problems and what we're going to do instead of just using constraints
one at a time you know so pinning this 20 or 40 from the top centering it horizontally which you've
done before.
We're going to use something called a stacked view and stack these take a little bit practice to get
but they're super easy and trial and error is perfectly OK when working with stack use.
So what I'm going to do is I'm going to grab these two items here and what we're going to do is come
on down here to this little icon here that says in bed and stack.
Now I know what you're thinking.
Oh my gosh what just happened my screen got all messed up and so now I'm stacked views are a little
bit finicky but you'll see how easy they are to work with very soon.
So what I'm going to do is over here in the document outline expand this here and let's just go ahead
on this desired league logo here and let's just give it a fix with it we lost it's with.
It's probably at 0 which it is.
And that happens sometimes it's finicky.
So what we're going to do is in the pin menu.
OK.
We're going to give it a fix with let's say of 120.
It's not really long enough.
Let's let's make it a little bit longer.
How about 150.
OK.
So 150.
Perfect.
And we're also going to do.
So that's gone therefore I have to give it a fixed height when I say 20.
So anyway all we did here was we gave this a fixed width and height because once things are in a stacked
view they can be compressed a little bit with content hugging and things like that.
And so we've got a stack.
All right so here's the really cool thing about it.
OK now that we've just played around the view a little bit we can actually pin a stack view to the different
parts of the screen.
OK.
So what we can do is we can just like we've pinned other things before we want this to be 40 from the
top remember.
OK.
And let's go ahead and make sure margins are on and we'll go ahead and say zero from the left and zero
from the right.
And what I want to do is add those three constraints.
Now with a stack you you don't typically ever ever want to give it a fixed height OK.
Or fix with Usually you want to pin it to things but you don't want to give that a fix with a fixed
type of stack.
You will do is take all of these views and cited them and it will automatically add the constraints.
OK.
Now we did have to add a width and height because one of the things got messed up.
But you typically see a size and height excuse me a with a high of some component in there and they
all more around it.
So we can have a whole bunch of components or views in a stack and it adds all the concerns for us so
we don't have to say no leading trailing pin here pin there.
It just automatically works.
So what we can do now with the stacked view OK is we can click this icon over here the attributes inspector.
And here's some properties of the stack.
You say there's an access.
It's a vertical horizontal.
In our case this stack use a horizontal or excuse me a vertical we could change it to a horizontal were
there side by side.
But isn't that cool just by changing this here.
And you can do this programmatically as well to your entire layout changes and you don't have to do
anything else.
OK so if you're starting to see maybe if you envision you have an iPhone app and then when you rotate
it in the landscape all you do is you change the access of the stack and it magically works.
No other code necessary.
Maybe one line of code to switch it to the switch.
The access which is really cool.
So we want vertical alignment center leading field trolling.
You should play around with these big centers fine for right now.
OK.
We don't want to.
On the left we don't want to.
On the right we want it right in the middle.
And then there's distribution.
How are the items inside of it distributed.
Well you can say feel feel equally feel proportionally to the size of the object.
And again these are things that you can play with as well.
But don't ever change this unless I have to.
So I'm really big on feel we may revisit it.
And so this is really cool to the spacing.
So look at this as I add spacing it gets further away and so let's look at our design here.
And so it's we know that it's a lot further from the swoosh logo.
OK.
And I love that I'm looking at the designs 40 from the top is probably a little bit too much.
And oh you know what and it's pinning to a margin here.
So what we probably need is just actually 20 from the margin.
So that makes it a lot more sense.
Let's click our stack view here and just change click the ruler here and then change the top space.
Let's change it to 20.
So it's more like the design.
OK.
So in the stack you just go ahead and increase the spacing.
OK.
So click the identity attributes inspector here and just click this a few more times.
OK.
So this is really cool you can set spacing between objects All right.
And let me show you one more really cool thing that you can do.
All right.
You could just take an item and drag it right in the stack view and automatically adds the constraints
for it so it's doing the same spacing in between them.
Of course the with on this isn't anything important or good because we didn't settle with on it.
We're not saying how much we want it to be.
But that's really cool right.
So you can just drag items in here and they automatically now fit in the stack with the spacing and
everything.
And this is really amazing.
Very powerful.
We never had this until Iowa 9.
So we're not going to do that though I just did that.
So in our stack you here we've got the swish logo in the desired league.
The next thing I want to do is create another stack.
You.
So I'm going to select these three here by holding Shift and of course they have the red lines because
it's saying hey we don't have the constraints and all we're going to do is click that handy dandy stack
you button again at the bottom here.
OK.
Now of course it's ugly again.
That's how it always happens.
But let's go ahead and set the constraints now for the stacked view.
OK so remember what you do is you set constraints on a stacked view and then the things inside you don't
typically set constraints on maybe a with or a high on one of the items.
OK.
But you don't set constraints on them.
So we want this to be on the margins here.
So zere from the left zero from the right.
And how far do we want it to be from the desired league.
Well let's look at our image here.
You know probably 50 I think 50 is probably what we want.
So it's click this pin menu again.
We have to do that against zero from the left from the right.
And let's say 50 from the other stack view OK this is the stack up here we want it to be 50 points or
pixels below it.
And then we're not going to specify a height of course because you don't do that with stack use.
And boom there are three buttons right.
Really really cool.
So we've got three buttons.
But of course the kind of bleeding over each other which is really annoying.
They're probably larger than they should be.
Let's see here.
A 50 50 50 Well that's actually OK.
So what we can actually do since 50 is the correct type is we can go over here on our stack you and
we can just go ahead and add some spacing and they're all 50.
And look at that how magical We didn't have to set constraints we don't have to space every single one
just by changing the spacing.
There are now space properly which is really just fantastic.
So we have to stack these here one at the top one at the bottom.
Why didn't I put these three buttons over here with these.
Well because I've worked to stack these before I know that things can be a little tricky.
And this has a spacing between the swish and the desired league.
But these buttons need to be spaced equally so how could I get a weird spacing here which is abnormal
and then equal spacing here and it would not be easy.
So in our case it made more sense to have a stack at the top and a stack of you at the bottom.
OK.
And of course you can now drags many buttons in here you want so this is what's really amazing about
stack use and also the reason why we don't specify Heights on stack use is because I can do this boem
boem boem.
OK.
And they all just appear here like this.
We don't want to do this but again here's the point.
If we had not used the stack you would have to have manually set all the constraints on every single
button here.
So let's do that.
We don't want to do that of course but OK get rid of that on now on that one.
OK.
So pretty cool.
Men's women's coed Let's see how her design looks compared to this.
You know I'm guessing we're going in a little bit more space because of the borders which is fine.
So it's clicked that stack view here.
You have to select it from the document outline because when you actually click here it selects the
items inside of a stack.
You see if the selected over here on the left hand side.
And let's go ahead and increase that spacing probably to 20.
So those borders are nice in there.
And let's go ahead and lastly pin this one here and it's really helpful that we see the red lines because
we know it's not done yet.
And let's go ahead and just pin it from the bottom 20 from the bottom turn on the margins is zero from
the left zero from the right.
And let's give it a fixed height of 50 k.
And of course the red lines are drawn.
And let's look at on the different screen sizes here
it all looks really good.
And what we did is we used to stack these.
OK.
Pretty cool stuff.
While we're on a roll.
Let's go ahead and just build up the next screen here since this one turned out so nice so quickly.
Elmo a little bit faster so I'm going to type in the view for view controller when I drag it over here.
Another screen typically you have a view control per screen.
Typically it doesn't have to be that way but that's the Apple way.
And let's look at our design.
So it's not the design we want we want this design here.
Cool so let's go ahead and in fact what I'm going to do is I'm going to close the left hand side here
so I can see my image we'll zoom out there a little bit.
Move it over here and that way I can always just see it right there on the screen.
OK.
So we have our view here.
We need the image of course Amona type an image here at the bottom right of the object library.
And I'll just drag this over here to the corners and we're going to pin it to the four corners like
we've done in the past 0 zero zero zero zero constrain the margins is off.
No way.
It actually goes completely to the edges and they change the image on it to the begin ball are you OK
and the content mode is going to be aspect feel perfect and let's grab this logo here.
Make sure you have the logo selected and not the stack view and make sure it is blue over here.
Command C and then on this you control or down here in the document outline in the view command V to
paste.
OK.
And what we'll do is we'll paste it right here.
Actually you have a better idea.
Why don't we just actually do copy the stack view.
OK.
Like so command C in command VI.
OK we'll move it like up here and guess what.
It's maintaining all the properties like the spacing and things like that.
And so that makes it really easy for us and then on this desired league we just change it to.
I am a like so let's zoom in here.
Sorry it's probably a little bit small for you.
They're cool.
So I may.
That looks good.
And we are gonna have to pin the stack to you because the constraints don't copy over.
So the Super view constraints don't copy over and you pay something the ones inside of a collection
might copy over but the ones for the supervened that are pointing to like the edges of the screen those
won't copy over of course and so on this view controller here in the stack view let's go ahead and pin
it to the top concern the margins is on so let's say 20 from the top and yeah we could say zero from
the left and zero from the right.
No big deal.
OK so that's pinned there.
No red lines which is looking good to me.
And then we've got two buttons here.
So let's just copy two buttons.
I'm holding down shift.
I got two buttons selected.
OK.
Command see.
And this down here and this view command V.
And know I copied one maybe and selected one I ok will command and command Be it again.
So now we have two buttons right cool and this one is going to be called beginner be beginner.
There we go.
And bawler.
OK.
And this is probably one of the coolest things ever created with stacked views.
Do you see this beginner and Bawler lay out here where they're both equally divided on the screen.
This was a nightmare to do before stack views existed.
What we would have to have done.
I'll show you real quick just for sake of example see you know the benefit of using a stacked view.
What you would have to have done is typed in you I view grabbed a view here OK pinned the view to the
corners here and then inside of this view put the buttons.
OK.
Like so.
And then put another one in there and then pin them to each other inside of this view and then pin this
other view to the outside there.
OK.
A lot of work for a very simple feature.
OK.
And I didn't show you all the stats.
I'm just showing you what you kind of had to do to go through now with stack to use if you ever ever
ever want to divide something across the screen like that like in this image here.
Simply select both the items put them in a stack you by clicking the stack button and change the X to
horizontal and boom you're done.
And again you're probably thinking this is ugly.
It's not doing what we want.
Wow.
That's the easy fix.
K. let's let's move this stack view up here.
OK let's move it right here so let's look at this other stack for you.
How far was it from the top.
It was look at its constraint top spaces 50 so the stack is 50.
From this let's keep ours consistent down here so I'm going to click that beginner Bawler stack view
and let's go ahead and say we want a 50 from the I am a label and let's go to zero from the left and
zero from the right margins.
OK.
So it's spreading all the way across.
And you can see that something else is wrong but that's also an easy fix.
So over here you see this icon over here the actuates inspector and your stack view.
Let's look at we have here so the alignment is fill and the distribution is filled so the distribution
is saying hey I don't care how you fill it.
Just fill it.
But that's not what we want because we need some equal spacing here.
So distribution to be filled equally.
Now both the buttons are filled equally.
And the last thing that we have to do is simply add some spacing on that.
And there are going to outline so let's do 25 yeah cool.
It's that easy.
OK.
Really really cool.
I mean I don't know what else to say it's really awesome.
And if you wanted to add another button of course inside of it.
Copy this next button paste the here and drag it in.
It automatically resides then it makes it all equal.
And that would have been near impossible to do before.
I mean we've done it but it's just well anyway.
Really cool stuff.
Thank you.
One more thing on the screen that we need to do.
Is this another button so I will copy this next ball and paste it over here and we will drag it down
here at the bottom.
Double click the label inside megacities finish all caps.
Actually our next button should be all caps too.
That's what the design calls for.
And let's go ahead and pin this 20 to the bottom that's fine.
Zero from the left and from the right because constrain the margins is on.
And of course we are going to need the height there because it's not attached to anything any type of
relationship up here and boom.
So that's it like we designed this layout so fast and I did explain it.
So it took a little while but imagine doing this on your own once you had this down.
It would take like a minute or two max.
OK.
So this is really cool.
Really really cool actually.
And I like what I see so far.
Now of course though the outlines will come when we build and run this now we don't need to do that
right now though we know we know it's going to work so long as our button is a tight border button which
it is because we've been copying and pasting so let's call this video done.
What have we done and learned.
OK.
We have learned that we can you stack views OK to make our life much easier when working with Attilio.
Because a stack view will automatically add constraints to the views inside.
However sometimes a stacked view needs a base point in order to work with.
So you may have to set the width and the height of an element inside of it.
So the other elements know how to react to it and you may say well that's not very scientific and there
isn't a science behind it and it isn't the apple documentation all the details that you need there.
I just showed you how how we solve that problem and stack views though are very very easy.
So really good stuff here.
We use them all the time on the slopes and they are a very useful and powerful tool so you'll be using
these for the rest of your life as an office developer with manual constraints and you also we've talked
about this and the other video but you also learn how to program move things around with frames.
We also do that in the desktops app and a couple of the screens were auto layout didn't work for the
purposes that we need to actually move things on the screen with with programming.
And the example is basically on the main screen of the slopes app we have these swipe Bubel scroll icons
and we need to support it in landscape and in all the different orientations and it needed to be nearly
pixel perfect because our designers really anal.
And so I actually did in that case build some very custom logic with programming moving frames around
and calculatingly device with and all these different things so everything laid out perfectly nice and
all screen devices so you will do that from time to time which is why I showed you but this is what
you'll do.
Most of the time.
So that's it for now.
Marc price at death's slopes dot com.
Moving on for.