1 00:00:00,460 --> 00:00:02,670 So I'll come back again in this lesson. 2 00:00:02,680 --> 00:00:08,220 We're going to build on what we learned in our previous lesson and make it custom view that we embed 3 00:00:08,220 --> 00:00:09,660 Bettina's scroll view. 4 00:00:09,840 --> 00:00:16,080 So this is going to be a customer that has a much longer height and for embedding it within a scroll 5 00:00:16,080 --> 00:00:21,430 view we have to change the content size of the scroll view based on the height of that view. 6 00:00:21,660 --> 00:00:23,410 So let's go ahead and see how we're going to do that. 7 00:00:23,410 --> 00:00:30,480 I'm going to export this thought a new application and I'm going to call it cross view in a scroll of 8 00:00:30,480 --> 00:00:30,870 view. 9 00:00:32,370 --> 00:00:37,340 So just like the last time I'm going to come in here and say I haven't you view I'm going to say command 10 00:00:37,390 --> 00:00:41,900 and that's the class I'm going to call it custom view. 11 00:00:44,050 --> 00:00:48,260 Then I'm going to have the same name for a new you. 12 00:00:48,280 --> 00:00:49,400 X I'd be fine. 13 00:00:49,420 --> 00:00:53,410 So command and new user interface excite you fine. 14 00:00:53,680 --> 00:01:00,220 I'm going to call it custom you know in my newly created custom view I'm going to go ahead in here go 15 00:01:00,220 --> 00:01:07,330 to my properties and say its size is actually a freeform size so I can actually choose whether what 16 00:01:07,340 --> 00:01:08,470 I want for it. 17 00:01:08,670 --> 00:01:14,890 And I'm going to say it has a much longer height let's say 1000 is the view that we are designing and 18 00:01:14,890 --> 00:01:17,510 it has to have a lot of different content. 19 00:01:17,800 --> 00:01:22,990 A lot of times when you're doing things like this you're reading content from some sort of a network 20 00:01:23,290 --> 00:01:26,920 and you can develop these interfaces using the code. 21 00:01:27,100 --> 00:01:33,060 But there are also occasions where you actually have to design a long interface within your interface 22 00:01:33,140 --> 00:01:37,730 builder simply because you want to have your items to do a certain thing. 23 00:01:37,900 --> 00:01:41,470 So that's an assumption that I'm using for this particular project. 24 00:01:41,470 --> 00:01:49,030 I'm thinking that my view will have a rate of 375 for now because that's a bit of iPhone 8 and also 25 00:01:49,030 --> 00:01:50,760 it has a height of a thousand. 26 00:01:50,920 --> 00:01:55,900 It doesn't really matter in here because we're going to change it real soon and make it a dynamic one. 27 00:01:55,900 --> 00:01:59,340 But the proportion between these two does not. 28 00:01:59,560 --> 00:02:02,590 Let me add a few items or make that a little bit clearer. 29 00:02:02,650 --> 00:02:06,380 So I'm going to have a label some up here. 30 00:02:06,380 --> 00:02:08,900 There's going to be a label on the label. 31 00:02:08,890 --> 00:02:12,320 Let's have a different color for it so we can see it easier. 32 00:02:12,850 --> 00:02:16,920 And then maybe there is some other objects in here maybe it is on the label in the middle. 33 00:02:16,990 --> 00:02:19,220 And there is something at the very bottom. 34 00:02:19,540 --> 00:02:25,300 And for whatever reason that you are designing your application this is the design it has to have maybe 35 00:02:25,540 --> 00:02:31,780 somebody in the middle and you have a text you for that takes fuel has to show some sort of a description 36 00:02:31,780 --> 00:02:34,310 for an item that you're viewing. 37 00:02:34,340 --> 00:02:39,590 Once that description is over do you have another label and then maybe there is a button that you use 38 00:02:39,590 --> 00:02:40,600 that you can use. 39 00:02:40,600 --> 00:02:42,110 None of these items of them either. 40 00:02:42,130 --> 00:02:47,650 You really have to add them is just for the sake of the ministration to show that this could actually 41 00:02:47,650 --> 00:02:53,810 happen and could be a situation where you need to have a very long view essentially. 42 00:02:53,860 --> 00:02:58,000 I have had this situation happening to me several times in fact. 43 00:02:58,270 --> 00:03:03,150 So for all of these items the only thing that really is important is having the kind of strength so 44 00:03:03,160 --> 00:03:06,370 making sure they stay the way they are. 45 00:03:06,370 --> 00:03:10,170 So to fix that I'm going to say I have a top constraint for here. 46 00:03:10,270 --> 00:03:17,050 I have a leading concern I have a trailing cross-train and I also have a height constraint so that item 47 00:03:17,050 --> 00:03:18,160 is always going to be there. 48 00:03:18,160 --> 00:03:25,960 The label then the takes view is going to have a vertical spacing leading a spacing trailing is spacing 49 00:03:26,050 --> 00:03:28,690 and when to have a height constraint for it. 50 00:03:29,290 --> 00:03:36,740 Same thing I want to do with this label say there's a vertical spacing leading facing trailing spacing 51 00:03:37,680 --> 00:03:43,060 and I'm going to have a height constraint for it then I'll go for that but then say that is a vertical 52 00:03:43,060 --> 00:03:50,440 spacing leading facing and trailing spacing on it has a height. 53 00:03:51,040 --> 00:03:59,710 And then finally and when I come to this Bodom label say it has a Bodom a space leading a space trailing 54 00:03:59,710 --> 00:04:02,860 a space and again a height. 55 00:04:02,860 --> 00:04:08,500 Now I want to mention that in a situation like this you usually want to have an item in between these 56 00:04:08,500 --> 00:04:14,880 two that the height of weight is flexible simply because otherwise you might run into a situation when 57 00:04:14,890 --> 00:04:17,760 you are running this application on a smaller device. 58 00:04:17,980 --> 00:04:20,760 And these items they actually go inside one another. 59 00:04:20,940 --> 00:04:26,710 So to remedy that you put an item in between them that the height of it can be flexible for instance 60 00:04:26,770 --> 00:04:33,280 a table view or a scroll of view something that still can have its own content and yet can have it in 61 00:04:33,280 --> 00:04:34,840 a flexible way. 62 00:04:34,900 --> 00:04:42,940 So for instance in my current situation if for whatever reason my view was increased its size to 1500. 63 00:04:42,940 --> 00:04:47,970 Then again the label at the bottom with a state where it is these three four guys will stay up there 64 00:04:48,280 --> 00:04:51,910 and the size in between would flexibly change its value. 65 00:04:51,910 --> 00:04:57,470 And if I go to something like 800 I would get that if people do something like 600 they actually might 66 00:04:57,490 --> 00:05:00,750 go inside the mind or that which is not really a good thing. 67 00:05:00,970 --> 00:05:06,190 So for that we make sure that we maintain something in between them that is flexible and is going to 68 00:05:06,190 --> 00:05:08,690 account for all sorts of devices. 69 00:05:08,740 --> 00:05:14,620 So now they have these and I said that the thing that we need to keep in mind are these two values 375 70 00:05:14,620 --> 00:05:15,660 and 1000. 71 00:05:15,820 --> 00:05:19,610 Let's go to a custom view swift fight and see what you have to do in there. 72 00:05:19,930 --> 00:05:23,260 So custom view is a subclass of you I view. 73 00:05:23,260 --> 00:05:30,520 So I'm going to go in here and say I need to somehow initialized it under different methods of initialization. 74 00:05:30,520 --> 00:05:32,050 We have to end it with frame. 75 00:05:32,050 --> 00:05:37,280 And we also have to end it with a decoder which is the one that we used in the last lesson. 76 00:05:37,300 --> 00:05:39,760 However I want to do any initialization. 77 00:05:39,790 --> 00:05:45,790 But they don't want to initialize it with a frame where they always want to initialize with a certain 78 00:05:45,820 --> 00:05:46,730 event. 79 00:05:46,770 --> 00:05:50,920 Let me explain why that happens when I say in it with it. 80 00:05:51,060 --> 00:05:53,370 And that's going to be a CGI float. 81 00:05:53,480 --> 00:05:55,640 And since this is a custom initialization. 82 00:05:55,640 --> 00:05:58,100 I'm not going to need to overwrite any more. 83 00:05:58,160 --> 00:06:01,190 So it's going to be an in it that I'm customizing myself. 84 00:06:01,340 --> 00:06:05,820 And of course we have to add the required anything which is there in it for decoder. 85 00:06:05,840 --> 00:06:11,710 That is if you want to use this initialization using the storyboard which is not what we want to have 86 00:06:11,720 --> 00:06:13,950 but we still need to have this method. 87 00:06:14,240 --> 00:06:19,710 So I'm set up all of those and say here's in my end it's read improve it. 88 00:06:19,730 --> 00:06:21,230 Let's see what we have to do. 89 00:06:21,260 --> 00:06:27,350 The first thing that we must do is calling a super in what the problem is when I say super thought it 90 00:06:27,800 --> 00:06:29,740 is going to say how do you want to initialize it. 91 00:06:29,740 --> 00:06:34,470 You ain't sure does it with a frame which we don't have or a quote there which we can't use. 92 00:06:34,490 --> 00:06:37,940 So I first have to come up with the frame that I want to use. 93 00:06:38,120 --> 00:06:43,680 Now before we do that let me explain why that is important. 94 00:06:44,120 --> 00:06:48,910 All of you have a proportion of 375 by 1000. 95 00:06:49,100 --> 00:06:56,450 So I'm assuming that if you run this up on the same type of iPhone 8 the same proportions will be maintained 96 00:06:56,570 --> 00:07:01,530 the viewer will have 375 units under it and 1000 units on the height. 97 00:07:01,670 --> 00:07:08,250 If we go into a different device that the video changes then we have to change the height accordingly. 98 00:07:08,360 --> 00:07:14,210 Simply because there is a stuck to the width of the screen but the height is the height of the Scroll 99 00:07:14,210 --> 00:07:14,780 of view. 100 00:07:14,810 --> 00:07:20,810 So we have to maintain disproportioned and based on the proportion come up with a new value for the 101 00:07:20,810 --> 00:07:21,470 height. 102 00:07:21,650 --> 00:07:23,080 Let's see how I'm going to do that. 103 00:07:23,210 --> 00:07:28,440 I'm going here before I do that initialization I'm going to say let. 104 00:07:28,550 --> 00:07:31,080 I'm going to call it the height to it. 105 00:07:31,220 --> 00:07:33,710 That's a ratio of height to a. 106 00:07:33,770 --> 00:07:36,350 I'm going to say that's that the type C.G. float. 107 00:07:36,350 --> 00:07:46,250 And that's going to be 1000 to 375 then I'm going to say I have a new value called the new height and 108 00:07:46,250 --> 00:07:48,750 the new height is also a C.G. float. 109 00:07:48,920 --> 00:07:55,880 And that's going to be disproportioned multiplied by the value received for it. 110 00:07:55,880 --> 00:08:03,740 So essentially if we get the rate of 375 this will be 1000 more devices waiting on the 4:53 multiplied 111 00:08:03,740 --> 00:08:08,350 by 275 and we come back at 1000 which is the size that we wanted. 112 00:08:08,510 --> 00:08:15,200 But if we go to a larger device that has for instance a fleet of 400 then the height would automatically 113 00:08:15,200 --> 00:08:16,380 increase as well. 114 00:08:16,580 --> 00:08:18,350 So now of they have the new height. 115 00:08:18,350 --> 00:08:23,670 Let's go ahead and make the new frame and let new frame be a CGI Rechts. 116 00:08:23,750 --> 00:08:30,710 All of these values x y weight and height the x and y of B obviously have to be zero and zero simply 117 00:08:30,710 --> 00:08:36,230 because I want to stick them to the top left corner of the view but then the width and height of feet 118 00:08:36,230 --> 00:08:37,870 have to be input to. 119 00:08:38,090 --> 00:08:44,000 And your height that be calculated based on the input weight and considering the proportions that we 120 00:08:44,000 --> 00:08:44,860 want. 121 00:08:44,900 --> 00:08:50,360 So this height is the proportional height representing this event. 122 00:08:50,440 --> 00:08:58,370 Now I have a new frame and I can say super that it's with frame new frame and that's going to eliminate 123 00:08:58,430 --> 00:09:02,630 that error as asking us Why are you not initializing your super. 124 00:09:02,660 --> 00:09:05,760 So they have that I have initialized this. 125 00:09:05,780 --> 00:09:12,490 Are you considering the new frame which is based on the video that the user is going to put to us. 126 00:09:12,500 --> 00:09:14,470 Let's go ahead and load the nicknames. 127 00:09:14,480 --> 00:09:16,040 I'm going to say one them. 128 00:09:16,400 --> 00:09:22,110 The main Dark Lord that nickname and I'm going to say like last time. 129 00:09:22,160 --> 00:09:29,840 No options on her itself and the name for it is actually the name of this Iby which is the same name 130 00:09:29,840 --> 00:09:32,110 of my class so custom. 131 00:09:32,360 --> 00:09:36,200 So now we know that the nickname crossed won't be going to be placed in here. 132 00:09:36,560 --> 00:09:40,600 Then we have to add our content view which we don't have just yet. 133 00:09:40,610 --> 00:09:44,050 So I'm going to go up here and say I want to have. 134 00:09:44,210 --> 00:09:47,770 Let me go this time in the assistant window so we can see it that way as well. 135 00:09:47,900 --> 00:09:55,490 So when I go to custom you say my files owner is going to become custom view and then I'm going to say 136 00:09:55,730 --> 00:10:02,200 give me the assistant window and the assistant window this view the main view becomes the content view 137 00:10:02,320 --> 00:10:06,810 so that is going to become the content view. 138 00:10:06,830 --> 00:10:09,810 Now if you wanted you would actually add some of these labels as well. 139 00:10:09,830 --> 00:10:17,450 I'm going to say this one is the top player in top label on them I'm either going to add a function 140 00:10:17,450 --> 00:10:18,780 for the button as well. 141 00:10:18,800 --> 00:10:24,310 So I'm going to say the function for the button is going to be Bawden tapped. 142 00:10:24,320 --> 00:10:28,460 For now it's not really going to do anything you just kind of print something with it but it's going 143 00:10:28,460 --> 00:10:31,090 to give us some confidence that everything is working. 144 00:10:31,100 --> 00:10:35,470 So let's go back to our custom wheel and our custom go after we loaded the nickname. 145 00:10:35,480 --> 00:10:41,590 Now that we have the content I'm going to say as so few of you we want to add to it is the content to 146 00:10:41,590 --> 00:10:42,080 you. 147 00:10:42,230 --> 00:10:49,920 So this is going to the contents from the X I'll be fine x I'll be fine. 148 00:10:50,170 --> 00:10:59,290 So now I have that one and I'm going to go ahead and say content to dot frame becomes a self dot boundaries 149 00:10:59,360 --> 00:11:01,180 so that all of it in here. 150 00:11:01,540 --> 00:11:05,950 Now we have everything that we wanted in here except that I should print something and the button is 151 00:11:06,190 --> 00:11:12,000 path's I'm going to say Crain's say boy then half that. 152 00:11:12,130 --> 00:11:19,180 So now we have our custom view taking care of I'm going to go to my actual storyboard and say here is 153 00:11:19,180 --> 00:11:23,200 going to be a scroll of view that is going to add this custom view to it. 154 00:11:23,200 --> 00:11:26,550 So for that I'm going to say you on a scroll view. 155 00:11:27,930 --> 00:11:34,490 I'm going to place it here say there are zero zero zero constraints stuck to top left right and bottom 156 00:11:35,020 --> 00:11:37,590 and then I'm going to go ahead and say in here. 157 00:11:37,660 --> 00:11:44,370 In my view controller I have an outlet for it that open is actually called my score. 158 00:11:45,850 --> 00:11:52,540 Now just like the last time you put either your custom view in here in the interface or you put it in 159 00:11:52,540 --> 00:11:57,730 the code area which was to do within the code area because the last thing we did in the interface. 160 00:11:57,850 --> 00:12:00,160 So does someone want to do with a little differently. 161 00:12:00,270 --> 00:12:06,100 And when I come in here and say in my view controller view that lot let's go ahead and initialize the 162 00:12:06,100 --> 00:12:06,870 custom. 163 00:12:06,940 --> 00:12:13,540 So to do that I'm going to go ahead and say I have a let's I'm going to call it a container just like 164 00:12:13,540 --> 00:12:19,120 the last time and that's going to become the crust on you and the custom view has an initialization 165 00:12:19,120 --> 00:12:22,450 method called it needs improvement. 166 00:12:22,480 --> 00:12:26,150 So if you give me the new weight I will make the cost on me for you. 167 00:12:26,320 --> 00:12:27,520 So I'm going to use that one. 168 00:12:27,520 --> 00:12:29,600 And what's the bit that you want to give it. 169 00:12:29,700 --> 00:12:35,480 You want to give it is the other escrowed view house because you want to fill the entire screen now 170 00:12:35,600 --> 00:12:46,970 and then go ahead and say let's scroll it to become my scroll of view dot frame dot size dot to it. 171 00:12:47,080 --> 00:12:53,020 Or you could get my score view that bound to start with whichever that you think is more appropriate 172 00:12:53,350 --> 00:12:55,860 when it comes to weight and height bounds and frames. 173 00:12:55,870 --> 00:12:57,770 They do exactly the same thing. 174 00:12:57,820 --> 00:13:02,620 They do not do the same thing when it comes to origin but for the weight and height they are exactly 175 00:13:02,620 --> 00:13:03,470 identical. 176 00:13:03,680 --> 00:13:07,910 So I'm going to say a scroll weight is the weight that they want to feed into my costume we would to 177 00:13:08,140 --> 00:13:09,620 build the container. 178 00:13:09,910 --> 00:13:17,440 Once they build the container I'm going to say my view of the sub view unless I add the containers to 179 00:13:17,440 --> 00:13:23,110 its Tovey and the container into it the next thing I have to do which is very important is making sure 180 00:13:23,110 --> 00:13:28,740 that the content size for a squad view is the same content size as our container. 181 00:13:28,780 --> 00:13:37,750 So I'm going to say Maskell view that content size becomes a container that bounds down to size. 182 00:13:37,810 --> 00:13:42,810 So let's get the size of this guy and make the content size of the school viewed the same. 183 00:13:42,810 --> 00:13:49,240 So a school you essentially can scroll now just one more thing in here and that's just so that we can 184 00:13:49,240 --> 00:13:51,500 see how everything is working. 185 00:13:51,520 --> 00:14:00,640 I'm going to say container darte that's a label which I call it top labeled dot text says we are team 186 00:14:00,700 --> 00:14:02,130 view controller. 187 00:14:02,290 --> 00:14:07,480 So you don't really need to do that but this is just so that we see how we get access to different outlets 188 00:14:07,480 --> 00:14:10,790 from the custom view or the container view. 189 00:14:10,810 --> 00:14:16,360 Now I'm going to go ahead and run this application before I knew that I make sure that they run it on 190 00:14:16,370 --> 00:14:17,820 iPhone 8. 191 00:14:17,880 --> 00:14:21,740 I have the new simulator for this lesson because I want to show you something. 192 00:14:21,800 --> 00:14:27,810 I live right on iPhone 8 and say run the application I'm now going to be on the application escort who 193 00:14:27,820 --> 00:14:30,590 is going to play itself out and then we got to go is it. 194 00:14:30,620 --> 00:14:35,890 We're going to plug it into the custom view based on that the width and height of the customer we're 195 00:14:35,920 --> 00:14:39,940 going to be calculated and they all should be shown within the scroll of view. 196 00:14:40,120 --> 00:14:43,190 Let's see if that is the case and that is the case. 197 00:14:43,210 --> 00:14:49,670 So I'm seeing on the top we have that label that says we are in view controller then we have that takes 198 00:14:49,790 --> 00:14:52,750 them we have some random objects and then we have this label. 199 00:14:52,750 --> 00:14:56,730 And every time we pressed the button in here it says Vardhan tapped. 200 00:14:56,740 --> 00:15:03,460 So everything is working but then show you what happens if we go ahead and switch to another type of 201 00:15:03,460 --> 00:15:04,260 device. 202 00:15:04,510 --> 00:15:05,260 What do you feel. 203 00:15:05,260 --> 00:15:11,460 And we run this on a simulator of iPhone 8 plus I'm going to run this application now again. 204 00:15:11,890 --> 00:15:17,020 And the good thing is because they have a simulator I could actually see them next to each other. 205 00:15:17,140 --> 00:15:19,580 I could see this one and yet and that one there. 206 00:15:19,640 --> 00:15:25,670 And as you can see this one is a scrolling is not fitting the way we were expecting it to fit. 207 00:15:25,730 --> 00:15:27,340 And here's the problem with that. 208 00:15:27,340 --> 00:15:33,490 The problem is in the view of the law it is cruel of you hasn't been laid out yet. 209 00:15:33,660 --> 00:15:36,620 The school doesn't know what is it's right to it. 210 00:15:36,760 --> 00:15:40,130 If you're just getting the video that was designed for it. 211 00:15:40,120 --> 00:15:46,450 In the storyboard but not the video that is going to be shown simply because we have to wait for the 212 00:15:46,450 --> 00:15:51,950 viewer to lay out before we can actually get the actual events of this school. 213 00:15:52,030 --> 00:15:53,700 Now you have two options in here. 214 00:15:53,710 --> 00:15:56,050 One is the one that we did in the last lesson. 215 00:15:56,150 --> 00:16:02,410 You do some parts of this which is not the initialization within the view will appear. 216 00:16:02,410 --> 00:16:09,250 The other option is you leave you the lot and you say well before you do any of these things say my 217 00:16:09,250 --> 00:16:12,000 school you lay out if needed. 218 00:16:12,220 --> 00:16:13,330 So lay it out. 219 00:16:13,330 --> 00:16:18,680 Make sure you know what is correct boundaries and then do all of these things. 220 00:16:18,750 --> 00:16:22,960 That's run the application again and this time we should be able to see both of these. 221 00:16:22,960 --> 00:16:28,740 Obviously the iPhone 8 wasn't working but we should see it on the iPhone 8 plus properly as it and that 222 00:16:28,740 --> 00:16:31,880 is what I expected to see and that's what you're seeing in here. 223 00:16:31,890 --> 00:16:37,830 So that was a very quick demonstration of how we can design everything in our interface builder using 224 00:16:37,830 --> 00:16:40,860 a custom view for a view which is much longer. 225 00:16:40,860 --> 00:16:47,220 And then we can embed it within a scroll view and set the content size of the school view to accommodate 226 00:16:47,220 --> 00:16:48,870 for those content. 227 00:16:48,870 --> 00:16:52,470 So this keep it up the hill and move on to our next lesson.