Welcome back again.
This lesson is about navigation controllers and navigation controllers are kind of a fundamental navigation
method of us.
That's something that you see in most of the applications.
And despite being so widely used is actually quite simple to implement.
So it's called into export and then starting a new application called navigation controller app namely
navigation controller app.
I have to add to my story storyboard and add a navigation controller.
So usually we have a view controller that is our initial view and that is set up in here by having that
little private there is initial view controller or having this little arrow that goes into the view
controller.
So now what you gonna do is we're going to add a navigation controller embed this view controller a
victim that.
So let's first tweet the easier way I'm going to take my view controller.
Go to editor go to embed in and say navigation controller.
As you know you can do the same thing down here.
You can go to this little button here and say embed in a navigation controller.
So Ed embed in navigation controller and what they'll do is it will make an allegation controller and
it will place our view controller a victim that navigation controller and navigation controller it has
it has a navigation item up there which is that little ball there that you can add buttons to it.
It has a built in title to it that you can write the name of your viewpoint or in it or you kind of
have buttons that they do things for you as you know you navigate between different view controllers.
But as the name suggests it wouldn't do anything on one single view controller.
It kind of needs to have more than one view controller.
So let's go ahead and add one more.
Let's select this one.
Make its my may be a kind of a green.
So I know which one this is I'm going to add a new view controller.
This new view controller I'm going to place it here and this one I'm going to give with the bank on
that is some sort of a pinch and then I'm going to add a button and we change that to a different mode
by then and by then I'm going to go ahead and say this one takes us to the pink.
So it says go to pink and now let's go ahead and add a Segway between the pink by then underpinning
view controller controller drag.
I'm going to use the show method which is the default method of sake v between navigation controllers.
The moment I do that my pink viewpoint were also receives the bar on the top as well as a back by then.
Now let's go ahead and run this application
keep in mind that I'm designing for iPhone 8 mistake as I always do and I'm simulating an iPhone access
which means I'm going to have some misplaced meant essentially some things I'm not going to be in the
right place.
But for this exercise it doesn't really matter.
So now when I press on the pink mean get navigated to the pink view controller the pink you can wear
appears from the right side of the screen.
The slides it set off in and also it has a built in back by then that shows me how we can go back.
Now let's change a few things in here and learn a little bit more.
So the first thing is when I go in here and say when we land on any of these view control I want to
see the title.
So for the view controller which is our green view controller actually and we're changed the names.
So there are more external artery.
So that's a green view controller.
I'm also going to change the name of the file even though it doesn't really matter but it's better that
you have names that are relevant to what they are.
That's my green view controller.
I'm going to add a new view controller so that's six subclass of you I view controller called Pink view
controller so that's my next class and in my storyboard I'm going to say this one is connected to the
green view controller.
And of course my pink one is with pitch perfect now.
But I'm going to do is here.
I'm going to go to Green view controller.
The only thing I'm going to change is this within the view of the Lord.
I'm going to say self dart title.
Say during and I'm going to do the exact same thing in the pink.
So in the pink I'm going to get rid of everyone reformat everything properly get rid of all the other
code so it's clean and tidy and say self not tighten becomes pink.
And let's run the application again and this time we should be able to see a tighter on the top center
corner of the of the bar of the navigation item for the green as well as another one for the pink.
Now the next thing that we might wonder is how can I actually add buttons in here.
What if I wanted to have a little button on the far right corner of the bar here in the green view controller.
So my goal is to gain viewer control up in here I have something called self the navigation IDM dot
right.
Bar but then item which is asking me for a you eye bar by then item.
So let's first make that so I'm gonna say let's just call it my right bar.
By then it say you eye bar by then item and that I'm going I build it like this.
I'm going to go ahead and say it has a type.
So that's going to be a you are by then item system dot.
And I'm going to make it look like a maybe a camera even though I'm not really gonna do anything with
it but maybe it looks like a camera and then the target is obviously here and the action is selector.
And we have to add an action for it for the action of it.
I'm going to say there is a function card camera action and this is something that we have done many
many times before.
This is an objective c at objective c and within its the does something.
So I'm going to add the camera action to my selector and because of the formatting I'm actually going
to remove this first part.
I'm only using this shorthand dot operation so that's something you can do in Swift.
I don't really personally like it and I usually don't do it but since I'm trying to zoom into the screen
I'm actually going to stay with that.
So that's it you are by by then I item got a style that cam or you a boy with an item that system IDM
that camera.
So let's remove that and then of course my right by then becomes this one.
And now everything is working the way we were hoping it will be I still have one error rate is saying
oh it's called right by then.
Okay so I've got my by then and it is placed in the place of the right bar by then an item of my navigation
item.
And every time we tap on it this thing will happen.
For now it just as plain camera.
That's it.
Now let's run the application again and this is how we add buttons to our navigation item.
You can have the left one the right one as well as you can have the title or the title of view.
So in here if I tap on that camera then it obviously says camera it's print sitting here that centrepiece.
The one that is actually a title right now.
It could also be a view.
So you can actually have something in it.
Let's go ahead.
The pink one I mean it's sort of that I'm actually going to change it to be a UI segmented control.
If this was a view that you had two different things happening in it.
So when I go in here to the pink and say I don't want the title well they do want is this my sake city
out it becomes a UI segmented control and the UI segment that control can be built by a coder by a rectangle
or by the items.
I'm going to say let's build it by the items and the items.
I'm going to say there are two items.
One of them is called One and the other one is called Two as simple as that.
So the two items one of them shows the text one.
The other shows the text two and then I'm going to say self that navigation item dot title this then
I'm not going to use the title I won't use a title to view the title view is my segue controller.
Now this go ahead and run this application as simple as that.
I will have a segmented control within my title view going here and now I have those too.
Obviously if you wanted to actually add a rect for it to you know if you want to make it wider or larger
you could do it like that but it works very well like this.
I can simply add a at an action and you're using your value changed and then run a certain function.
So these are the basics of using a navigation controller.
And like I said I'm going to show you another way in the storyboard for building navigation controllers
which are not based on embedding them.
So to do that here's what we do.
We can delete the navigation controller.
I'm actually going to go up here and say let's build a navigation controller which is this one and I'm
going to say let's drag it in here.
I mean you drag your navigation controller by default.
It wants to embed a table view controller and that's not what you want.
So not delete that say I only want the navigation controller and the only thing that really matters
in here is what's the relationship between our navigation controller and or green view controller.
So here's what we're gonna do.
We're gonna say from our navigation controller we're gonna control drive over here and we're going to
say it is the route view controller of our navigation controller.
So that's the route to your controller.
So that Segway is essentially a route view controller Segway.
And of course I have to make my navigation controller to be the initial view controller.
So here it becomes the initial view controller.
And now we go back to where we used to be.
So that's how you would make a manual navigation controller as opposed to embedding an existing view
controller in a navigation controller.
Both of them they do exactly the same thing.
There is no really difference between them.
And finally one last thing that I have to show you is what does this button actually do they backed
by then.
Let's go ahead and change it so it doesn't say go back to Green maybe it has a different icon or a different
look.
And we also understand what is it actually doing.
So let's go to pink and I'm going to go ahead and say let's lift the ball but then become a you are
by but an item and I'm going to build it just like the last time with a button system item you could
make it with that.
You could make it with an image or you could just make it with a title if you wanted to.
So at this same again I'm going to make it a system by then and let's say that button is actually like
a
maybe like a concept.
But it says Council essentially once again and we dropped out so I can get it properly formatted and
the format is going to the self or the action is going to self and the selector for it is going for
are go back action which we don't have yet.
Then we have to add it.
So I'm going to come in here and say this is an objective c function.
Function go back doesn't have any arguments.
And most importantly self-taught navigation item dot left by about an item becomes there left to buy
an item.
So now I have my navigation item in the pink view controller to have the segment of the controller in
the middle and have a left bar button for the place where used to be the back by then if we run the
application now we should be able to see that left bar by then is actually replaced with this newly
created by then.
And that is true it says cancel but when I press council it doesn't do anything simply because it doesn't
know what it should do.
So let's look at that and this is actually important.
So there are two things we could essentially be doing.
One of them is saying self in Dart navigation controller dot pop view controller which essentially does
this.
It pops the current view controller and goes back to the one before that.
Imagine a situation like this if you're a storyboard you have the green one you have the pink front
and then maybe I have another view controller down in here and this view controller is maybe a blue
view controller.
So it looks like that.
So this is essentially called a stack of view controllers for navigation controller at any point you
might be anywhere in this.
So for instance if I'm in the blue one and there is a Segway between them which is sure.
So if I'm at the blue and I say pop view controller I go directly back to the pink one.
But again if I'm at the blue and I want to go back to the route to view controller there's also a V
for that.
So for that we could say self that navigation controller pop to the route view controller.
And with that essentially v escape anyone in between the stack and we go all the way back to the route
view controller depending on your situation you might want to use either of these two.
Usually you pop the view controller so you just score back one step in the stack and sometimes you want
to go back to the very roots view controller and that's quite valid as well.
So for now I'm going to say just pop and if we run the application again we should be able to see that
the pink viewpoint or now has a backed by then which is saying council and it does pop to the previous
view controller then we had cancer we end up here.
So that was a quick introduction to how to use the UI navigation controllers.
I hope you enjoyed it and I'll see you in the next lesson.