This what's up everyone.
Mark Price you're dev slopes dot com in case you forgot.
And in this exciting lesson we are going to work with segues basically we're going to get our screens
talking to each other and opening the next screen in the sequence.
OK.
So first things first I'm going to go ahead and prepare my project with get in so I'm going to do get
status to make sure all my commits or changes are or stored at least I got some modifications so add
dash a get commit dash.
And I'm just missing minor changes here.
So that's ad not going to get.
Check out dash b less lesson 0 5.
So working on a new branch here.
OK.
And what I'll also do is open app.
Swoosh.
X code proj.
It's going to open up a new X code project and we can of course open our files on the left hand side
here by clicking the icon at the top right.
OK.
The navigator.
OK.
So what we've done so far is we've got our user interface built already and we've used some stack views
and things looking really nice and all we need to do is basically when the get started button is pressed.
It loads this screen here.
The league screen.
And then when the next button here is press it loads the view controller screen excuse me the screen
is dying.
This is the where you select the skill level.
That's what it's called.
So it's actually quite simple from the interface builder here we can go ahead and just drag on a Segway
directly so let's just do it let's just make it really easy.
So all you have to do literally is click the button or the thing that you want to make a transition
with.
OK.
You can use a gesture recognizer or you can use a button.
I mean if I did a label here it's not going to do anything so has to be something that can trigger some
type of event.
And so a button of course will work just fine for us and all you have to do is control drag from this
view controller on the left hand side over to this one.
This is the one we want to load.
OK.
And you see here a pop up and you can do show show detail present Motorola present of pop over custom.
So the one that we're going to use of course is going to be show because that's the default.
And that's the expected behavior.
Basically one of you control the roll pop on top of another view controller.
Show detail is really only used when you're working with you I split the controller.
OK that's where there's like an item on the left side with like a listed on the right hand side of your
controller.
And we're not using a split controller so we wouldn't use this present model is actually going to pop
it up over the screen it may look similar to show but it's actually not functioning the same way under
the hood.
It's actually presenting it mostly on the on top of the entire screen everything and not popping out
on top of the other view controller.
So we don't want that and a pop over is a something that you typically use on iPad and it's a little
sliver of a view controller on the screen.
You might see it like let's say that you're filling out a form and you click the button but the field
that's a state like I want to pick which state I live in in the United States OK or a country.
You can have a view control that has a list table view of all the countries you can select one.
And that pops up on the screen.
But we're not doing that either and custom is completely built from scratch custom Segway with its own
transitions and animations and things like that which we're not doing.
It's needed.
So we'll just go ahead and do show.
OK.
And you can see this new line here and zoom in here.
This new line with a little a little icon here OK and this is the storyboard Segway.
Now the right hand side.
You'll see over here if you have this icon select the appear the attributes inspector you'll see that
there is an identifier a class module.
OK.
And the kind right here is what we just chose.
And of course we did show and doesn't animate Yes we wanted to animate.
OK.
And one important thing here that we'll use later on in this video is the identifier bar right now.
You don't need an identifier if you are just loading a view controller from another view controller
by control dragging.
You don't need to set an identifier.
In most cases.
OK.
Now you may have to if you have to make some conditional based logic.
But right now we don't have to do any of that stuff.
And literally that's all we had to do.
I explained it WAY longer than you it would control direct from a button to the screen.
And if I run the app we should see this view controller here load when this button is clicked OK with
the uploaded.
All we have to do is click this button that says get started and see how it instantly loads the other
view controls so literally that is how easy it is to switch screens and ios a control drag and click
and many apps do that ended up slopes up.
We have a few places where we are just having.
We just have segues and it just loads another screen.
However most of our segues are actually programmatic in the dev slopes app and you'll find most apps
that you may load them programmatically because you need to pass certain data you need to make logic.
And sometimes it just makes more sense because you're in the code but this is pretty cool.
Made some great progress already in just a few seconds so the next thing is well what about going back
if I want to go back to the screen.
Well first off we need to put a back button in here.
So let's type an image or a button excuse me at the bottom right beauty for button and we drag it over
here in the top left.
And what we're going to do is we're just going to set an image on it.
So let's go ahead and say Back button.
OK.
Like so now when you get rid of that text 2 that says button delete that every go and it's going to
eyeball it here.
You know put it out there you're a white space and this is bring it down OK.
I'm not making this pixel perfect I'm just putting the button here.
OK.
And I'm going to click the pen button here to add constraints and we'll go ahead and turn on margins
we'll see zero from the left and from the top six.
Let's go ahead and say we want to 10 from the top k zero from the left margin.
And then let's give it a fixed width and a fixed height so it doesn't stretch on us.
OK.
So there's the back button.
So how do we go back.
Well what we do is we want to use an unwind segue.
OK.
And in order to do that we have to write one line of code more or less OK.
Basically what we need to do is we need to write and unwind segue in the view controller that we want
to go to basically when we come back into this view controller what code do we want to be called.
And so we have to do that in order for us to be able to use this backbone.
So let's go ahead and do that now.
So let's go to the first new controller the one that we want to go back into.
All right.
And what we're going to do is to get rid of this did receive memory warning and we're just going to
put our unwind segue and here's what we're going to do say at Iby action like so.
All right.
It's a function.
And we're going to go and say unwind from and we'll say the skill controller which we haven't created
yet but we have the screen for it right.
We don't have we just don't have the code file let's say unwind segue up type you storyboard segue.
So basically this function will be called when we go back.
OK.
When we go back from the second view controller.
All right.
So again at IVI action and this is an interface builder action so interface builder is calling something
in our code.
It's going to do it for us automatically.
And it's a function and we're just calling it unwind from skill C basically this is the function that
gets called when we click the back button.
OK from the other view controller and this is the segue that's occurring if we needed to use it for
some reason.
And so now if I go back to my storyboard see this back button here.
OK.
All we need to do is click this and control drag it over here to this third icon that says exit.
And when we let go sure enough there's a new function here.
So when we just wrote called unwind from skill B C with unwind segue.
OK.
So I just control drag that there.
And now if I run it again I click get started.
And if I click the back button it disappears.
OK so to go forward a screen all you have to do is control drag from a button of some kind onto the
next view controller and it will load it for you.
Bam.
And then to go back to unwind in the view controller code you want to go back to just implement a function
here called.
That's an IB action.
You can call whatever you want.
It doesn't matter what you call it.
But this is the important thing you need to have the UI storyboard segue in fact this one right here
you could call this whatever you want to you could you could call that segue.
OK.
The parameter name doesn't matter but what does matter is that you have one parameter and here of this
type.
So then what happens is your storyboard.
When you control drag to the exit button it will recognize automatically for you.
So we control direct from the back button over to exit and knows to load this one automatically which
is really cool.
So that's simple.
OK.
We have now been able to go between screen to screen back and forth with just a few controlled clicks
and you know one function in there.
Really cool stuff.
So we're going to call this video done.
We have some cleanup to do in the next video and build us a natural view controllers with code.
So let's get this done and move on forward.
Mark Price it does slopes that come see you soon.