0:00
[MUSIC]
One of the fundamental view controllers that used in form based iOS design
is the navigation view controller.
This plus the table view plus the scroll view probably accounts for, 80 to 90%
of the underlying UI controllers that are present in most apps that are out there.
So using the navigation view controller is pretty straightforward.
You just have to understand where to look for certain controls.
And so what we want to do is we want to lay one out for you in this, tutorial so
you can see what's happening.
So big picture is that a navigation view controller implemented basic traversal
through multiple views that are triggered by some action, moving between views is
triggered by some action on the part of the user and it supports back links.
So in a way there's kind of a model here that's similar to a web browser where you
click on things, you go forward through a sequence or that a path of views and
then you can return back using something that's like a back arrow.
Of course it's a little bit smoother than a web browser experience because it's
a native app.
So on the right here we see an example of what we're going to try and
build a couple options for moving around depending on what you pick
as choices where I can end up with exactly that but we'll see what we get.
And so there's a couple things that I'm just going to show you,
it's kind of a skill based task a lot of code.
It's a lot of UI selection elements.
So we're going to walk through the creation of it.
So, we're going to show you how to construct one.
We're kind of try and do kind of a tree based one.
We're going to show you linking with segues,
that's how you get that movement from one view to another.
We'll show about adding navigation bars and
we'll do it from the bare bones view controller model.
We'll add prompts and we'll add back buttons and
we will show you a little bit about alignment to layout guides along the way.
All right so let's start by constructing one and
we'll linked it together with segues.
2:30
[NOISE] Okay, and it's an object to see and
we're not going to be using
core data for this demo.
So, we go to our next screen, we'll keep it here in our local depository and
we maximize our window and we'll go to our storyboard.
Now almost all of our work is going to be done in the storyboard for
this assignment, and so we'll need also to see our view hierarchy here.
The first thing that we're going to do is we're just going to
ditch this View Controller to start with.
going to go ahead and delete it so we start with nothing on the screen.
And instead what we're going to bring up is we're going to bring up
the Navigation View Controller.
3:14
Now that we have the navigation up here, we also want to identify it as being
the place where we're going to start our project, so
we're going to click our navigation controller and we're going to
click the properties and we're going to click is initial view controller.
So that check box says, hey,
when we start our app which viewer are we going to start with?
And so in this case we're going to start with our navigation controller.
4:04
This here is called the segue.
This is called a relationship, in this case,
because it's got a relationship icon, but our segues will be the same.
And, when we drag our navigation controller out,
it gives us a table view as our initial root view controller.
We're not actually going to really use the features of the table view the way we did
in our previous sequence of the previous sequence of videos we had.
But what we'll do is we'll use the table view as a UI component
to just have a sequence of buttons.
And to do that we're going to select our table view, go ahead and expand it, and
we are going to identify that our content it's not going to be dynamic prototypes,
meaning they're not going to change based on call backs and delegates,
they're just going to be static cells.
And we do that it immediately gives us three different static cells
to our table view, and those are just going to be things that we
6:15
All right.
So in order to link these into the succession of use that we'd like to see,
what we need to do is we need to create a segue.
And so we're going to do that by creating our table cell that we're interested in
the one that when we click on it, we want to move to the next view.
We indicate that by Ctrl+dragging from our table view to our destination, so
our view controller in the upper right.
And when we do that, we'll get a selection of what we want that relationship to be.
There's a lot you can choose from and you can see some of the things we've talked
about from a high level from the human interface guidelines.
But for this one we're just going to use show and
when we do show we're going to see we have a segue relationship here now and
we can see that that shows up in the view controller over here.
And you can that when we do that we actually can select a segway itself.
And there's a bunch of properties associated with this segue that we can
leverage if we want to at some point.
7:08
Now, up here on the view controller when we did that,
we were immediately given this view at the top of our
bar that's going to be controlled by the navigation, by the navigation controller.
Now that's a space that navigation controller can use to keep track of things
so that there's a consistent experience of moving to the hierarchy.
So into that I'm going to put a navigation bar.
And now it's going not navigation bar navigation item which is going to
represent a title and the ability to move back, backwards if we want.
And we're going to go ahead and give this a title at the top.
And what should we call it?
Let's pick a theme.
Today I was messing around with snacks.
So let's name them after snacks.
So this is going to be a potato chip screen.
And then we will do the same thing down here.
We'll take our second button, and we will control drag our second button to this
one, and we will do Show, because that's what we want.
And we will add a navigation item to our navigation bar and
instead of potato chips, we will say it is Soda.
And in the third one, we will click and we will Ctrl drag down here,
we will choose Show segue, and we will also add a navigation item.
And instead of Soda, we will say Candy Bar, all right.
Now, it would be nice if we had some idea that
when we are clicking on our table items that we were going that direction.
So we're going to grab some labels, and
we're going to put it into our bar here, and
we will go ahead and make that say, Potato Chip.
And we will option drag to copy that down here, and make that say Soda.
And we will option drag that down to the bottom, change it so it says Candy Bar.
Then we're going to assign some layouts to this.
We'll say we want the layout of that to be, I would like that to be in
the center of the container, and I'll Option+Ctrl+= to lay that out.
And Soda I will put in the center of the container, and
I will Option+Ctrl+= to lay that out.
And then Candy Bar, I will do the same thing.
9:40
So in doing this, as I zoom out, you can see that we have,
I don't know if you can or can't.
We've got three different views that have been linked through segues from our table
view, and they've created these new view controllers into which we can put
other kinds of items.
So you can put table views, or web views, or map views, or
whatever we thought was appropriate, tab bars, tool bars.
I'm going to zoom into Potato Chip here, and
I'm going to go ahead and add a button.
And we will add just a normal button in the center here, and
we will call Potato Chip we'll say, let's see,
we'll make an option of Corn Chips and option control that.
And a second choice will be, oh gosh I don't know, BBQ Chips, And
we will select those two things, and we will ask for
them to be horizontally centered, and I'm not super concerned about the layout.
What I want to do though, I'm going to Option+Ctrl+= the, okay,
maybe I am a little bit concerned about the layout.
I will put them, Give them some constraints,
and give this guy constraint, Yeah and
let's lay them out and see how they come out, all right.
The reason why I added those buttons is because I want to add another set
of view controllers, so that you can see the navigation through this system.
So we're going to once more, or
actually what we'll do is we'll just option drag this one over.
Select that, select it, select it, and option drag it.
It's not letting me copy it that easily, okay we'll just get a new one.
Get a view controller, drop it up here, another view controller and
drop it down below it.
As we do that, our canvas expands a little bit, so we have a little bit more space.
And until we connect it with a segue,
we're not going to see that navigation bar show up.
So I'm going to select the button, and
I'm going to Ctrl drag to this one, and I'm going to give it a Show segue.
We'll see our View at the top show up, I will select BBQ Chips,
and I will Ctrl drop to this one.
Show, and a bar shows up at the top, and
then I want to add a navigation item to both of these.
And I want to clarify that this is BBQ Chips, and
navigation item up here, clarify that this is Corn Chips.
12:45
All right, so we're at the top, and if we select Candy Bar,
we'll go to the Candy Bar view, and we get a back arrow, back to This is the top.
And if we go to Soda, we get the same thing.
We go back to the top, we see that these are controlled by a table view,
they're static.
And then last we can go to Potato Chip, we can go to our Potato Chip view, and,
oh we lost our Corn Chips.
It must be buried underneath this element here.
If we select BBQ Chips we can go to the BBQ Chip page,
and then go back to Potato Chip, and then go back to the top.
So a real basic navigation controller.
Let's see if we can get Corn Chips to come back, I'm not sure what happened there.
Let's clear the constraints on that guy, and then let's be
a little bit more specific about wanting to connect it to the top layout guy.
Keep the vertical spacing the same, and then let's keep the horizontal,
let's keep it just horizontal and center.
14:17
Okay, so what we just looked at,
is we looked at how you start with your navigation controller and
your route control, and we linked with segues to new view controllers.
And when we linked to a segue,
we got a view at the top into which we could add a navigation bar.
So we linked with segues, and then we're able to add a navigation bar.
The next thing I want to look at, is I want to look at how to add a prompt.
Now a prompt is just a little bit of text at the top that enables you
to add a little bit more detail.
And we'll also look at some swiping behavior at the same time.
I didn't specifically call that out in the outline, but we can do that as well.
All right, so what we can do is,
if we go back to the top, we can say, let's see.
We can select our Navigation item and
over here when you select your navigation item,
it gives you the ability to say prompt.
And this prompt enables you to add something to the top that kind of
appears all of a sudden, so like we can say Choose your snack.
And if we do that, you get this little Choose your snack item at the top.
And we'll go through here so
that you can see how this works as you navigate through, and how it animates.
So prompt Made with potatoes.
15:42
And then corn chips, Made with corn.
This really doesn't make sense as an information hierarchy,
because it looks like Corn Chips are a descendant of Potato Chips, and
we've just kind of demonstrated that that's not true, oh well.
All right, so let's run it in our simulator,
and when we do this we'll see the prop show up.
Wow, okay so choose your snack, and
then you can click on potato chip, and says made with potatoes.
You can go to corn chip, and you can see, made with corn, coming back.
Go back, made with potatoes.
This is the top, choose your snack.
16:52
And there's a bunch of options up here,
so one thing to notice is you've got some simulated metrics.
So this screen space up here, you can set to be different kinds of default devices.
So like if you set it as 5.5, that and
all its children will look like a 5.5 inch iPhone.
It's helpful.
If you know you're designing for that kind of a platform, and
you just want to just work with that layout immediately.
You can of course do portrait and landscape in the same way.
You can have details about what kind of status bar you want.
And then this one here is interesting, that you can actually have some
behaviors based on how you want those navigation bars to disappear.
So On Swipe, On Tap, When the Keyboard Appears, or When Vertically Compact.
So, let's see if we can make on swipe work and
maybe, we don't have anything that causes the keyboard to appear, but
maybe we can make it appear manually in the simulator.
18:05
But this time,
if we swap anywhere in our application, the navigation bar will go away.
And if we swipe down, the navigation bar will come back.
Go to candy bar, I swipe up it goes away and I swipe down and
it is suppose to come back but it, oh there it is okay.
Wasn't swiping very well.
Now we can see if we can manually get the keyboard to come up.
Now we need a text field in order to get the keyboard to come up.
Right now it thinks there's a hardware keyboard, and there's no reason for
the keyboard to come up.
So it doesn't allow it to come up.
If the keyboard came up, we would also get that behavior, so
when the keyboard comes and goes.
Let's see if we can do that for demonstration.
We should be able to do that fairly simply, just by adding a text field.
21:09
All right, so that is about our prompts, and
that is also about the swipe to make the bar go away.
And there's a little detail about back buttons I want to tell you about.
Sometimes you can have a really long title, and
when you move into a child container, the back can be a really verbose phrase.
It looks bad and takes up too much of your navigation.
And so what you can do, is you can manually adjust that.
So you always adjust it from the parent node which is a little awkward.
All right, let me delete our text view, let me go to our navigation control and
just have the bar stay there.
21:44
And so in this is the top, I'm going to select that navigation item,
select that navigation item.
In here in the back button,
you can specify some alternate text to show when you want to go back.
So here I'm going to put just stop and it over here,
in this navigation button on the states in potato chips made it safe PC.
So when we run our application the back button will be altered now to reflect
the alternate text that we typed down into the settings.
So starting out we got potato chip and
you can see the back button says top instead of this is the top.
If you go to BBQ chips, the default, oops, sorry.
The potato chip is the back button there.
22:57
And we do potato chip, we get top as that but as we go to corn chip,
we get the default of potato chip there.
All right, finally I just want to point out something about the layout
guides that's important especially when you have the, like, a table view.
So go down to alignment guides.
What I want to show you is that when you're on the table view,
the table actually extends up underneath this navigation bar.
And if you can tell there's some translucency,
you can see the color altering underneath that navigation bar.
And so, the table view is smart enough to know
that it wants to orient itself so that the first item appears below that.
But it actually scrolls up and underneath it in that way.
And so when you do things like do layouts here
you want to make sure that your layout is going to this layout guide that's
associated with the bottom of this navigation item.
And I think when we first had our corn chip not showed up I think the problem
was is that the constraint went all the way to the top
rather than the layout guide associated with the bottom of this.
24:02
You can actually, if you select your navigation controller,
alter that behavior so that things do not extend under the top bar.
So, if we uncheck that, the view that's associated with the navigation bar
becomes a hard view, and nothing goes underneath it.
You don't get that translucency of something going on underneath it.
So here, you can't really see a difference but in terms of the layout,
the table view is just ending directly right there, and that messes with
the translucency a little bit and a little bit with the behavior around swiping.
24:37
Okay, so let's zoom out, not that far.
So using the navigation view controller, we created an information hierarchy.
It's pretty straightforward how you do it and it consisted of a handful of steps.
But basically you linked things with segues,
you add information to navigation bars.
You can add prompts and Back Buttons and they have special guides for alignment.
That's kind of nuts and bolts of navigation.
Ctrl+click is your friend.
Also make sure you're careful about what's selected in your view hierarchy when
you're trying to find options.
because a lot of times just finding the options for
these things can be the trickiest part of this kind of a layout.
Okay, thanks that's it for this lecture.
[MUSIC]