1 00:00:00,980 --> 00:00:08,600 Hyder on will come back this lesson and the next three lessons are essentially interconnected to each 2 00:00:08,600 --> 00:00:08,900 other. 3 00:00:08,900 --> 00:00:14,820 So I really suggest that you try to do all of these four together at the same time. 4 00:00:14,900 --> 00:00:20,540 And these are actually very very important lessons these are important concepts and important techniques 5 00:00:20,840 --> 00:00:23,830 and things that you have to really master them. 6 00:00:24,050 --> 00:00:27,150 So what are these is all about The View controllers. 7 00:00:27,170 --> 00:00:32,100 So far everything that we have made there were actually elements of a view control. 8 00:00:32,120 --> 00:00:36,500 They were being shown to us inside one view controller. 9 00:00:36,650 --> 00:00:40,250 You can think of few contours as the pages. 10 00:00:40,250 --> 00:00:45,730 Imagine you go to a website and you have a page for a home and you have a page for product and you have 11 00:00:45,730 --> 00:00:52,640 a page for services on a page for contactors view contours or somehow a similar thing that for each 12 00:00:52,640 --> 00:00:55,720 of those pages you would need a view controller. 13 00:00:55,850 --> 00:01:02,720 So if you control that contains everything for a certain view and also provide interactivity lets you 14 00:01:03,450 --> 00:01:08,960 tap on a text field and enter a value or click on a button and run a function. 15 00:01:09,020 --> 00:01:10,390 So on and so forth. 16 00:01:10,520 --> 00:01:16,370 So in this very first lesson of view controllers we're going to do something very simple and that is 17 00:01:16,370 --> 00:01:20,370 just adding one new View Controller to our app. 18 00:01:20,390 --> 00:01:23,900 So this code works code in here. 19 00:01:23,980 --> 00:01:32,500 I'm going to close this project I'm going to start another one and call it view controllers. 20 00:01:36,800 --> 00:01:39,400 Once that is good and ready. 21 00:01:39,730 --> 00:01:43,390 I'm going to go for my storyboard on 22 00:01:46,190 --> 00:01:52,030 this thing that we have in here so far this is essentially our view controller. 23 00:01:52,160 --> 00:01:57,980 This is a view controller that is connected to a class also called The View Controller. 24 00:01:58,010 --> 00:02:00,410 Don't be confused by the names of them. 25 00:02:00,410 --> 00:02:03,490 These names are just things that we have given them. 26 00:02:03,560 --> 00:02:06,950 This doesn't have to be called a view controller. 27 00:02:06,980 --> 00:02:12,610 It could be called our home View Controller or main view Quenta or anything of the sort. 28 00:02:12,770 --> 00:02:20,530 But that Typee you I view controller which is the type that is the superclass in here that has to stay. 29 00:02:20,750 --> 00:02:26,050 And this is the view controller of the visual side of it that is connected to that class. 30 00:02:26,060 --> 00:02:32,910 So for now just so that we don't make things overly complicated I'm going to add one more of your control. 31 00:02:32,930 --> 00:02:36,490 I'm going to find the way to navigate from one to another one. 32 00:02:36,500 --> 00:02:38,450 So let's go ahead in here. 33 00:02:38,510 --> 00:02:40,040 I'm going to say up there. 34 00:02:40,040 --> 00:02:42,450 Give me a new view controller. 35 00:02:42,650 --> 00:02:46,550 So as you can see now I have to view controllers side by side. 36 00:02:46,580 --> 00:02:52,490 And in order to make sure that they somehow are different from each other I'm going to change the background 37 00:02:52,490 --> 00:02:54,220 color of either of them. 38 00:02:54,500 --> 00:03:00,740 If you open this little view on your on the left side of your Interface Builder by pressing that little 39 00:03:00,740 --> 00:03:06,520 button at the very bottom of the screen you can see the construct of each of these View control. 40 00:03:06,540 --> 00:03:10,330 This is essentially the hierarchy of that scene. 41 00:03:10,340 --> 00:03:14,510 This is one you control the scene and this is another view controller scene. 42 00:03:14,740 --> 00:03:21,240 And each of them have some objects they have a view controller they have a view they have a first responder 43 00:03:21,260 --> 00:03:22,770 so on and so forth. 44 00:03:23,000 --> 00:03:27,980 Now the thing that I want to do is I want to select their view and that is by just clicking in here 45 00:03:28,310 --> 00:03:31,140 and I want to go there and change their background color. 46 00:03:31,190 --> 00:03:39,320 So one of them becomes green and then the other one on one and make it become some sort of a yellowish 47 00:03:39,320 --> 00:03:40,380 color. 48 00:03:40,400 --> 00:03:46,580 So so far I've managed to have two controllers that they seem quite identical except that there are 49 00:03:46,580 --> 00:03:48,550 some differences between them. 50 00:03:48,560 --> 00:03:54,140 The most notable difference is this little guy that is a little arrow that goes into the green one but 51 00:03:54,170 --> 00:03:55,920 doesn't go to the yellow one. 52 00:03:56,120 --> 00:04:03,770 And if I select my yellow one and go up here and say This one is initially a view controller that little 53 00:04:03,770 --> 00:04:08,510 arrow comes in here I could you know drag it over and drop it to the other one. 54 00:04:08,550 --> 00:04:12,190 And now this one becomes the initial view controller. 55 00:04:12,230 --> 00:04:13,480 Let's see what that means. 56 00:04:13,490 --> 00:04:16,910 I'm going to push this to the yellow one and run my application 57 00:04:21,820 --> 00:04:23,850 as you have undoubtedly guessed. 58 00:04:23,890 --> 00:04:28,370 Now we will see the yellow of your controller because that's the initial one. 59 00:04:28,570 --> 00:04:34,000 And if I push this back to the green line and I read on my application of course this time we're going 60 00:04:34,000 --> 00:04:36,910 to see the green View Controller showing up. 61 00:04:36,910 --> 00:04:45,170 So that essentially says Veach view controller is my initial starting point for this application. 62 00:04:45,340 --> 00:04:52,270 Now that I've done that I'm going to go in here I'm going to add a button and when I get in here I'm 63 00:04:52,270 --> 00:04:53,810 going to place it somewhere in there. 64 00:04:54,070 --> 00:04:57,490 I'm gonna say it's God actually is God. 65 00:04:57,520 --> 00:05:00,370 A yellow ish the same yellow ish background. 66 00:05:00,550 --> 00:05:03,310 And it says let's. 67 00:05:03,610 --> 00:05:04,870 That's not how you type it. 68 00:05:04,930 --> 00:05:08,210 Let's go to yes. 69 00:05:08,680 --> 00:05:17,290 So this button is now meant to take us to the other view controller and we accomplished that by doing 70 00:05:17,290 --> 00:05:20,030 something something called a segue. 71 00:05:20,070 --> 00:05:28,040 Now what drove a Segway by holding the control brother and driving over to my other view controller. 72 00:05:28,480 --> 00:05:34,870 I mean here I'm going I should say the action segment is the show at some point down the track. 73 00:05:34,870 --> 00:05:39,770 I will talk to you about the different controllers and different types of segues. 74 00:05:39,910 --> 00:05:45,400 But for now we're going to go with the default one that is sure which means whenever you press the yellow 75 00:05:45,400 --> 00:05:47,420 one we will end up here. 76 00:05:47,470 --> 00:05:49,270 So let's see how that works. 77 00:05:53,900 --> 00:05:54,410 Perfect. 78 00:05:54,410 --> 00:06:00,380 It takes us to the yellow one on you play select that little saying hey I can actually go in here on 79 00:06:00,390 --> 00:06:08,690 lookout you know some of the things that is in here for instance I can change that kind of to be present 80 00:06:08,780 --> 00:06:09,500 modeling. 81 00:06:09,730 --> 00:06:13,630 And in the presentation I can change that transition to a B. 82 00:06:13,850 --> 00:06:17,150 I don't know something like a flip horizontal. 83 00:06:17,420 --> 00:06:19,120 Let's see how that works. 84 00:06:23,290 --> 00:06:29,240 So now and I top it flips it's horizontally and it lands us in the yellow site. 85 00:06:29,450 --> 00:06:32,770 Now let's imagine you want to have another view controller. 86 00:06:32,840 --> 00:06:36,090 So I'm going to repeat this entire process once again. 87 00:06:36,230 --> 00:06:42,140 I'm going to have another view controller and when I get in here this is my turn to view controller 88 00:06:42,500 --> 00:06:49,760 in an in a in an intermediate application you usually have something about you know 10 to 15 new controllers 89 00:06:50,060 --> 00:06:55,210 depending on you know the complexity and depending on the nature of your application. 90 00:06:55,220 --> 00:07:01,050 So yeah I'm going to go ahead and add another but then just make the background in your read saw the 91 00:07:01,060 --> 00:07:02,250 bag on this ping. 92 00:07:02,270 --> 00:07:03,410 Why not. 93 00:07:03,410 --> 00:07:15,710 And then I'm going to say Give me a button here and this farden I'm going to say it is like that. 94 00:07:15,870 --> 00:07:20,230 Go to Penkridge. 95 00:07:20,230 --> 00:07:20,650 All right. 96 00:07:20,680 --> 00:07:23,550 And they go to pain are just like it makes more sense. 97 00:07:23,550 --> 00:07:25,510 It is actually pink itself. 98 00:07:25,930 --> 00:07:31,930 And the way it works is I hold the control by then and there I get over here and I say actions saying 99 00:07:31,960 --> 00:07:33,890 they should. 100 00:07:34,010 --> 00:07:40,540 Now if you run up occasion I'm sure you can guess it that from the green one you can go to a yellow 101 00:07:40,540 --> 00:07:43,650 one and from the yellow one we can go to the pink trunk. 102 00:07:44,020 --> 00:07:48,210 Of course each of them is using a different kind of transition. 103 00:07:48,220 --> 00:07:50,040 So what did we do. 104 00:07:50,050 --> 00:07:53,920 Let me delete that last one and let me do it Darwan. 105 00:07:53,920 --> 00:08:02,020 So what we have done so far is that we are the new controller we are by then and we are the segue between 106 00:08:02,020 --> 00:08:09,130 them by holding the control by them and dragging over the next window or the next View Controller. 107 00:08:09,130 --> 00:08:16,990 Now what we we also need to do is we need to be able to program on this view controller data view controller 108 00:08:16,990 --> 00:08:21,570 we already had the files for it and we were able to program for it. 109 00:08:21,580 --> 00:08:24,140 This one we're still on are able to do that. 110 00:08:24,190 --> 00:08:25,750 Imagine I wanted to do this. 111 00:08:25,750 --> 00:08:31,070 Imagine I wanted to have a button that in here takes me back. 112 00:08:33,740 --> 00:08:43,970 I'm going to say go back and I go back I'm going to say by gone is Noreen I cannot use a Segway to go 113 00:08:43,970 --> 00:08:50,690 back again but I have to do is I have to programmatically dismiss my view controller and that's something 114 00:08:50,690 --> 00:08:52,540 we are going to see in our next lesson. 115 00:08:52,540 --> 00:08:59,720 We're going to see how we can program things in here because if you think about it this burden belongs 116 00:08:59,720 --> 00:09:05,700 to the green view controller which by default was connected to view controller age and view controller 117 00:09:05,740 --> 00:09:06,360 m. 118 00:09:06,590 --> 00:09:11,100 So how are we going to program something for the yellow one. 119 00:09:11,150 --> 00:09:18,070 How can another set of files appear here that are going to help us connect this view point order the 120 00:09:18,110 --> 00:09:24,950 yellow one to another group of files that we're going to discuss and we're going to find out in our 121 00:09:24,950 --> 00:09:26,810 next lesson. 122 00:09:26,880 --> 00:09:28,110 Keep it up to here. 123 00:09:28,190 --> 00:09:34,130 Like I said it would really help if you do these lessons back to back because you contours are such 124 00:09:34,130 --> 00:09:40,430 large topics and I'm trying to jam as much as I can into these four lessons so you get a sense of a 125 00:09:40,430 --> 00:09:43,730 functioning application in a very short span of time. 126 00:09:43,730 --> 00:09:46,070 So with that in mind let's move on to the next lesson.