[MUSIC] Hi, everyone. In this lecture we're going to be talking about, one of the most useful and common navigation paradigms in LS, and that is the navigation view controller. This is what you see in apps such as settings, although there is other ways to implement it, like using a split view controller which settings is using where, when you tap on something, it pushes a new view controller into the view, and then you get this navigation bar in the top, I mean that's optional. But, it's basically view controllers pushing from the right and there can be multiple, like a whole stack of them. And you can go back with this back one in the top left. So this very common pattern is implemented using UI Navigation Controller. And to get started with that. We're going to go back to our storyboard. All right. So, just like we did with the scroll view, there is an editor sort of convenience button and you can embed view controllers in Navigation Controllers. And you can also find navigation controller again, right here in the object. Since we already have our view controller, which is this nice, social, pink view controller, then we want to stick in a navigation controller. We're going to do that embedding like this. So when you do that, as you can see, it sort of pushes your view controller over and inserts a brand new navigation controller between it. Now, this navigation controller in the storyboard is kind of interesting. It's more of a placeholder, because the navigation controller doesn't actually display any UI. It's more of a conception. So it does exist. It is a view controller, but as you can see it creates this segway called the, and create this relationship called the root view controller. So you can, like if we drag this, it has a special one called a relationship segue, which we didn't see before, and it's sort of unique to the navigation controller. So whatever the root view controller is, will be the one that is displayed as the root of the navigation controller. And as you can see, we already have this bar on top, which is the navigation bar. This is a very important part about navigation controller as that is where the back button goes. If you show the bar which you can customize how it looks, you'll automatically get the back button for free in the system. We'll see that very shortly. Along with the navigation bar, so since it's a. All the controllers get pushed onto this navigation controller. This bar sort of persists. It's always the same bar, and view controllers sort of get pushed underneath it, and so, to control the content on the bar, every view controller can have a navigation item. Now, note that the navigation bar is owned by the navigation controller. But each controller, in order to customize it, owns a navigation item. If you bring out the side menu, you can basically have three basic things for the navigation controller. The title, which is just the title in the middle, very standard. A prompt, which sometimes appear below the title, which is not too commonly used. And the Back Button, and this one is a bit interesting. And this actually sets the name of the Back Button that goes back to this View Controller. So if we call this, so by default it's the same as your title, if you have a title set. And if you don't have a title set, it just says, Back. You can add, customize that for example. Let's see this example again. Because this title is settings, so by default we need to go to this next one. The back button is the title. The previous one gives you a nice animation that sort of pushes it over, back, general. But if you wanted to say change, this button. You would change this back button property. Of the navigation item on this view controller. We'll see that in a second. All right, by having just one view controller for a navigation controller isn't very interesting, because you want to able to sort of show more than one. So just for super quick sort of, just to get a working example now, we're going to add a button. And you have to be zoomed in. Add a button to the middle of this guy, and we're just going to constrain it to be in the middle, and we're going to call it push. So, conceptually, and in implementation, and navigation controller manages a stack. And that's why these terms push and proper used, because if you're familiar with stacks, you can think about it as a stack of papers or something and whenever you push something on, you're putting something on top of the stack and when you're popping, you're taking something out, you're taking something off from the top of the stack. And that's the only operation you're going to have in a stack. You can't sort of insert things below the top and you also cannot remove things in the top. That's why it's a stack. You keep stacking things on and when you remove, you take them off one at a time, one multiple at a time from the top. So we're call this push. We're going to have another view controller to the side, and my screen resolution is pretty low, so you guys can see clearly, so it makes things really big. And we're going to add a segue from the button. To show, so used to be called push, and that got deprecated, because now we call it show, because there's a lot more things that it can do now. Sort of the [INAUDIBLE] It's still doing a push in this case, but in other scenarios it can do different things, and so push isn't a good enough term for it. All right. So we're going to give this one sort of a name. A title, as well. So as you can see, a brand new view controller does not have a navigation item yet. So we're going to find one, we're going to add one. Navigation item. You just go into view controller and it immediately gets a title. So we'll just call this the detail, view controller, and give it a color maybe. This nice blue color that I have and we'll run it. So now, when you tap the social button, you'll get this. This is basically the same view controller, but you get this bar at the top, which is a navigation bar, and you press push. It pushes out the detail controller. There's a nice animation for you, and this back button says Social, and we're going to change that to something. If you just wanted it to say Back, for instance. You could build that. And it nothing, it changes the one in the next which is, which can be a little bit confusing. Once you're used to it, it makes a lot of sense because the back button. Like, sometimes you can have different buttons that push different controllers, but the back button sort of is pointing back, so this controller should be fine now. After the previous lecture, where we added this controller, you noticed that there wasn't any way to close it, that's because we didn't really want to add a button to the view. The navigation bar has a back button by default, but also space on the right for anything you like, really. And you can also customize the left button, sort of the left navigation, the button on the left to be any other button as well. Doesn't have to be a back button. You can implement back as a button in your view, if you wanted to. If you wanted to replace, say, this top left back button. But in iOS, it's always nice to adhere to the system standards. And this back button being here is one of those. It's sort of a convention. Because Apple does it, the system uses it, and many other apps use it, just by having this as the back button. Users are very familiar with that and will know how to use that right away. So try not to get too fancy and stick your back button in weird places, like down here in different corners, because that might confuse users. So what we're going to do is add a dismiss, like add a bar button. So since this is a bar, a navigation bar, you don't put sort of views onto it. It doesn't work like a normal view. You can't adjust the frames of stuff. There's basically, it's more strict. You have this title in the middle, though you can replace that with a custom view. And you have navigation bar or you have UI bar button items. So if I had item here, I get a nice little button here. And as you can see, this goes in the navigation item. The navigation item has left bar button items and right bar button items. And then once you get multiple, you can copy and paste this and tag two items. But generally, normally, again, I usually am used to having one button here. And in this case, we can change this to say, changing that, that's just the name of the view in the scene. The better bind item, there's a few system items that you can use, and some maybe even have icons, sort of system items done for you like add, edit, that's really just text done. We're going to use done here. But to share with that, there's some of these system images in this sort of Bar Button that IOS provides which is pretty interesting. Because UI button does not have any of that. And if you wanted to use any of these default actions, you could. You can take advantage of this and use the system icon. Bar menu's done. And once you do that, this. Works just like a UI button after display like sort of, it can trigger segues, it can send actions, you can have a reference to it in your code to customize it, but we're not going to do any of that right now. So the most important concept of the navigation controller in terms of using it, is the stack. So, you see when this is presented, you see review controller and like I mentioned, the navigation controller is decked it doesn't really display in UI. It maintains the stack of view controllers. It has a property called, view controllers. And here, it's an array It's a stack that is stored in a ray and this is your first view controller. So right now, we have this view controllers ray that only has this one view controller in it. Once you push, and now it has two view controllers, and it has the first one and the second one. So, when you push the view controllers, and you keep pushing onto the stack, the previous ones, all stay alive. They're still there. Like they don't get de-allocated, because they're still on the stack. When you start popping them,in this case, that blue V control is very likely to be delicate and it probably is. Every time you push it, and go back, you're actually creating a new instance of it. And this is pretty mix. This is all done by the system for you. So as you understand that stack, you can actually go and set that array, that stack. You can directly set it to something completely different. And that will sort of alter a navigation stack. And that's something more advanced that you can do, to have more power and flexibility navigation on your controllers. But in general, you can just connect a bunch of segways at different buttons. A very common thing that you see is a table view or a collection view, that segway into a detailed view. And that is used the done with a navigation controller. So that's all there really is to navigation controllers, they're very,very useful and helpful. And if you wanted to do any sort of stuff like this, it's incredibly easy to use and if you use the prepare for segue, call from the previous lecture, you can customize this detail view controller. Say this was the table view with different cells, kind of like the settings app, depending on which cell you hit, you can customize the detail view controller from this controller in the prepare for segue call and modify the display. Modify the detail, the contents of this detailed view controller. Right? So in the next lecture we'll talk about path view controllers.
