Placeholder Image

Subtitles section Play video

  • Stanford University.

  • Okay, well, welcome to lecture 7 of CS193P.

  • This is the winter of 2015.

  • And today,

  • we are going to talk about multiple MVCs, all right?

  • That includes split view controller,

  • navigation controller.

  • We talked about tab bar controller a little bit

  • last time.

  • We're also gonna talk about segues which is how we make

  • all those multiple MVCs kind of transition to each other.

  • And I have a big demo that shows it all off.

  • And that after that demo I'll come back.

  • We'll talk about popovers which are similar thing for

  • having multiple MVCs but are not quite the same.

  • So that's why I've kind of

  • segregated them off to the end.

  • And we'll have a demo about that.

  • All right. So MVCs working together.

  • These are the slide we saw at the end of last time.

  • We're trying to build apps by taking our MVCs and combining

  • them with tab bar, split view, and navigation controller.

  • We talked about tab bar controller which is

  • just simply four or five or however many

  • MVCs all connected by just having this little tab bar so

  • the bottom just picks which MVC you want to see.

  • Each MVC by the way in the tab bar's completely independent.

  • It runs on its own.

  • It doesn't depend on the other ones.

  • It actually might be kind of bad object on your

  • programming really for them to depend on the other one.

  • So, tab bars for peers that aren't really talking to each

  • other they're just working together, they're related.

  • Maybe they share a model and

  • they're each having a different part of the model

  • or whatever.

  • And then we talked about split view controller,

  • which only has two MVCs in it, a master, and a detail.

  • We call them master and detail, by the way,

  • because the master is usually the one determining what's in

  • the detail.

  • So the master is letting you view something,

  • and then you're going to use the detail to see more detail

  • about what you're doing in the master, okay?

  • So that's why we call it master and detail.

  • So we're going to pick up now with navigation controller.

  • So navigation controller is just yet another MVC whose

  • view is multiple of other MVCs and navigation controller can

  • handle any number of other MVCs.

  • Okay.

  • And it puts them on screen, it shares the screen instead of

  • just putting them side by side or putting them with the tabs,

  • it puts them like a stack of cards.

  • Okay?

  • So NavigationController's basically stacking them

  • like cards and you can only see the one on top.

  • That's how NavigationController

  • shares the small screen space between multiple MVCs.

  • So it's gonna stack these MVCs up.

  • So here's a NavigationController.

  • And it's got an MVC in it.

  • This is the All Settings MVC from your device.

  • If you go look in your iPhone or

  • whatever, you'll see the settings app looks like this.

  • So this is just an MVC that's kind of the top level.

  • Has all the settings accessible from here.

  • Now the navigation controller is drawing only a little part

  • of it's view here, which is that title bar.

  • And the navigational controller will put the title

  • there, and also you can have a couple of buttons up at

  • the top and the navigational controller draws that part.

  • The rest of it is totally drawn,

  • and even underneath that title bar, totally drawn by

  • whatever MVC is on top of this stack of cards.

  • Okay, and right now the only thing on

  • our stack of cards is this All Settings MVC.

  • Now even though the contents of

  • the top are drawn by the navigation controller, what

  • the contents are is determined by the MVC that's showing.

  • Okay? And that's done with this

  • UIViewController property called navigationItem.

  • So if you go look in the documentation for

  • UIViewController you'll see this property navigationItem.

  • If you click through to the type UINavigation item you'll

  • see that it's got a lot of properties and

  • they're like left button, right button, title.

  • Things like that. So,

  • the way the navigation controllers figures out

  • what to put in the top bar is it asks whatever MVC is on

  • top of the stack.

  • So as you go to different MVCs being on this stack of

  • cards that thing at the top will change.

  • Okay?

  • So, let's say I click on General here,

  • because I want to see general settings.

  • Okay, so I click on it, and a new MVC gets put on top of

  • the stack of cards, so now I can't see the other one, okay?

  • This new one is overlaying it,

  • and this is just a general settings MVC.

  • Completely different MVC,

  • completely independent of the other one working on its own.

  • By the way,

  • I don't have a good screenshot of this unfortunately, but

  • it's also possible for the navigation controller to

  • draw some buttons along the bottom there.

  • A little small sliver on the bottom.

  • And it get those button items to put there,

  • by asking the MVC that's on top of the stack of cards for

  • the toolbar items property.

  • So if you look at toolbar items,

  • it's just an array of these bar buttons, so

  • any MVC that returns anything in that array,

  • when it's in a navigation controller like this,

  • those buttons will appear at the bottom.

  • So those would change each time you go

  • to the next thing on the stack as well.

  • So let's go ahead and click on something here.

  • Let's click on, oh sorry, the back button.

  • Yeah, you see there's a back button in the upper left.

  • The back button says, Throw the top card off.

  • That's basically what back means.

  • Throw the top card on

  • this stack of MVCs that we're building, throw it off, and

  • then I'm going to go back to where I was before.

  • So that's how back works, it just throws it off.

  • And when it throws it off, it completely throws it off,

  • it disappears.

  • Completely gone.

  • All right?

  • Out of the heep, okay?

  • All right, so let's put another card on the stacks,

  • I'm going to click on accessibility here,

  • another card's going to slide in,

  • I'm trying to simulate the animation of it but in keynote

  • I can't exactly do it, but it slides in from the side.

  • And this is yet

  • another completely different MVC, the accessibility MVC.

  • And we can pick something out of here,

  • like I'm going to pick larger text right there, and

  • another MVC is going to slide in.

  • So we have four MVCs, totally different MVCs,

  • on our stack of cards right here.

  • And the one on top, which is the last one that I chose,

  • this larger text MVC, is showing.

  • Okay? The rest of them are there,

  • you just can't see

  • them because they're underneath this top card.

  • Okay, so now let's do the back button.

  • So I'm going to click this back button in the upper left

  • and when I do, it takes that larger text one off, throws it

  • out, and now we've got the accessibility card, which is

  • now the top of our stack which only has three things on it.

  • And we can do back again.

  • It goes back to the general one.

  • We do back again.

  • It goes back to the very top.

  • Of course, once we get back to the very top there's no

  • more back button because this is the only card on the stack.

  • Okay, so everyone understand what

  • a NavigationController is?

  • It's just a stack of MVCs.

  • All right?

  • But it's just like split view controller and

  • UITabBar Controller in that it is showing multiple MVCs.

  • So I'm going talk a little bit about how navigation

  • controller works internally, so you can get a feel for it.

  • And I'm going to try to mix it with our MVC image that we

  • had so you can kind of combine the two concepts in your mind.

  • So, let's say I had an MVC.

  • This one up here, the purple MVC thing.

  • And I had more features I wanted to put on there, but

  • there's just not enough room on the screen anymore,

  • I've kind of maxed out.

  • Or it's just those features don't logically make sense to

  • be in the same place.

  • Well, what I would do is create another MVC to manage

  • those other features that won't fit,okay?

  • And, so now though I need a way to have those two MVCs

  • share the screen and I can use a split view controller or

  • tab bar controller if they were peers or

  • I could use navigation controller.

  • So, let's see what it would look like to

  • use a navigation controller to have these two MVCs which

  • they're related share the screen.

  • So a navigation controller is just an MVC, okay?

  • It's a controller of an MVC.

  • And it's view is a little rectangular area that usually

  • fills the entire screen or a portion of the screen.

  • It's got the title.

  • But it's a special MVC and they've just got an outlet

  • called Root View Controller that points to an MVC.

  • [UUU] points to the controller of an MVC.

  • And when it is pointing to that, then the navigation

  • controller puts that MVC's view, okay, its view property.

  • All right, we know that UIVController has

  • this very important property called view,

  • which is its top level of its view.

  • It puts that on the screen underneath this title thing.

  • So it fills the entire rectangular area and

  • then the title kind of overlaps it transparently,

  • semi-lucent transparency.

  • Okay?

  • So that's great.

  • So we got it in there.

  • Now how do we get the other MVC on?

  • Well, when a ui element inside the view of

  • this MVC like a button or something like that

  • is pressed then it can cause another MVC to get created.

  • You notice that MVC just appeared?

  • It wasn't there before.

  • But as soon as the button gets pressed in this guy's view,

  • this MVC's view, that thing gets created.

  • And that's something important to notice that we're always

  • going to be creating a new MVC when we do these transitions.

  • Okay? Transitioning to a new card.

  • In a split view,

  • we do something in the master that changes the detail.

  • That's always creating a new,

  • even the first time we press a tab bar, but

  • only the first time for the tab bar, it creates a new MVC.

  • Okay? So it creates this new MVC.

  • And then the NavigationController just

  • moves over to put that MVC's view on top.

  • All right?

  • And then of course you've got the back button.

  • When you click the back button,

  • it goes back to the first MVC.

  • And look what happens to that MVC.

  • Gone.

  • Okay.

  • That is not hidden or something.

  • It's just gone.

  • It got de-allocated probably from the heat.

  • Okay? And then we're back to here.

  • Okay, so that's how navigation controller works.

  • Very simple.

  • And, you know, split view and

  • tab bar are similar kind of mechanism.

  • Okay. So

  • how do we get at these sub-MVCs?

  • So let's say I had a split view controller or

  • a navigation controller or a tab bar controller.

  • How do I get at the things on the stack of cards,

  • or the two things the master and detail?

  • And the answer is

  • they all have a property called view controllers.