1 00:00:00,760 --> 00:00:01,930 Welcome back again. 2 00:00:01,930 --> 00:00:08,680 This lesson is about navigation controllers and navigation controllers are kind of a fundamental navigation 3 00:00:08,680 --> 00:00:10,220 method of us. 4 00:00:10,270 --> 00:00:13,410 That's something that you see in most of the applications. 5 00:00:13,450 --> 00:00:19,160 And despite being so widely used is actually quite simple to implement. 6 00:00:19,210 --> 00:00:30,300 So it's called into export and then starting a new application called navigation controller app namely 7 00:00:30,300 --> 00:00:31,760 navigation controller app. 8 00:00:31,760 --> 00:00:36,370 I have to add to my story storyboard and add a navigation controller. 9 00:00:36,590 --> 00:00:43,550 So usually we have a view controller that is our initial view and that is set up in here by having that 10 00:00:43,550 --> 00:00:49,970 little private there is initial view controller or having this little arrow that goes into the view 11 00:00:49,970 --> 00:00:51,110 controller. 12 00:00:51,110 --> 00:00:56,720 So now what you gonna do is we're going to add a navigation controller embed this view controller a 13 00:00:56,720 --> 00:00:57,900 victim that. 14 00:00:58,070 --> 00:01:02,390 So let's first tweet the easier way I'm going to take my view controller. 15 00:01:02,690 --> 00:01:07,540 Go to editor go to embed in and say navigation controller. 16 00:01:07,700 --> 00:01:10,700 As you know you can do the same thing down here. 17 00:01:10,700 --> 00:01:16,280 You can go to this little button here and say embed in a navigation controller. 18 00:01:16,280 --> 00:01:24,260 So Ed embed in navigation controller and what they'll do is it will make an allegation controller and 19 00:01:24,260 --> 00:01:30,530 it will place our view controller a victim that navigation controller and navigation controller it has 20 00:01:30,530 --> 00:01:36,820 it has a navigation item up there which is that little ball there that you can add buttons to it. 21 00:01:36,830 --> 00:01:43,470 It has a built in title to it that you can write the name of your viewpoint or in it or you kind of 22 00:01:43,460 --> 00:01:49,740 have buttons that they do things for you as you know you navigate between different view controllers. 23 00:01:49,940 --> 00:01:55,250 But as the name suggests it wouldn't do anything on one single view controller. 24 00:01:55,250 --> 00:01:58,670 It kind of needs to have more than one view controller. 25 00:01:58,670 --> 00:02:00,670 So let's go ahead and add one more. 26 00:02:01,100 --> 00:02:02,060 Let's select this one. 27 00:02:02,060 --> 00:02:06,150 Make its my may be a kind of a green. 28 00:02:06,320 --> 00:02:10,650 So I know which one this is I'm going to add a new view controller. 29 00:02:10,820 --> 00:02:16,040 This new view controller I'm going to place it here and this one I'm going to give with the bank on 30 00:02:16,040 --> 00:02:23,830 that is some sort of a pinch and then I'm going to add a button and we change that to a different mode 31 00:02:23,960 --> 00:02:32,100 by then and by then I'm going to go ahead and say this one takes us to the pink. 32 00:02:32,100 --> 00:02:41,580 So it says go to pink and now let's go ahead and add a Segway between the pink by then underpinning 33 00:02:41,640 --> 00:02:44,080 view controller controller drag. 34 00:02:44,240 --> 00:02:51,300 I'm going to use the show method which is the default method of sake v between navigation controllers. 35 00:02:51,450 --> 00:02:59,250 The moment I do that my pink viewpoint were also receives the bar on the top as well as a back by then. 36 00:02:59,250 --> 00:03:01,500 Now let's go ahead and run this application 37 00:03:04,040 --> 00:03:12,080 keep in mind that I'm designing for iPhone 8 mistake as I always do and I'm simulating an iPhone access 38 00:03:12,110 --> 00:03:17,840 which means I'm going to have some misplaced meant essentially some things I'm not going to be in the 39 00:03:17,840 --> 00:03:18,720 right place. 40 00:03:18,830 --> 00:03:21,790 But for this exercise it doesn't really matter. 41 00:03:21,830 --> 00:03:27,870 So now when I press on the pink mean get navigated to the pink view controller the pink you can wear 42 00:03:27,890 --> 00:03:30,450 appears from the right side of the screen. 43 00:03:30,540 --> 00:03:39,290 The slides it set off in and also it has a built in back by then that shows me how we can go back. 44 00:03:39,290 --> 00:03:42,650 Now let's change a few things in here and learn a little bit more. 45 00:03:42,680 --> 00:03:49,340 So the first thing is when I go in here and say when we land on any of these view control I want to 46 00:03:49,340 --> 00:03:50,930 see the title. 47 00:03:50,960 --> 00:03:58,440 So for the view controller which is our green view controller actually and we're changed the names. 48 00:03:58,460 --> 00:04:00,940 So there are more external artery. 49 00:04:01,070 --> 00:04:03,420 So that's a green view controller. 50 00:04:03,470 --> 00:04:08,690 I'm also going to change the name of the file even though it doesn't really matter but it's better that 51 00:04:08,690 --> 00:04:12,980 you have names that are relevant to what they are. 52 00:04:13,430 --> 00:04:15,110 That's my green view controller. 53 00:04:15,110 --> 00:04:23,480 I'm going to add a new view controller so that's six subclass of you I view controller called Pink view 54 00:04:23,480 --> 00:04:35,050 controller so that's my next class and in my storyboard I'm going to say this one is connected to the 55 00:04:35,050 --> 00:04:36,380 green view controller. 56 00:04:37,780 --> 00:04:44,460 And of course my pink one is with pitch perfect now. 57 00:04:44,480 --> 00:04:45,620 But I'm going to do is here. 58 00:04:45,630 --> 00:04:47,260 I'm going to go to Green view controller. 59 00:04:47,280 --> 00:04:51,450 The only thing I'm going to change is this within the view of the Lord. 60 00:04:51,570 --> 00:04:54,370 I'm going to say self dart title. 61 00:04:54,410 --> 00:04:59,480 Say during and I'm going to do the exact same thing in the pink. 62 00:04:59,710 --> 00:05:06,240 So in the pink I'm going to get rid of everyone reformat everything properly get rid of all the other 63 00:05:06,240 --> 00:05:14,240 code so it's clean and tidy and say self not tighten becomes pink. 64 00:05:14,930 --> 00:05:20,400 And let's run the application again and this time we should be able to see a tighter on the top center 65 00:05:20,400 --> 00:05:28,170 corner of the of the bar of the navigation item for the green as well as another one for the pink. 66 00:05:28,830 --> 00:05:34,290 Now the next thing that we might wonder is how can I actually add buttons in here. 67 00:05:34,290 --> 00:05:41,150 What if I wanted to have a little button on the far right corner of the bar here in the green view controller. 68 00:05:41,690 --> 00:05:50,620 So my goal is to gain viewer control up in here I have something called self the navigation IDM dot 69 00:05:50,750 --> 00:05:51,530 right. 70 00:05:51,560 --> 00:05:57,050 Bar but then item which is asking me for a you eye bar by then item. 71 00:05:57,150 --> 00:06:04,080 So let's first make that so I'm gonna say let's just call it my right bar. 72 00:06:04,090 --> 00:06:12,730 By then it say you eye bar by then item and that I'm going I build it like this. 73 00:06:12,750 --> 00:06:18,150 I'm going to go ahead and say it has a type. 74 00:06:18,150 --> 00:06:22,210 So that's going to be a you are by then item system dot. 75 00:06:22,220 --> 00:06:28,500 And I'm going to make it look like a maybe a camera even though I'm not really gonna do anything with 76 00:06:28,500 --> 00:06:35,760 it but maybe it looks like a camera and then the target is obviously here and the action is selector. 77 00:06:35,770 --> 00:06:39,000 And we have to add an action for it for the action of it. 78 00:06:39,000 --> 00:06:46,860 I'm going to say there is a function card camera action and this is something that we have done many 79 00:06:46,860 --> 00:06:48,360 many times before. 80 00:06:48,390 --> 00:06:54,490 This is an objective c at objective c and within its the does something. 81 00:06:54,540 --> 00:07:00,330 So I'm going to add the camera action to my selector and because of the formatting I'm actually going 82 00:07:00,330 --> 00:07:01,740 to remove this first part. 83 00:07:01,770 --> 00:07:07,410 I'm only using this shorthand dot operation so that's something you can do in Swift. 84 00:07:07,410 --> 00:07:13,590 I don't really personally like it and I usually don't do it but since I'm trying to zoom into the screen 85 00:07:13,620 --> 00:07:15,780 I'm actually going to stay with that. 86 00:07:15,810 --> 00:07:22,500 So that's it you are by by then I item got a style that cam or you a boy with an item that system IDM 87 00:07:22,830 --> 00:07:24,080 that camera. 88 00:07:24,090 --> 00:07:31,150 So let's remove that and then of course my right by then becomes this one. 89 00:07:31,500 --> 00:07:38,980 And now everything is working the way we were hoping it will be I still have one error rate is saying 90 00:07:39,160 --> 00:07:42,010 oh it's called right by then. 91 00:07:42,010 --> 00:07:51,640 Okay so I've got my by then and it is placed in the place of the right bar by then an item of my navigation 92 00:07:51,640 --> 00:07:52,350 item. 93 00:07:52,450 --> 00:07:56,060 And every time we tap on it this thing will happen. 94 00:07:56,080 --> 00:07:59,220 For now it just as plain camera. 95 00:08:00,370 --> 00:08:01,090 That's it. 96 00:08:01,840 --> 00:08:07,180 Now let's run the application again and this is how we add buttons to our navigation item. 97 00:08:07,180 --> 00:08:13,680 You can have the left one the right one as well as you can have the title or the title of view. 98 00:08:13,690 --> 00:08:21,910 So in here if I tap on that camera then it obviously says camera it's print sitting here that centrepiece. 99 00:08:21,910 --> 00:08:25,040 The one that is actually a title right now. 100 00:08:25,150 --> 00:08:27,370 It could also be a view. 101 00:08:27,440 --> 00:08:30,070 So you can actually have something in it. 102 00:08:30,070 --> 00:08:30,620 Let's go ahead. 103 00:08:30,630 --> 00:08:37,400 The pink one I mean it's sort of that I'm actually going to change it to be a UI segmented control. 104 00:08:37,480 --> 00:08:42,450 If this was a view that you had two different things happening in it. 105 00:08:42,490 --> 00:08:49,740 So when I go in here to the pink and say I don't want the title well they do want is this my sake city 106 00:08:49,760 --> 00:08:59,290 out it becomes a UI segmented control and the UI segment that control can be built by a coder by a rectangle 107 00:08:59,380 --> 00:09:01,120 or by the items. 108 00:09:01,140 --> 00:09:04,720 I'm going to say let's build it by the items and the items. 109 00:09:04,720 --> 00:09:06,730 I'm going to say there are two items. 110 00:09:06,730 --> 00:09:12,250 One of them is called One and the other one is called Two as simple as that. 111 00:09:12,250 --> 00:09:15,540 So the two items one of them shows the text one. 112 00:09:15,610 --> 00:09:24,510 The other shows the text two and then I'm going to say self that navigation item dot title this then 113 00:09:24,520 --> 00:09:32,540 I'm not going to use the title I won't use a title to view the title view is my segue controller. 114 00:09:32,560 --> 00:09:36,190 Now this go ahead and run this application as simple as that. 115 00:09:36,190 --> 00:09:44,640 I will have a segmented control within my title view going here and now I have those too. 116 00:09:44,710 --> 00:09:51,190 Obviously if you wanted to actually add a rect for it to you know if you want to make it wider or larger 117 00:09:51,220 --> 00:09:54,130 you could do it like that but it works very well like this. 118 00:09:54,130 --> 00:10:01,540 I can simply add a at an action and you're using your value changed and then run a certain function. 119 00:10:01,540 --> 00:10:05,360 So these are the basics of using a navigation controller. 120 00:10:05,360 --> 00:10:10,990 And like I said I'm going to show you another way in the storyboard for building navigation controllers 121 00:10:11,020 --> 00:10:13,740 which are not based on embedding them. 122 00:10:13,870 --> 00:10:15,710 So to do that here's what we do. 123 00:10:15,920 --> 00:10:18,090 We can delete the navigation controller. 124 00:10:18,160 --> 00:10:24,670 I'm actually going to go up here and say let's build a navigation controller which is this one and I'm 125 00:10:24,670 --> 00:10:26,020 going to say let's drag it in here. 126 00:10:26,410 --> 00:10:29,610 I mean you drag your navigation controller by default. 127 00:10:29,620 --> 00:10:34,450 It wants to embed a table view controller and that's not what you want. 128 00:10:34,450 --> 00:10:40,180 So not delete that say I only want the navigation controller and the only thing that really matters 129 00:10:40,180 --> 00:10:46,510 in here is what's the relationship between our navigation controller and or green view controller. 130 00:10:46,990 --> 00:10:48,370 So here's what we're gonna do. 131 00:10:48,400 --> 00:10:54,370 We're gonna say from our navigation controller we're gonna control drive over here and we're going to 132 00:10:54,370 --> 00:10:59,410 say it is the route view controller of our navigation controller. 133 00:10:59,770 --> 00:11:02,430 So that's the route to your controller. 134 00:11:02,440 --> 00:11:06,220 So that Segway is essentially a route view controller Segway. 135 00:11:06,610 --> 00:11:11,830 And of course I have to make my navigation controller to be the initial view controller. 136 00:11:12,700 --> 00:11:16,530 So here it becomes the initial view controller. 137 00:11:17,500 --> 00:11:19,840 And now we go back to where we used to be. 138 00:11:19,840 --> 00:11:26,800 So that's how you would make a manual navigation controller as opposed to embedding an existing view 139 00:11:26,800 --> 00:11:30,190 controller in a navigation controller. 140 00:11:30,190 --> 00:11:32,290 Both of them they do exactly the same thing. 141 00:11:32,290 --> 00:11:34,540 There is no really difference between them. 142 00:11:34,690 --> 00:11:41,490 And finally one last thing that I have to show you is what does this button actually do they backed 143 00:11:41,510 --> 00:11:42,270 by then. 144 00:11:42,430 --> 00:11:48,460 Let's go ahead and change it so it doesn't say go back to Green maybe it has a different icon or a different 145 00:11:48,460 --> 00:11:49,240 look. 146 00:11:49,240 --> 00:11:51,790 And we also understand what is it actually doing. 147 00:11:52,180 --> 00:12:01,600 So let's go to pink and I'm going to go ahead and say let's lift the ball but then become a you are 148 00:12:01,600 --> 00:12:08,710 by but an item and I'm going to build it just like the last time with a button system item you could 149 00:12:08,710 --> 00:12:09,570 make it with that. 150 00:12:09,580 --> 00:12:13,940 You could make it with an image or you could just make it with a title if you wanted to. 151 00:12:13,940 --> 00:12:22,900 So at this same again I'm going to make it a system by then and let's say that button is actually like 152 00:12:22,930 --> 00:12:23,440 a 153 00:12:25,760 --> 00:12:28,660 maybe like a concept. 154 00:12:28,950 --> 00:12:35,880 But it says Council essentially once again and we dropped out so I can get it properly formatted and 155 00:12:35,880 --> 00:12:42,990 the format is going to the self or the action is going to self and the selector for it is going for 156 00:12:43,700 --> 00:12:47,290 are go back action which we don't have yet. 157 00:12:47,300 --> 00:12:48,840 Then we have to add it. 158 00:12:49,080 --> 00:12:54,510 So I'm going to come in here and say this is an objective c function. 159 00:12:54,700 --> 00:12:58,620 Function go back doesn't have any arguments. 160 00:12:59,010 --> 00:13:08,630 And most importantly self-taught navigation item dot left by about an item becomes there left to buy 161 00:13:08,710 --> 00:13:09,240 an item. 162 00:13:09,930 --> 00:13:16,380 So now I have my navigation item in the pink view controller to have the segment of the controller in 163 00:13:16,380 --> 00:13:23,160 the middle and have a left bar button for the place where used to be the back by then if we run the 164 00:13:23,160 --> 00:13:29,790 application now we should be able to see that left bar by then is actually replaced with this newly 165 00:13:29,790 --> 00:13:31,200 created by then. 166 00:13:31,440 --> 00:13:37,500 And that is true it says cancel but when I press council it doesn't do anything simply because it doesn't 167 00:13:37,500 --> 00:13:39,570 know what it should do. 168 00:13:39,630 --> 00:13:42,750 So let's look at that and this is actually important. 169 00:13:42,750 --> 00:13:45,960 So there are two things we could essentially be doing. 170 00:13:45,960 --> 00:13:56,760 One of them is saying self in Dart navigation controller dot pop view controller which essentially does 171 00:13:56,760 --> 00:13:57,240 this. 172 00:13:57,240 --> 00:14:03,110 It pops the current view controller and goes back to the one before that. 173 00:14:03,120 --> 00:14:08,400 Imagine a situation like this if you're a storyboard you have the green one you have the pink front 174 00:14:08,850 --> 00:14:15,180 and then maybe I have another view controller down in here and this view controller is maybe a blue 175 00:14:15,180 --> 00:14:16,830 view controller. 176 00:14:16,830 --> 00:14:18,210 So it looks like that. 177 00:14:18,750 --> 00:14:25,350 So this is essentially called a stack of view controllers for navigation controller at any point you 178 00:14:25,350 --> 00:14:27,080 might be anywhere in this. 179 00:14:27,090 --> 00:14:32,140 So for instance if I'm in the blue one and there is a Segway between them which is sure. 180 00:14:32,430 --> 00:14:38,730 So if I'm at the blue and I say pop view controller I go directly back to the pink one. 181 00:14:38,730 --> 00:14:44,610 But again if I'm at the blue and I want to go back to the route to view controller there's also a V 182 00:14:44,610 --> 00:14:45,560 for that. 183 00:14:45,570 --> 00:14:54,610 So for that we could say self that navigation controller pop to the route view controller. 184 00:14:54,750 --> 00:15:01,620 And with that essentially v escape anyone in between the stack and we go all the way back to the route 185 00:15:01,620 --> 00:15:06,990 view controller depending on your situation you might want to use either of these two. 186 00:15:07,050 --> 00:15:13,620 Usually you pop the view controller so you just score back one step in the stack and sometimes you want 187 00:15:13,620 --> 00:15:17,850 to go back to the very roots view controller and that's quite valid as well. 188 00:15:18,150 --> 00:15:24,660 So for now I'm going to say just pop and if we run the application again we should be able to see that 189 00:15:24,990 --> 00:15:31,770 the pink viewpoint or now has a backed by then which is saying council and it does pop to the previous 190 00:15:31,770 --> 00:15:34,800 view controller then we had cancer we end up here. 191 00:15:35,370 --> 00:15:40,940 So that was a quick introduction to how to use the UI navigation controllers. 192 00:15:40,950 --> 00:15:43,620 I hope you enjoyed it and I'll see you in the next lesson.