You will learn to develop sophisticated user interfaces for iOS, with a focus on user interface design best practices, UI animations, and responsive design. You will learn about the key UI widgets, mapping interfaces and view restoration.
Navigation View Controller
Loading...
En provenance du cours de University of California, Irvine
Best Practices for iOS User Interface Design
177 notes
University of California, Irvine
177 notes
Cours 3 sur 6 dans Specialization iOS Development for Creative Entrepreneurs
À partir de la leçon
View Controllers and Map Interfaces
This week, we will look at view controllers and map interfaces. We will cover user interface construction plus complete a peer review assignment called The Basic Map View. Who doesn't want to be able to put locations on a map!
Rencontrer les enseignants
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner at Gradient
[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.
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]
Explorer notre catalogue
Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.
Coursera propose un accès universel à la meilleure formation au monde,
en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.
© 2018 Coursera Inc. Tous droits réservés.
