1 00:00:00,270 --> 00:00:05,880 High again in this this and I assure you the container views and continued abuse are actually a part 2 00:00:05,880 --> 00:00:07,640 of the IAB outlet. 3 00:00:07,710 --> 00:00:12,660 I know in the past we have actually worked with the views that they called them container views but 4 00:00:12,660 --> 00:00:16,980 they were the ones that we're going to do in this lesson in the system we will be using something that 5 00:00:16,980 --> 00:00:23,640 is specifically called container review and it's essentially built for embedding one view controller 6 00:00:23,730 --> 00:00:25,350 inside another one. 7 00:00:25,350 --> 00:00:29,780 So essentially one view controller becomes a child of another view controller. 8 00:00:29,790 --> 00:00:36,160 Now you might be wondering very is this system useful is essentially very useful when you want to reuse 9 00:00:36,180 --> 00:00:41,940 ability when you want to be able to have one view controller and that gets reused over and over in different 10 00:00:41,940 --> 00:00:43,670 parts of your application. 11 00:00:43,680 --> 00:00:49,560 Imagine you have something like a star rating that you have developed or if you have something like 12 00:00:49,620 --> 00:00:55,500 a set of fields that the user has to enter a value in it or if you have a little application that draws 13 00:00:55,530 --> 00:01:02,250 a child and that child has to be shown in different parts of your application you can do redo this every 14 00:01:02,250 --> 00:01:04,880 time you could use the system with it in the past. 15 00:01:04,890 --> 00:01:12,680 And that is using a reusable you eye view or you could build its own view controller and use it within 16 00:01:12,690 --> 00:01:16,800 a container view which is what I'm going to be showing you in this lesson. 17 00:01:16,830 --> 00:01:24,460 So let's go further into its scope and start a new application called container view up. 18 00:01:24,550 --> 00:01:27,420 That's a view view app. 19 00:01:27,620 --> 00:01:29,790 I was my container view uploads up. 20 00:01:29,790 --> 00:01:35,160 I'm going to head into my storyboard and here in the storyboard I'm going to go ahead and say I need 21 00:01:35,160 --> 00:01:39,600 something called container review where the container review does. 22 00:01:39,630 --> 00:01:45,180 And it says it in here is that defines a region that includes a child the view controller. 23 00:01:45,240 --> 00:01:52,130 So I'm going to say this is my container review but it builds is this is built the way I view with another 24 00:01:52,140 --> 00:01:53,660 view controller. 25 00:01:53,720 --> 00:01:56,850 That view controller re sizes itself automatically. 26 00:01:56,850 --> 00:02:03,120 So it fits within this view I view it has a Segway that connects these two together. 27 00:02:03,570 --> 00:02:10,650 So in my newly created you a view which is that the boundaries for that I'm essentially going to go 28 00:02:10,650 --> 00:02:17,160 ahead and place it in here and something to keep in mind is that this is just a you I view everything 29 00:02:17,160 --> 00:02:22,000 that you have had for you I've used in the past now applies to this one. 30 00:02:22,020 --> 00:02:25,660 So for instance I could go ahead and set some constraints for it. 31 00:02:25,680 --> 00:02:30,630 I could say this is the top constraint This is the leading constraint. 32 00:02:30,630 --> 00:02:32,330 This is the trailing constraint. 33 00:02:32,350 --> 00:02:35,470 Say it's a VIT is equal to this. 34 00:02:35,660 --> 00:02:41,160 At the height constraint for it which I'm going to change you manually lift even animates that to see 35 00:02:41,160 --> 00:02:47,460 that it exactly works the same way but the content of this UI view comes from here. 36 00:02:47,760 --> 00:02:53,770 So my view controller I'm going to go ahead and say it has a different background color. 37 00:02:53,850 --> 00:02:59,910 This UI view controller can have its own class most likely should have its own class. 38 00:02:59,940 --> 00:03:03,030 So I'm going to add a new one see cocoa touch class. 39 00:03:03,030 --> 00:03:10,580 This is a subclass of UI view controller and I'm going to call this one green view controller so I have 40 00:03:10,580 --> 00:03:16,460 the green view controller in here and in my story what I'm going to connect them to each other properly 41 00:03:16,460 --> 00:03:24,500 so the class for this view controller becomes green view controller and then maybe a make an object 42 00:03:24,500 --> 00:03:28,090 in here so an ad something called a label in here. 43 00:03:29,490 --> 00:03:33,080 Let's place it somewhere in the middle and I'm going to make it larger. 44 00:03:33,090 --> 00:03:34,500 Something like that. 45 00:03:34,500 --> 00:03:35,920 Place it right there. 46 00:03:36,930 --> 00:03:41,690 And then we have access to this label victim. 47 00:03:41,700 --> 00:03:43,460 This you I view as well. 48 00:03:43,620 --> 00:03:48,020 And that's something that I'm actually going to ask you guys to do in an exercise. 49 00:03:48,030 --> 00:03:52,230 But for now I want to show you how they we represent each other. 50 00:03:52,230 --> 00:03:53,780 Now we have these two. 51 00:03:53,820 --> 00:03:56,660 Let's go ahead and run the application up until this point. 52 00:03:56,670 --> 00:04:02,460 We should be able to see whatever it is inside this green you eye view controller or a screen you eye 53 00:04:02,460 --> 00:04:07,590 view victim the way view which is embedded in our main view controller. 54 00:04:07,590 --> 00:04:10,040 The one that's currently essentially white. 55 00:04:10,050 --> 00:04:11,300 So let's run that. 56 00:04:11,520 --> 00:04:14,370 And as you can see that's working the way we were expecting it. 57 00:04:14,420 --> 00:04:19,260 There is a little problem with the constraints and that's because I didn't set any constraints for my 58 00:04:19,260 --> 00:04:20,100 label. 59 00:04:20,100 --> 00:04:25,200 So if I wanted I could essentially go ahead and say add all the missing constraints or now that's going 60 00:04:25,190 --> 00:04:27,180 to be taken care of as well. 61 00:04:27,230 --> 00:04:29,630 The next thing I want to show you is this. 62 00:04:29,670 --> 00:04:33,440 I want to show you that this thing essentially is just a you eye view. 63 00:04:33,720 --> 00:04:39,720 So I'm going to go in here and say in my view controllers let's do these things. 64 00:04:39,720 --> 00:04:42,500 Let's go ahead and say I don't want to view the throat actually. 65 00:04:42,900 --> 00:04:50,490 Let's go ahead and say this is let's call this one my container review container view. 66 00:04:51,240 --> 00:04:53,730 So this is the you I view part of it. 67 00:04:53,820 --> 00:04:56,860 I'm also going to get to its height constraint. 68 00:04:56,880 --> 00:05:04,480 I'm going to say this is the height constraint constraint. 69 00:05:04,670 --> 00:05:10,460 So now that you have these tools we could essentially do anything on them that you have been doing on 70 00:05:10,550 --> 00:05:11,880 any other kind of object. 71 00:05:11,880 --> 00:05:17,720 So for instance I'm going to say everything that touches and this is just the simpler way of you know 72 00:05:17,720 --> 00:05:24,170 instead of adding a new button and a new function something I say when I touch make the height constraint 73 00:05:24,620 --> 00:05:31,430 have a different value let's say it becomes five hundred and then animates that. 74 00:05:31,430 --> 00:05:40,220 So you I view dot animates this is obviously not a very good you know practice with when we use container 75 00:05:40,230 --> 00:05:45,740 views but I want to make sure you understand that this is just a UI view and it works exactly the way 76 00:05:45,950 --> 00:05:48,240 everything has been working so far. 77 00:05:48,300 --> 00:05:52,580 And of course here we have to say self DOD view dot. 78 00:05:52,730 --> 00:05:54,530 You have to say layout if needed. 79 00:05:54,560 --> 00:06:01,180 So you have to lay it out once again because we have changed the value and we do that in the animation. 80 00:06:01,280 --> 00:06:09,740 So no they have that we should be able to run this and their view is kind of change its height I think 81 00:06:09,740 --> 00:06:15,780 is going to become larger and the UI view controller is going to do the same thing as well. 82 00:06:15,800 --> 00:06:18,970 So when I touch a boast become larger. 83 00:06:19,040 --> 00:06:25,250 So the green view controller which is the other viewpoint to us being embedded in here is going to essentially 84 00:06:25,250 --> 00:06:28,460 do the same thing as this UI viewer does. 85 00:06:28,460 --> 00:06:32,500 And that's essentially all there is to a container view. 86 00:06:32,510 --> 00:06:35,830 So this was a quick introduction to it in the next lesson. 87 00:06:35,840 --> 00:06:41,810 I'm going to ask you guys as an exercise to do something more more complex and I'll see you there.