[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.

There couple different templates that will starts you off with more of this code,

already put together and more the connection already put together but

we're going to start pretty basic.

And so let's go to Xcode, all right,

we're going to make a new project and our project is going to be a single view app.

Same thing I've been working on for a while, and

we will call it the NavViewControllerDemo.

[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.

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.

Now when I drop this navigation controller onto the screen I got this window and

this window here represents

just going to of a higher level container it's not something that you actually see.

It represents a parent of all the different views that are going to be

linked together in the sequence of views and so this is a place where

controls for that are common to all the different navigation views are kept.

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

can use to put buttons into.

So I'm going to put no actually we are going to click through.

So I'll go ahead and keep the default selection a method for it.

And I'm going to change the name up here of our Root View Controller,

I want to change the name of that.

Let's see.

Don't like the fact that it says Root View Controller, that's sort of depressing,

so let us find where we have that setting.

Finding the settings for this is like 90% of the challenge.

[SOUND] Boot view controller.

Here we go.

This is the top.

So that's where we're going to start, and we're going to zoom out a little bit and

what we need to do is,

we need to put a couple other places where we can go, when we click on elements.

Things that will have this navigation controller component.

Let's add three view controllers to our world, one, two,

three, and let's see if we can kind of line them up over here so

that they are going to match our buttons more or less.

Give us a little screen real estate.

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.

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.

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.

And, Okay, now if we run it,

we should see a basic navigation control that we can go forward and

backward through, let see if we can get that.

Waiting for the simulator

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.

And then let's Option+Ctrl+= it, and make sure it lays out okay.

All right, it looks okay, let's try running it one more time.

Constraints are a little tricky,

you can think you're doing exactly the right thing.

There, there we go, Corn Chips.

Maybe I forgot to hit Enter or something like that.

We go to Corn Chips, we can go back to Potato Chip.

All right and then we're at the top.

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.

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.

And you can see how kind of the animation floats in and

moves in when there is a prompt and when there is not a prompt.

There's not a prompt it goes away and then if there is a prompt it then appears.

All right, so that's the prompting behavior.

Now I want to show you another behavior about swiping that's sometimes useful

if you have a screen that an app that needs a lot of screen space.

What you can do is you can go to your navigation controller and select that.

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.

So now on we run it.

Stopping the old version.

Okay, and now, you can see we have the same thing, the behavior with the prompts.

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.

Oops, where's our [INAUDIBLE] why didn't our [INAUDIBLE]?

Because I didn't put any kind of constraints on it.

Okay let's try that again.

Option command equal all right and let's also give it a width.

Give it a width 112 is good as anything,

add that constraint, and Option+Cmd Equal, great.

And now let's run it.

All this to show you the behavior of the navigation bar when the keyboard is

brought up.

Okay, it's there, it's horrible layout, but I can click in it, type hello.

And then if I get the soft keyboard to come up.

Come on, there we go.

The soft keyboard comes up, and the navigation bar goes away.

I hit keyboard too many times, let's try again.

There we go, and to get it to come back, hit return.

And we're done, keyboard going.

Now, just do that again.

Here comes the keyboard.

There goes the keyboard.

Interesting, the bar doesn't come back on it's own.

You have to swipe it back down or may be it's interfering this way not to swipe.

Well, let's just check that out and see what happens if we the inspector

navigation controller and only make it go away when the keyboard appears.

This would be the kind of thing that would be really good to test on a real device.

because I don't have a lot of confidence in the soft keyboard behavior here.

Okay, click here.

Get the soft keyboard to show up.

Hello.

And, Give me a second, then have the keyboard go away, nope.

Swipe doesn't pull it down, so that's interesting, it only makes it go away,

it doesn't make it come back.

Okay, that's good to know.

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.

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.

So because it's set by the parent you get potato chip but

if you go to soda you can see the default.

Yeah, that's not very convincing.

We don't have the default anymore because my defaults don't have children.

There's potato chip, if we do corn chip we got what we specified as PC.

And if we get rid of that, we go back to our default.

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.

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.

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]

Navigation View Controller

Best Practices for iOS User Interface Design

Meet the Instructors