1 00:00:00,180 --> 00:00:01,670 Hi and welcome back. 2 00:00:01,680 --> 00:00:08,470 In this listen I'm going to show you how to combine navigation controllers as well as the tab bar controllers. 3 00:00:08,490 --> 00:00:10,810 It's not such a difficult process. 4 00:00:10,820 --> 00:00:14,790 What they often find is that guys that are new to the day struggle. 5 00:00:14,820 --> 00:00:17,700 So I tell I'd quickly show it to you so you know what you have to do. 6 00:00:18,270 --> 00:00:25,650 So that's going to explode and I'm going to load up a score and say I have a single view application 7 00:00:25,700 --> 00:00:32,010 I'm going to call a tab bar and navigation controller. 8 00:00:32,200 --> 00:00:37,080 Now my tab bottom navigation controller I'm going to head into the storyboard industry what I'm actually 9 00:00:37,080 --> 00:00:38,490 going to delete everything. 10 00:00:38,520 --> 00:00:40,050 So I have none of these objects. 11 00:00:40,080 --> 00:00:42,370 I want to build everything from scratch. 12 00:00:42,420 --> 00:00:47,190 You could actually delete your view controller as well if you wanted to essentially build everything 13 00:00:47,190 --> 00:00:48,300 right off the beginning. 14 00:00:48,690 --> 00:00:51,670 So the first thing I need is a tab bar controller. 15 00:00:51,720 --> 00:00:59,080 I'm going to go in here and say Give me a tab bar controller and that's my starting point for this application 16 00:00:59,080 --> 00:01:05,300 is a top or controller that has two items each item essentially represents a one view controller. 17 00:01:05,800 --> 00:01:08,940 And now I'm going to change the color of both of those view controllers. 18 00:01:08,950 --> 00:01:10,580 One of them I'm going to make it. 19 00:01:11,020 --> 00:01:17,200 Maybe this kind of shade of blue and then this one I'm going to make it a type of green. 20 00:01:17,800 --> 00:01:23,620 So I have two view controllers and as you know the relationship between this view controller and the 21 00:01:23,620 --> 00:01:28,780 blue one or the green one is off the type view controllers array. 22 00:01:28,870 --> 00:01:32,650 Let me delete one of them and rebuild it so we have a refresh on that. 23 00:01:32,810 --> 00:01:35,480 While the control button right over here. 24 00:01:35,500 --> 00:01:39,390 And the type of relationship we want is the view controllers. 25 00:01:39,400 --> 00:01:43,130 So that's an array that takes on so many view controllers. 26 00:01:43,150 --> 00:01:44,830 Now that's the default version. 27 00:01:44,830 --> 00:01:46,240 We have been doing so far. 28 00:01:46,300 --> 00:01:52,420 But if I wanted to embed these view controllers in a navigation controller I could simply select them 29 00:01:52,630 --> 00:01:59,010 and say this one for instance has a an embezzlement with in a navigation controller. 30 00:01:59,320 --> 00:02:06,160 And then when the new navigation country gets created essentially that navigation controller becomes 31 00:02:06,220 --> 00:02:10,230 one of the view controllers of my top or controller. 32 00:02:10,240 --> 00:02:12,300 So now the Green view controller. 33 00:02:12,330 --> 00:02:13,240 We just appear. 34 00:02:13,240 --> 00:02:14,600 That's item two. 35 00:02:14,620 --> 00:02:21,020 Let's go ahead and change that so we know what it says that one says Green. 36 00:02:21,250 --> 00:02:22,500 And then the other one. 37 00:02:22,560 --> 00:02:26,110 And when I go ahead and yeah I'll say it says blue. 38 00:02:27,190 --> 00:02:34,510 So now the green one obviously it just appears the blue one appears with a navigation controller and 39 00:02:34,510 --> 00:02:35,470 any from the blue one. 40 00:02:35,470 --> 00:02:41,340 We want to go somewhere and I would have another view controller. 41 00:02:41,860 --> 00:02:47,400 Let's say this new view controller is going to be the view controller that is pink. 42 00:02:47,720 --> 00:02:55,900 And if I have a button I can simply say some of the things I'm doing might seem repetitive. 43 00:02:55,900 --> 00:02:57,680 You guys you guys know how to do it. 44 00:02:57,700 --> 00:03:03,310 They just want to have a quick you know refresher of everything to make sure that we all know how to 45 00:03:03,310 --> 00:03:05,240 use all of these things. 46 00:03:05,260 --> 00:03:10,630 So from the pink fun I can do a controlled drag going here and say Sure. 47 00:03:10,900 --> 00:03:15,880 Now before I go ahead and run this application in the simulator I'm going to go ahead and select my 48 00:03:15,880 --> 00:03:21,920 tab bar controller and say this stop or a controller is the initial view controller. 49 00:03:21,970 --> 00:03:27,790 So someone would launch this storyboard essentially and then I'm going to go ahead and run the application 50 00:03:27,880 --> 00:03:34,090 when the application loads up I should be able to see one of my items as a navigation controller. 51 00:03:34,090 --> 00:03:37,360 The other one as a normal view controller. 52 00:03:37,690 --> 00:03:43,610 So green is the regular view controller and the Blue has a navigation bar up there. 53 00:03:43,670 --> 00:03:49,370 And if I tap on this pink I'm going to go to the pink view controller where there is a backed by that. 54 00:03:49,870 --> 00:03:52,680 Now that's in essence all there is to it. 55 00:03:52,690 --> 00:03:59,650 You can obviously add classes in here for your game view controller for your navigation controller if 56 00:03:59,650 --> 00:04:04,160 you need it to do something for your actual other two view controllers. 57 00:04:04,210 --> 00:04:10,720 Now the last thing I want to show you in here is how to embed your tab for controller with in a navigation 58 00:04:10,720 --> 00:04:11,830 controller. 59 00:04:11,830 --> 00:04:18,250 Now if you imagine we can have something like this we can go in here and say I have a navigation controller 60 00:04:19,270 --> 00:04:24,930 that navigation controller by default makes a table view which we're going to delete on where I get 61 00:04:24,940 --> 00:04:31,060 in here and say for my navigation controller the TAB board controller is the route. 62 00:04:31,060 --> 00:04:36,670 So I'm going to hold the control right over here and say tab ball control is the route to view controller. 63 00:04:37,030 --> 00:04:42,370 And of course I'm going to go ahead and select my navigation controller to be the initial view controller. 64 00:04:42,370 --> 00:04:45,790 Now the problem with this system is this the moment the uploads. 65 00:04:45,820 --> 00:04:51,510 This is storyboard launches the navigation controller which launches the tab or controller which launches 66 00:04:51,520 --> 00:04:53,450 one of these two view controllers. 67 00:04:53,650 --> 00:05:00,040 And we will have one navigation controller controlling a tab bar controller which controllers and other 68 00:05:00,040 --> 00:05:01,660 navigation controller. 69 00:05:01,720 --> 00:05:07,240 And essentially when we end up here we want to know which of the two navigation controllers are being 70 00:05:07,240 --> 00:05:08,280 shown to us. 71 00:05:08,380 --> 00:05:13,750 And I can tell you the top navigation controller will be there to make things a little bit more interesting 72 00:05:13,750 --> 00:05:16,560 and show you the area that's going to happen with this system. 73 00:05:16,600 --> 00:05:20,130 I'm actually going to make one view controller between these two. 74 00:05:20,170 --> 00:05:27,340 So this go ahead in here and say I don't have that but they do have is a view controller such as this 75 00:05:27,340 --> 00:05:30,880 one and this view controller is in between these two. 76 00:05:30,910 --> 00:05:37,720 Let's go ahead and make it have a different background color such as this dark orange and I will have 77 00:05:37,810 --> 00:05:38,920 a by then 78 00:05:42,550 --> 00:05:43,950 that's going to take us to the top. 79 00:05:43,940 --> 00:05:51,520 Barak entourage essentially sort of has a different background as a may be white and it says go to tap 80 00:05:52,090 --> 00:05:54,370 now for the navigation controller. 81 00:05:54,370 --> 00:05:59,450 My orange is going to be the root fuel controller or hold the control that I go over here. 82 00:05:59,500 --> 00:06:06,160 That's the route of your controller and my navigation controller is the initiated view controller. 83 00:06:06,160 --> 00:06:12,070 Then when I type on this at some point in our application if you want to go to the tap or we're gonna 84 00:06:12,070 --> 00:06:19,700 go to a section of our application which has a tab what so for doing that control drive over here and 85 00:06:19,700 --> 00:06:20,810 then I say sure. 86 00:06:20,810 --> 00:06:27,740 And then he's gonna have the navigation controller on top of the tab or controller and then it has the 87 00:06:27,740 --> 00:06:31,720 rest of the things that we have designed let's go and see how this one plays. 88 00:06:31,730 --> 00:06:37,830 If we have it in the simulator reach after two navigation controls over our pier I'm actually going 89 00:06:37,830 --> 00:06:42,320 to show you everything in the background so we can see the little bit larger. 90 00:06:42,320 --> 00:06:45,670 So we know all the design in our mind. 91 00:06:45,710 --> 00:06:47,630 So here is my simulator. 92 00:06:47,630 --> 00:06:53,390 And right off the cuff the moment the app began for events with navigation controller and we ended up 93 00:06:53,420 --> 00:06:55,820 in the dark orange view from there. 94 00:06:55,820 --> 00:07:00,680 I'm going to had the go to tap and then we end up in the green because that's the default view controller 95 00:07:00,740 --> 00:07:02,580 of our top or controller. 96 00:07:02,720 --> 00:07:08,000 And then if I go the blue one we obviously pass through the navigation control and become here to where 97 00:07:08,030 --> 00:07:08,810 we see the pink. 98 00:07:08,810 --> 00:07:12,920 By then if I type on the pink but then I end up in the pink view controller. 99 00:07:12,920 --> 00:07:15,070 And here is where the system breaks. 100 00:07:15,200 --> 00:07:18,940 If I press on the back by then I expectation is to go back to the blue. 101 00:07:19,220 --> 00:07:21,700 But that's not what's going to happen when I press the back. 102 00:07:21,710 --> 00:07:28,100 We actually end up all living here simply because when a person the go to tab and this navigation bar 103 00:07:28,130 --> 00:07:31,630 appeared up there that is on top of everything in there. 104 00:07:31,670 --> 00:07:37,490 And even when I go to the next level and I press the pink again and we have another navigation bar showing 105 00:07:37,490 --> 00:07:43,460 up that one is taking precedence because of that that because it has priority that's one is the one 106 00:07:43,460 --> 00:07:46,090 that's being activated when I press the rack within. 107 00:07:46,160 --> 00:07:48,770 So the solution to that is something quite logical. 108 00:07:48,770 --> 00:07:53,150 The logic of it is well we already have one navigation controller. 109 00:07:53,180 --> 00:07:54,790 Why would they want another one. 110 00:07:54,800 --> 00:07:59,990 And because of that I'm going to go ahead in here and say Let's delete this one instead save from the 111 00:07:59,990 --> 00:08:05,210 TAB Balkans order the blue one becomes another one of the view controllers. 112 00:08:05,240 --> 00:08:09,370 So essentially we drop the middle man middle object in there. 113 00:08:09,420 --> 00:08:15,710 Let's go ahead and running the game and this time a lot we should be able to navigate properly. 114 00:08:16,050 --> 00:08:20,880 Go to tab which takes us to hear that hard ball controller. 115 00:08:20,880 --> 00:08:26,310 Go to the other item which takes us here and then from there on go to pink which takes us to the pink 116 00:08:26,700 --> 00:08:29,070 and then from the pink back to the blue. 117 00:08:29,070 --> 00:08:35,220 And then from the blue back to the top bar and then going back to the taps and we end up in here. 118 00:08:35,220 --> 00:08:41,130 The only real problem in here is now the Green view controller and whatever that you know succeeds that 119 00:08:41,560 --> 00:08:47,810 David also have the navigation controller because we came from some sort of navigation controller. 120 00:08:47,940 --> 00:08:54,270 And if your goal was not to show the navigation bar in this group of view controllers then you can just 121 00:08:54,270 --> 00:08:59,910 say self that navigation item that hidden is true and you can hide the navigation bar in here. 122 00:09:00,240 --> 00:09:06,270 Otherwise with this system we can go through one navigation to control another view controller a group 123 00:09:06,270 --> 00:09:10,180 of TAB or controller items view controllers or what not. 124 00:09:10,230 --> 00:09:16,800 And in all of them we have a way to navigate back and forth between our different group of items essentially 125 00:09:17,120 --> 00:09:21,180 which is quite useful and a lot of application they benefit from such a system. 126 00:09:21,750 --> 00:09:25,410 So let's keep it up to here and let's move on to our next lesson.