1 00:00:00,420 --> 00:00:01,530 Welcome back again. 2 00:00:01,530 --> 00:00:05,810 In this lesson we'll talk about advanced collection of your layouts. 3 00:00:05,820 --> 00:00:11,760 So far everything that we did with layouts have been essentially with the a collection view floor layout 4 00:00:11,760 --> 00:00:18,160 features the which is essentially like the medium level of managing allowed in a collection view. 5 00:00:18,180 --> 00:00:24,110 There is another outlet that is called collection view layout which allows you to do really advanced 6 00:00:24,120 --> 00:00:25,110 the stuff. 7 00:00:25,110 --> 00:00:30,060 Now before I jump in to explore then show you how we going to code that I'm actually going to show you 8 00:00:30,060 --> 00:00:32,240 the product that we're going to build. 9 00:00:32,250 --> 00:00:39,060 This is an application that has so many image views each image of you is essentially a cell of a collection 10 00:00:39,070 --> 00:00:44,340 view and the cells are arranged depending on the height of the images. 11 00:00:44,340 --> 00:00:51,030 So each of the cells they essentially have a different image height and based on that they get a different 12 00:00:51,030 --> 00:00:52,240 cell height. 13 00:00:52,380 --> 00:00:56,430 Now the size of the vit in all of the columns are the same. 14 00:00:56,430 --> 00:01:02,310 There are three columns but even that we could essentially go ahead and modify it collection view layouts 15 00:01:02,310 --> 00:01:08,280 to allow you to do a lot of different things you could choose to have layouts that they have things 16 00:01:08,280 --> 00:01:13,950 such as this one that the vertical height are different or you could have layouts that within a row 17 00:01:13,950 --> 00:01:20,030 you would marriage some cells with each other and make essentially like a visor a longer cell. 18 00:01:20,040 --> 00:01:25,350 So there's a lot of things that we have to do to get to this point is going to be a slightly longer 19 00:01:25,410 --> 00:01:29,780 lesson and let's get a sorted. 20 00:01:29,860 --> 00:01:35,170 The first thing I'm going to do is I'm going to jump into X court start a new application and say this 21 00:01:35,170 --> 00:01:42,740 is an application that is a collection of you read at the vast layout not in my collection view with 22 00:01:42,910 --> 00:01:49,750 advanced layout there are a bunch of things that we know how we have to do and before going to the actual 23 00:01:49,750 --> 00:01:56,050 parts of the layout of I want to make an application that shows me these images and these are the images 24 00:01:56,050 --> 00:02:02,380 that I have provided you guys as well and you could essentially copy any kind of images that you have 25 00:02:02,650 --> 00:02:10,770 someone to copy all of these into my project and in your and wants to all copied in here. 26 00:02:10,790 --> 00:02:17,390 I'm going to make a group of all of them so select all of them new group from selection. 27 00:02:17,490 --> 00:02:19,790 I'm gonna call this one images. 28 00:02:20,030 --> 00:02:23,630 Now the next thing is I'm going to get rid of my view controller. 29 00:02:23,660 --> 00:02:32,780 I'm going to start a new file a new file which is off the Thai UI collection view controller. 30 00:02:32,800 --> 00:02:35,660 I'm gonna call it my collection view controller. 31 00:02:36,290 --> 00:02:41,660 So so far we have our collection view controller and then the next thing is I clean some of this stuff 32 00:02:41,660 --> 00:02:42,050 in here. 33 00:02:42,050 --> 00:02:43,880 They know I don't need them. 34 00:02:43,940 --> 00:02:46,740 So for instance I won't need the view that load. 35 00:02:46,820 --> 00:02:52,490 So we keep that part but then I don't need the number of sections I need the number of rows and I need 36 00:02:52,490 --> 00:02:53,850 the sell for item. 37 00:02:53,870 --> 00:03:01,310 Everything else can go essentially so just like all these three methods are number of rows sell for 38 00:03:01,320 --> 00:03:01,880 IDM. 39 00:03:01,910 --> 00:03:04,190 And of course if you did load. 40 00:03:04,550 --> 00:03:10,150 And one more thing I want to do before I jump into the storyboard I'm going to make a new fine. 41 00:03:10,160 --> 00:03:17,450 This one is a UI collection view sell UI production view cell and that's fun. 42 00:03:17,480 --> 00:03:19,980 I'm going to call it my cell. 43 00:03:20,120 --> 00:03:26,570 Simply because this is a cell that it has to show me an image of you retain it since it has to show 44 00:03:26,570 --> 00:03:27,500 me an image of you. 45 00:03:27,530 --> 00:03:34,670 Maybe I'll just make that one right away and when I say I'll be outlets are valuable my eye AMG view 46 00:03:34,670 --> 00:03:40,550 of the type of UI image you view and then I'm going to head into my storyboard and in the storyboard 47 00:03:40,580 --> 00:03:45,560 I'm going to go ahead and say Let's delete all of the at the outlet that we already have. 48 00:03:45,590 --> 00:03:48,260 Let's make a collection view controller. 49 00:03:48,400 --> 00:03:56,360 The correction view controller becomes my initial view controller and it has a class that is my collection 50 00:03:56,360 --> 00:03:57,800 view controller. 51 00:03:57,860 --> 00:04:00,220 Then I'm going to select the cell in here. 52 00:04:00,260 --> 00:04:05,860 Say it has an IED cell IED just like what we do always. 53 00:04:05,960 --> 00:04:10,370 Then I'm gonna go ahead and say it actually has a let me bring this here. 54 00:04:10,370 --> 00:04:17,960 So if we have a my cell to be the class of this cell and then since this class has an image of you built 55 00:04:17,960 --> 00:04:24,030 into it I'm going to make an image of you in here and say let's set all the constraints for it. 56 00:04:24,030 --> 00:04:25,950 0 0 0 0. 57 00:04:26,000 --> 00:04:27,320 So it's all there. 58 00:04:27,320 --> 00:04:33,130 And then finally from my cell I'm going to connect a major view to this image view. 59 00:04:33,200 --> 00:04:40,250 It usually helps if you've got your image view and say clips to bounce and use a mode such as aspect 60 00:04:40,250 --> 00:04:43,190 Phil which is the one I personally like to use. 61 00:04:43,220 --> 00:04:46,940 So we have a collection view the collection view has a cell. 62 00:04:46,940 --> 00:04:51,490 The cell has an image view and now we can head into our view controller. 63 00:04:51,830 --> 00:04:55,580 And in here we have to make an array of our images. 64 00:04:55,670 --> 00:05:03,020 One of the easier ways if you copy these I should mention that there are ways to read the all the images 65 00:05:03,320 --> 00:05:05,750 from a folder such as this one. 66 00:05:05,780 --> 00:05:07,480 It's a slightly longer code. 67 00:05:07,490 --> 00:05:12,170 So I don't want to do it in here but I would really encourage you guys to have a look at that because 68 00:05:12,410 --> 00:05:18,440 you could essentially go on and read the file manager get the contents from an a folder and fetch all 69 00:05:18,440 --> 00:05:19,910 of them into an array. 70 00:05:19,910 --> 00:05:26,030 I find it a little bit more tedious than just typing it because it's really not a it's another scenario 71 00:05:26,030 --> 00:05:30,670 that happens in real life application you often don't have images like this. 72 00:05:30,740 --> 00:05:36,110 Your images are being fed to an application from a network or a backend. 73 00:05:36,230 --> 00:05:40,450 In any case I'm going to see images in major names. 74 00:05:40,550 --> 00:05:43,190 Let's say right because these are the names of the images. 75 00:05:43,190 --> 00:05:45,200 They're not the actual images. 76 00:05:45,200 --> 00:05:50,030 So these names are going to be me format this a little bit better. 77 00:05:50,030 --> 00:05:56,460 So they all have a quotation at the beginning of them and they have this. 78 00:05:56,540 --> 00:06:01,810 So that's I'm going to copy that say paste it in here. 79 00:06:02,840 --> 00:06:13,380 I didn't do what I was hoping someone copied manually so dat dat dat dat dat dat dat dat. 80 00:06:13,400 --> 00:06:21,690 And then at the very beginning of all of them and when I have to add a open quotation little bit of 81 00:06:23,050 --> 00:06:26,720 extra a Lake Worth both kind of unnecessary. 82 00:06:26,720 --> 00:06:32,160 So now we have all of our images or major names within an array and then in another area. 83 00:06:32,180 --> 00:06:34,080 And that is the actual images are. 84 00:06:34,100 --> 00:06:44,750 So I'm going to say this is valuable images array which is an array of you I image you I image and that 85 00:06:44,750 --> 00:06:48,240 one actually is an empty one right at the very beginning. 86 00:06:48,410 --> 00:06:54,360 And this is all images that we need to to essentially have in our collection view. 87 00:06:54,380 --> 00:06:59,810 So the next thing I'm going to do is I'm going to go in here and say VIN I HAVE MY VIEW THE LORD. 88 00:06:59,840 --> 00:07:05,540 Let's go ahead and read all of those images and place them within our image array. 89 00:07:05,540 --> 00:07:16,700 So I'm going to go ahead in here and say for any in images array names and do this say images array 90 00:07:16,970 --> 00:07:26,720 that append and the one I want to append is actually a UI image that is built by the name that is essentially 91 00:07:26,720 --> 00:07:28,600 coming from any. 92 00:07:28,610 --> 00:07:31,000 So we get the any make the right image. 93 00:07:31,010 --> 00:07:32,560 Place it in the array. 94 00:07:32,600 --> 00:07:38,670 So by the time my view is loaded my images array will have an array of UI images. 95 00:07:38,750 --> 00:07:41,180 You could essentially do another thing as well. 96 00:07:41,180 --> 00:07:44,950 And that is you could make all of these UI images. 97 00:07:44,960 --> 00:07:53,900 You could essentially say here you I image name the dad is the name and then repeat the process for 98 00:07:53,990 --> 00:07:59,530 all of these but I'd rather you know doing it like this because most likely you will read the strings 99 00:07:59,570 --> 00:08:03,140 from a network not the actual image arrays. 100 00:08:03,170 --> 00:08:07,180 And here is telling me that I don't know if this is going to result in an actual thing. 101 00:08:07,180 --> 00:08:10,260 So I'm going to say no I know it already exists. 102 00:08:10,280 --> 00:08:12,800 So we got that part taken care of. 103 00:08:12,800 --> 00:08:18,710 So the next thing is I'm going to say my connection a number of items in sections is images array that 104 00:08:18,740 --> 00:08:28,300 count and then I'm going to say my identifier is cell I.D. and my index fund is index. 105 00:08:28,700 --> 00:08:33,430 But my cell is of the type my set. 106 00:08:33,600 --> 00:08:44,900 And since it is like that then cell that I am view dot image can become images array object that index 107 00:08:44,900 --> 00:08:47,240 part DOT rule. 108 00:08:47,270 --> 00:08:53,960 So so far we've gotten in the cell the full roll and that one shows us an object of the type my cell 109 00:08:54,290 --> 00:08:56,720 and that one should show us the correct image. 110 00:08:56,960 --> 00:09:03,110 And by now I should be able to run the application and see the images appearing in the cells of the 111 00:09:03,110 --> 00:09:04,340 collection view. 112 00:09:04,400 --> 00:09:11,030 So once that is done the next step is to make sure that they are laid out properly and they each get 113 00:09:11,030 --> 00:09:12,840 the height of their image. 114 00:09:12,860 --> 00:09:15,240 So let's go ahead into taking care of that part. 115 00:09:15,460 --> 00:09:21,080 So the design the layout for a collection view we need something that is called a UI collection view 116 00:09:21,080 --> 00:09:26,040 layout and this the kind of class that must be subclass before it can be used. 117 00:09:26,060 --> 00:09:33,170 So I'm going to go in here and say I have a new one called UI collection view layout this find that 118 00:09:33,170 --> 00:09:41,170 the UI collection The View layout I'm going to call this one my custom layout my custom layout. 119 00:09:41,240 --> 00:09:47,150 So this the UI collection view layout that we're subclasses and we will be using this to essentially 120 00:09:47,390 --> 00:09:50,570 lay out the different cells in our collection view. 121 00:09:50,900 --> 00:09:56,480 Unfortunately we have to do a lot of things before we can actually test this and make sure it is actually 122 00:09:56,480 --> 00:09:57,110 happening. 123 00:09:57,200 --> 00:10:03,630 So now the first thing I have to do is I have to go through my storyboard select my UI collection view 124 00:10:03,640 --> 00:10:11,990 is a floor layout and say that is my custom layout making sure that from this point out the floor layout 125 00:10:11,990 --> 00:10:16,200 for my collection view is based on my custom layout. 126 00:10:16,280 --> 00:10:20,240 So now that that part is taking care of we're going to head into our view controller. 127 00:10:20,240 --> 00:10:25,550 I'm going to go up in here before my view did load and I'm going to go ahead and say I have a variable 128 00:10:25,580 --> 00:10:30,240 that is called my layout and my layout is actually of the type. 129 00:10:30,260 --> 00:10:38,230 My custom layout now in my view though I'm going to go ahead and essentially implement that value I'm 130 00:10:38,230 --> 00:10:46,070 going to say my layout is going to become self collection view from the collection view I'm going to 131 00:10:46,070 --> 00:10:52,940 get the collection view layout just like what we had done before and this time I'm going to get it as 132 00:10:53,030 --> 00:11:01,450 my custom layout so I make sure that my collection view layout is being interpreted as my custom layout. 133 00:11:01,490 --> 00:11:08,120 So once we have our layout here in our view of the law then subsequently within our view controller 134 00:11:08,430 --> 00:11:12,820 we have to talk about the custom layout itself what we should do in here. 135 00:11:12,890 --> 00:11:16,420 There are a few things that you have to do in here which is actually quite important. 136 00:11:16,420 --> 00:11:23,480 I'm first write them as as comments will be know what you have to do then I'm going to explain and quote 137 00:11:23,490 --> 00:11:25,260 to each of them independently. 138 00:11:25,600 --> 00:11:30,340 So the first thing that they have to do in here is we have to decide about a few things. 139 00:11:30,340 --> 00:11:37,920 Number of columns in our particular situation the total content height. 140 00:11:37,940 --> 00:11:41,170 What's that total content height that we're going to have. 141 00:11:41,180 --> 00:11:46,900 And a very important thing that is called The Cell attributes that is essentially the attributes for 142 00:11:46,960 --> 00:11:48,550 each particular cell. 143 00:11:48,820 --> 00:11:54,880 What is the wheat and what's the height of that cell and more importantly where it presents itself to 144 00:11:54,880 --> 00:11:55,360 sit. 145 00:11:55,360 --> 00:12:00,700 All of these attributes we need a method that is called the prepare which is an essentially a built 146 00:12:00,700 --> 00:12:07,870 in method of a UI collection view layout that the overriding once we're done with the preparation we 147 00:12:07,870 --> 00:12:14,860 will have all the attributes that we need to do whatever we need to do with our different cells and 148 00:12:14,860 --> 00:12:23,740 we have to lay them out and that's what we do with layout attributes for element in rectangle which 149 00:12:23,740 --> 00:12:29,500 I will come back to it and I will explain how it works but it essentially is a way for us to find the 150 00:12:29,500 --> 00:12:36,360 cell that is going to be presented in a certain section of a collection view and then we explain to 151 00:12:36,370 --> 00:12:40,750 the to the software what are the attributes for this particular cell. 152 00:12:41,290 --> 00:12:47,350 Now the last thing that we have to do in here is that as you are going through their preparation and 153 00:12:47,350 --> 00:12:54,310 as we are changing the number of the elements and the height of them the over all height of the content 154 00:12:54,310 --> 00:12:55,530 will change as well. 155 00:12:55,630 --> 00:13:01,210 And for that we need another method that is called collection view content. 156 00:13:01,220 --> 00:13:08,140 Size of course the size of it it represents both the width and height but we are not really interested 157 00:13:08,140 --> 00:13:13,690 in the video part the fit the width whatever it is always set in our case but the height of it it changes 158 00:13:13,960 --> 00:13:18,100 it's very similar to when we were doing the content size for a scroll view. 159 00:13:18,100 --> 00:13:20,350 If you think of that sort. 160 00:13:20,380 --> 00:13:24,090 We now kind of have the building blocks for what we are going to do. 161 00:13:24,160 --> 00:13:29,230 And like I said unfortunately I can't run the application at any point in here because we have to do 162 00:13:29,320 --> 00:13:34,870 all of these pieces of code to make sure everything works together and then we will be ready to to run 163 00:13:34,870 --> 00:13:35,950 the application. 164 00:13:35,980 --> 00:13:41,290 The first thing that we have to do in here is if you have to produce some sort of a connection between 165 00:13:41,320 --> 00:13:48,670 this file my custom layout and our actual collection view controller and the images array we have to 166 00:13:48,670 --> 00:13:54,970 find a way that for each image if we somehow produce the height of it and we offer it to our custom 167 00:13:54,970 --> 00:13:57,830 layout and then do that using a delegation. 168 00:13:57,850 --> 00:14:06,810 So up here I'm going to say I have a protocol on my political I'm going to call it custom cost layout 169 00:14:07,310 --> 00:14:08,740 let's say delegate. 170 00:14:09,010 --> 00:14:15,280 So a custom layout delegate with they have one function this one function I'm going to call it the height 171 00:14:15,400 --> 00:14:25,430 for a cell and the cell that they want to get is at index part and that is obviously an index part either 172 00:14:25,500 --> 00:14:32,650 returns a C G float simply because we need to return a value for the height of the set. 173 00:14:32,980 --> 00:14:35,280 Let's recap this really quickly. 174 00:14:35,380 --> 00:14:43,600 This delegation essentially allows us to find the height for each cell depending on the size of the 175 00:14:43,600 --> 00:14:49,060 image from the array since there is going to be connected to our view controller. 176 00:14:49,060 --> 00:14:55,690 I'm going to go in here and say the very first valuable that they have is a delegate and my delegate 177 00:14:55,750 --> 00:15:01,450 is essentially a custom layout delegate which is this guy. 178 00:15:01,960 --> 00:15:08,200 So now we have the delegate for my custom layout and we can use it in our view controller. 179 00:15:08,500 --> 00:15:13,510 Let's go ahead and use do that that's what I'm gonna go to my correction of your controller in my view 180 00:15:13,520 --> 00:15:15,650 did look after I made the my layout. 181 00:15:15,670 --> 00:15:23,310 I'm gonna say my layout dot delegate becomes which is obviously after type custom layout delegate becomes 182 00:15:23,300 --> 00:15:30,340 a self and since it is like that I have to go in here and say custom layout delegate is one of the protocols 183 00:15:30,340 --> 00:15:38,410 that we conform to its custom layout delegate so my collection view now conforms to custom layout delegate 184 00:15:38,830 --> 00:15:47,350 and my layout that delegate is using this file my view correction view controller as is delegation now 185 00:15:47,350 --> 00:15:53,150 since we're using custom layout delegate we have to conform to it and use the functions of it which 186 00:15:53,200 --> 00:15:58,360 is this is the only one that we need I'm going to put this at the very far bottom because that's the 187 00:15:58,360 --> 00:15:59,680 last thing we're gonna be doing. 188 00:16:00,130 --> 00:16:10,480 So here I'm going to write the comment for it in this function we should produce the height for each 189 00:16:10,540 --> 00:16:18,850 set the height for each cell once it gets produced it has to go back to our custom layout and essentially 190 00:16:18,940 --> 00:16:27,060 inform us of it in the preparation of what the attributes are for that cell and what is the overall 191 00:16:27,070 --> 00:16:28,510 content height. 192 00:16:28,510 --> 00:16:30,160 So let's jump in here. 193 00:16:30,370 --> 00:16:37,510 Right on the top I'm going to say after I have the delegation I have a valuable card columns and that 194 00:16:37,510 --> 00:16:41,880 is going to be a value of say three four now actually. 195 00:16:41,890 --> 00:16:45,600 Could this make this a lot to value because we're not changing that. 196 00:16:45,640 --> 00:16:51,180 That's something you could potentially connect to some sort of a settings section of your application. 197 00:16:51,190 --> 00:16:57,030 This is a static value that's going to make three columns for applications collection view. 198 00:16:57,080 --> 00:16:59,780 The next thing I'm going to do is I'm going to make a value in it. 199 00:16:59,860 --> 00:17:02,250 And that's going to be a content. 200 00:17:02,290 --> 00:17:03,340 Right. 201 00:17:03,490 --> 00:17:05,980 And the content height is a C.G. float. 202 00:17:06,040 --> 00:17:12,070 And that is by default to zero right at the very beginning we have no sales and the content height should 203 00:17:12,070 --> 00:17:14,200 be set at zero. 204 00:17:14,200 --> 00:17:20,440 Now in saying that we immediately need to take care of this one collection view content size we have 205 00:17:20,440 --> 00:17:22,340 to return the size of it. 206 00:17:22,360 --> 00:17:29,230 So I'm gonna go ahead and say return and the size of it is going to be a C G size that is built by a 207 00:17:29,230 --> 00:17:34,950 vet on a height the height of it is very easy is the content height David if it is even easier. 208 00:17:34,960 --> 00:17:37,190 It's essentially the collection view. 209 00:17:37,510 --> 00:17:40,590 Dot boundaries and width. 210 00:17:40,810 --> 00:17:45,100 So David's off the collection view is not going to change it is its height. 211 00:17:45,100 --> 00:17:48,700 That might change and the height of it for now it is zero. 212 00:17:48,760 --> 00:17:56,240 But as we go along in preparation we will have to change the height of the content. 213 00:17:56,260 --> 00:18:02,350 Now I'm going to have one more valuable in here and that's valuable is essentially going to be the attributes 214 00:18:02,380 --> 00:18:04,750 that we have for all of the cells. 215 00:18:04,750 --> 00:18:07,170 So each cell is getting prepared. 216 00:18:07,190 --> 00:18:09,310 We write down their attributes. 217 00:18:09,310 --> 00:18:16,930 So I'm gonna go in here and say I have a variable and I'm going to call it all cells 82 hours and that's 218 00:18:16,930 --> 00:18:22,260 going to become a very particular kind of array variable. 219 00:18:22,390 --> 00:18:30,660 And that is your connection view layout attributes UI collection view and layout attributes. 220 00:18:30,700 --> 00:18:36,070 So it's is a kind of object that maintains all attributes about a certain cell. 221 00:18:36,130 --> 00:18:39,350 It maintains frame location content. 222 00:18:39,370 --> 00:18:40,450 So on and so forth. 223 00:18:40,780 --> 00:18:45,790 So once we have all the cell attributes we could essentially use them. 224 00:18:45,850 --> 00:18:47,180 We don't have them yet. 225 00:18:47,200 --> 00:18:52,510 And that's something I have to produce in my prepared and that's going to be our longest function. 226 00:18:52,510 --> 00:18:58,540 But for now I can imagine that if I had them I could essentially going here and use them and let's see 227 00:18:58,540 --> 00:19:00,340 how we will do we doing that. 228 00:19:00,340 --> 00:19:10,360 And when I go in here and say for let's see any cell cheetah are these are the attributes of any cell 229 00:19:10,480 --> 00:19:20,530 in all this cell 80 are within all of these if this situation happened if we had this situation where 230 00:19:20,950 --> 00:19:33,820 any cell 80 are dot frame dot intersects vids rect if this cell that we are going to do is within this 231 00:19:33,820 --> 00:19:41,650 rectangle it means this is that particular cell that we are looking for if that was the case we have 232 00:19:41,650 --> 00:19:46,870 to find all of its attributes and the alphabets that we have to return is an array. 233 00:19:46,870 --> 00:19:53,320 So I'm actually going to go ahead in here and say value about let's call it the return TTR which is 234 00:19:53,320 --> 00:19:59,590 going to be again of the type of EU eye protection view lay out attributes. 235 00:19:59,620 --> 00:20:06,940 So we have this array again and I'm going to say for any of the cells within all the cell attributes 236 00:20:07,270 --> 00:20:11,200 if they are within the rectangle you are trying to draw right now. 237 00:20:11,260 --> 00:20:19,570 Go ahead say return attributes dot append any cell attributes so add that to there and then obviously 238 00:20:19,570 --> 00:20:21,280 finally at the end just returned. 239 00:20:21,970 --> 00:20:27,250 Now I noticed a bit of a long process and a bit of a difficult one. 240 00:20:27,340 --> 00:20:34,210 Once we ran the application and we could actually see how it works I'll come back and I will re-explain 241 00:20:34,240 --> 00:20:41,230 this for you guys then actually going to make a note find myself re explain this spot because by then 242 00:20:41,230 --> 00:20:47,140 we will be able to see things a little bit easier and we get a better sense of what's going on in prepare. 243 00:20:47,140 --> 00:20:53,650 The first thing I'm going to say is that if we were to use the original design that we had created I 244 00:20:53,670 --> 00:20:55,330 have it in here. 245 00:20:55,330 --> 00:21:00,850 Each of these cells would need to have a it would need to have a height and would also need to have 246 00:21:00,850 --> 00:21:02,380 a top left corner. 247 00:21:02,620 --> 00:21:08,290 So they essentially need to know what's the frame for each of these cells we are trying to to make. 248 00:21:08,470 --> 00:21:13,480 Now some things are easier than the other ones for instance if we know the vit of all of them is going 249 00:21:13,480 --> 00:21:15,010 to be exactly the same thing. 250 00:21:15,400 --> 00:21:19,640 And the height of you're going to infer it from this function. 251 00:21:19,650 --> 00:21:21,060 The height for cell. 252 00:21:21,090 --> 00:21:28,070 So we have to find the two origin x and y of the top left corner of them in here and prepare. 253 00:21:28,090 --> 00:21:35,550 So I'm going to go ahead and say hello variable let's call it origin X which is a C G float and by default 254 00:21:35,640 --> 00:21:36,440 a zero. 255 00:21:36,750 --> 00:21:42,320 So let's say the origin x of each of the cells and as we go along we're gonna change it and we're going 256 00:21:42,320 --> 00:21:44,100 to find new numbers. 257 00:21:44,100 --> 00:21:52,200 The next thing is Origin y and this one is actually going to become a I'm writing it a slightly different 258 00:21:52,280 --> 00:21:58,890 I'm writing it as an array and I'm going to go ahead and say here's how it is it is going to be a repeating 259 00:21:58,980 --> 00:22:03,390 array of 0 and the count for it is columns. 260 00:22:03,960 --> 00:22:05,860 So let's see what it means. 261 00:22:06,000 --> 00:22:09,510 I'm writing the two of them in to a slightly different ways. 262 00:22:09,510 --> 00:22:17,390 If we look at our simulator for the X I'm going to calculate it as I go along each time for the Y I'm 263 00:22:17,400 --> 00:22:22,800 going to say there is an array there's got three values based on the number of the columns all three 264 00:22:22,800 --> 00:22:24,590 of them are currently zero. 265 00:22:24,600 --> 00:22:32,460 So it's essentially this location this one and this one the top left corner of each of the columns currently 266 00:22:32,460 --> 00:22:33,510 is zero. 267 00:22:33,600 --> 00:22:36,240 And as we go along I'm going to change that. 268 00:22:36,240 --> 00:22:45,170 So for the idea of a zero in this array I calculate the value for this column for the idea of 1 I calculate 269 00:22:45,170 --> 00:22:50,280 the value for the column in the middle and the last one for the column on the right. 270 00:22:50,280 --> 00:22:56,580 So it is an array that maintains the vies for the first column the second column and the 10th column. 271 00:22:57,000 --> 00:22:58,930 So that path is taken care of. 272 00:22:59,010 --> 00:23:03,070 So the next thing I need to know is I need to know the vit of each of the columns. 273 00:23:03,090 --> 00:23:06,900 So I'm going to go ahead and say let column wait. 274 00:23:07,020 --> 00:23:09,230 It is a C G float of course. 275 00:23:09,300 --> 00:23:17,460 And that becomes my correction view that boundaries that vit and I will divide that by the number of 276 00:23:17,460 --> 00:23:21,710 columns and it helps if I get this C G float value of the. 277 00:23:21,730 --> 00:23:27,480 So it doesn't give me an arrow so that's going to be the width of all of the columns because I need 278 00:23:27,480 --> 00:23:34,210 to get the width of the collection view and divide that by the number of the columns that we have. 279 00:23:34,350 --> 00:23:39,840 The error is because this I have to actually force unwrap it saying that the correction view actually 280 00:23:39,840 --> 00:23:41,720 does exist. 281 00:23:41,790 --> 00:23:49,700 And finally because in the origin y and in the origin X I have to calculate the value of them as we 282 00:23:49,710 --> 00:23:50,880 go along. 283 00:23:50,880 --> 00:23:58,120 It helps that I know which column I'm currently at because we go through the images of one two three 284 00:23:58,120 --> 00:24:04,520 four five six seven eight nine we add them to each column one at a time. 285 00:24:04,590 --> 00:24:09,470 So essentially we build the rows we make one road then we go on we make the next throw. 286 00:24:09,570 --> 00:24:10,960 So on and so forth. 287 00:24:10,980 --> 00:24:17,460 So for each of these I want to know which column I currently am going to go ahead and say I have something 288 00:24:17,460 --> 00:24:26,910 called the value of an car and column car and column which is by default 0 because at the very beginning 289 00:24:27,050 --> 00:24:28,620 at the left column. 290 00:24:28,680 --> 00:24:32,430 So that's the basic stuff for my preparation. 291 00:24:32,520 --> 00:24:39,810 The next thing is going through all the items of my collection view and then changing attributes and 292 00:24:39,810 --> 00:24:43,170 writing it to my attributes array. 293 00:24:43,170 --> 00:24:51,650 So here I'm going to go ahead in my prepare and say once I got this initial set things kind of for I 294 00:24:51,660 --> 00:25:00,060 them in let's say from 0 to collection view from my collection view I'm going to get the number of items 295 00:25:00,120 --> 00:25:07,290 in Section 0 because we only have one section for now I'm going to go through all the items in a numeric 296 00:25:07,290 --> 00:25:09,070 way zero upwards. 297 00:25:09,090 --> 00:25:15,660 So the first thing I'm going to calculate here is the origin X and the value of Origin X is this if 298 00:25:15,660 --> 00:25:19,230 I in the very first column here it is zero. 299 00:25:19,230 --> 00:25:25,920 Otherwise whatever the value was before plus column it then we end up here in the middle and then we 300 00:25:25,920 --> 00:25:28,740 add another one and we end up for the last one. 301 00:25:28,740 --> 00:25:35,670 So let's write it with a ternary if a statement I'm going to go ahead and say in some situation your 302 00:25:35,670 --> 00:25:40,100 value becomes origin x plus the column of it. 303 00:25:40,110 --> 00:25:45,280 So column that are there ways it becomes zero. 304 00:25:45,360 --> 00:25:55,770 And my condition is this my condition is going to be if I them my shoelace columns are loans is not 305 00:25:55,890 --> 00:25:56,580 zero. 306 00:25:56,880 --> 00:26:03,010 So if we are not at the very first one then the value keeps adding to itself. 307 00:26:03,030 --> 00:26:09,270 Otherwise the value is stays zero and that's going to be the value for the very first column. 308 00:26:09,270 --> 00:26:15,270 Essentially if you are equal write this with a complete if a statement as about the next thing I want 309 00:26:15,270 --> 00:26:19,250 to do is I want to buying the index spot in this current sell. 310 00:26:19,280 --> 00:26:22,090 We are trying to find the attributes for it. 311 00:26:22,180 --> 00:26:29,510 So I want to go ahead and say let this index part I call it index part of it. 312 00:26:29,770 --> 00:26:35,790 Let's say I want to get an index smart for this particular place in this particular section. 313 00:26:35,890 --> 00:26:40,820 So I'm going to say item and section section is obviously 0. 314 00:26:41,020 --> 00:26:44,110 The item for it is the number of the item. 315 00:26:44,200 --> 00:26:48,220 So I'm gonna go ahead and say item in item. 316 00:26:48,220 --> 00:26:54,550 So I'm building an index spot not with a capital N with a lower case letter and I'm building an index 317 00:26:54,550 --> 00:26:57,490 spot based on this current number. 318 00:26:57,490 --> 00:26:59,180 In this kind section. 319 00:26:59,180 --> 00:27:04,810 So once I have the index part I can go ahead and find something very important and that is this one 320 00:27:05,170 --> 00:27:11,650 the height of that particular cell because if you remember what you were trying to find was the top 321 00:27:11,650 --> 00:27:15,000 left corner value as well as the width as well as the height. 322 00:27:15,030 --> 00:27:21,370 David we already know is the same thing for everyone which is the value is here kind of it's the origin 323 00:27:21,460 --> 00:27:27,200 X we found for everyone the Y we still have to calculate and the height we still have to calculate. 324 00:27:27,510 --> 00:27:33,820 So we're going to say let's find the value that is the cell height and then to say let's sell height 325 00:27:33,850 --> 00:27:37,300 to be let's find a delegate unfunded delegate. 326 00:27:37,300 --> 00:27:42,260 Let's find the height for sale at index spot which is this index. 327 00:27:42,550 --> 00:27:48,270 Now if you remember this delegation is called in here and we still haven't done that part. 328 00:27:48,280 --> 00:27:53,770 You still have to come back here and calculate the height for the cell but is getting us there we're 329 00:27:53,770 --> 00:27:59,710 getting one step closer at least the next thing is producing the frame for this cell. 330 00:27:59,730 --> 00:28:08,260 So I'm going to say let sell frame I'm going to say that's the CGI activates all the usual stuff. 331 00:28:08,290 --> 00:28:13,360 Now you might be wondering why I haven't calculated the origin of y just yet. 332 00:28:13,370 --> 00:28:15,540 I will explain that to you in a second. 333 00:28:15,550 --> 00:28:23,440 For now we know the origin Y is an array that all of the values in it are 0 and 0 is the valid value 334 00:28:23,440 --> 00:28:30,220 for us at the very beginning when item is 0 and I will experience I can the why I'm not doing that just 335 00:28:30,220 --> 00:28:30,730 yet. 336 00:28:30,850 --> 00:28:34,030 So I'm putting the origin y in here from the origin y. 337 00:28:34,060 --> 00:28:40,660 We obviously have to get a specific item which is the current column which currently at the very beginning 338 00:28:40,660 --> 00:28:41,820 is 0. 339 00:28:41,920 --> 00:28:47,620 Then I'm going to go ahead and say the veto of it is kind of it's something that was very easy. 340 00:28:47,620 --> 00:28:53,770 The height of it is cell height of course on the origin X is the value for the origin X which we have 341 00:28:53,770 --> 00:28:56,890 calculated under is giving me a little error here. 342 00:28:56,900 --> 00:29:05,860 It's saying use of extraneous and because all I have apparently made a mistake here the origin Y should 343 00:29:05,860 --> 00:29:09,850 be a C G float R a not a float array. 344 00:29:09,850 --> 00:29:15,250 So keep that in mind that I made the mistake in here and if you're following me please change that to 345 00:29:15,250 --> 00:29:16,220 a C G float. 346 00:29:16,210 --> 00:29:16,520 All right. 347 00:29:17,110 --> 00:29:23,360 So now we have our cell frame and I have to actually change the value of Origin y as well. 348 00:29:23,380 --> 00:29:30,460 So I'm going to go ahead and say origin y quadrant column in this current one becomes whatever is the 349 00:29:30,460 --> 00:29:37,580 value of the origin y a gain within this client column plus cell height. 350 00:29:37,660 --> 00:29:39,240 So let's see what this line means. 351 00:29:39,250 --> 00:29:45,490 It means that get wherever we are in the origin y and add the cell height to it. 352 00:29:45,490 --> 00:29:53,290 So basically in here if we are currently in this location where my mouse pointer is add as much as the 353 00:29:53,290 --> 00:29:56,560 cell height to it and go to get the next one. 354 00:29:56,560 --> 00:30:04,540 Now the reason I put this line after I made my frame is because I already have the frame for this cell 355 00:30:04,750 --> 00:30:09,280 for this index fund and I am preparing it for the next one. 356 00:30:09,640 --> 00:30:16,570 If we do this line before we make the frame it essentially pushes everything as much as one cell down 357 00:30:16,870 --> 00:30:18,260 at the very beginning. 358 00:30:18,280 --> 00:30:25,150 That's why I left origin wise calculation after I made my friend a better approach for this obviously 359 00:30:25,150 --> 00:30:28,960 would be calculating both origin X and Y. 360 00:30:28,960 --> 00:30:35,770 Before we get to this for loop but I don't want to make things overly complicated and the next thing 361 00:30:35,770 --> 00:30:40,010 we have to do is we have to actually find what's the value for the current columns. 362 00:30:40,040 --> 00:30:43,340 I'm going to go in here and say once you found the frame. 363 00:30:43,360 --> 00:30:45,990 Go ahead and say crime column equals. 364 00:30:46,000 --> 00:30:52,450 I'm going to use a conditional statement again I'm going to say based on some condition either it becomes 365 00:30:52,450 --> 00:30:54,370 client column plus one. 366 00:30:54,430 --> 00:31:00,250 So it has to add one tweet s or it becomes zero. 367 00:31:00,370 --> 00:31:09,730 And the condition for it is this the condition for it is if client column is is smaller than columns 368 00:31:10,570 --> 00:31:12,060 minus one. 369 00:31:12,070 --> 00:31:17,280 So if we haven't reached the last column we keep adding to it. 370 00:31:17,320 --> 00:31:18,700 Otherwise we had zero. 371 00:31:18,700 --> 00:31:20,560 Let's see why that is. 372 00:31:20,560 --> 00:31:23,740 So this column is column zero. 373 00:31:23,740 --> 00:31:30,910 This one in the middle is obviously one on this one at the end is to the number of condoms are three. 374 00:31:30,910 --> 00:31:38,560 So as long as we are below three minus one which is essentially two we keep adding. 375 00:31:38,560 --> 00:31:45,610 Otherwise we headed to zero sum for a zero and one we keep adding the moment it becomes two then we 376 00:31:45,610 --> 00:31:49,900 obviously head back to become zero and go back to the first column again. 377 00:31:50,620 --> 00:31:58,240 So we now have our cell frame and we can add that as an attribute to our are all cell attributes. 378 00:31:58,240 --> 00:32:05,500 I'm going to go in here and say now that we have that this go ahead and say let a TTR and that becomes 379 00:32:05,560 --> 00:32:10,150 a new eye collection view lay out attributes. 380 00:32:10,300 --> 00:32:15,960 And when I say that is for sale at this index spot so for sale at this index spot. 381 00:32:16,300 --> 00:32:23,530 And what I want to do is I want to go ahead eventually say all say 80 yards dot append and the one I 382 00:32:23,530 --> 00:32:30,700 want to append is the 82 yard but between these two I have to actually add the summer stuff to it. 383 00:32:30,700 --> 00:32:36,480 Most importantly I have to somehow embed the sell that we made into this attribute. 384 00:32:36,550 --> 00:32:44,490 So I'm going to go ahead and say that part that I really need to do is 82 yard dot frame becomes. 385 00:32:44,620 --> 00:32:48,970 Now we could do one of the two things we could immediately add this guy to. 386 00:32:49,060 --> 00:32:54,000 Say it because the sell frame and that's perfect fine find works properly. 387 00:32:54,010 --> 00:32:59,710 But the problem is we won't even be able to see these little gaps between them. 388 00:32:59,980 --> 00:33:06,180 So we kind of need to add the inset for it so I'm going to take the frame that we have and change it 389 00:33:06,190 --> 00:33:07,510 with the inserts. 390 00:33:07,510 --> 00:33:12,490 So I'm going to go ahead and say let's and I'm going to call it inset frame. 391 00:33:12,490 --> 00:33:21,370 That becomes my current self frame that inset by and I'm going to insert it by both x and y by values 392 00:33:21,370 --> 00:33:29,560 of 5 and 5 and I'm going to add to that frame to become the frame of my my art tribute when I add that 393 00:33:29,560 --> 00:33:31,620 to my cell attributes. 394 00:33:31,630 --> 00:33:38,460 Now before I close this that is one tiny tiny thing that we still have to do and that is this situation. 395 00:33:38,650 --> 00:33:47,030 My value for content height is currently zero and if we keep this value at content height zero vividly 396 00:33:47,040 --> 00:33:53,080 I still see these but you won't be able to scrawl it anymore simply because it's going to feel like 397 00:33:53,080 --> 00:33:57,440 their value for the content height is always a static number of zero. 398 00:33:57,490 --> 00:33:59,660 So I'm going to change that and get it going. 399 00:33:59,660 --> 00:34:06,760 Yeah I'll say as we do this spot and as we make new frames and we have all the frames which is based 400 00:34:06,760 --> 00:34:13,780 on the frame of the original cell and inserted by values of five and five then go ahead and say content 401 00:34:13,780 --> 00:34:17,680 height becomes the value of this. 402 00:34:17,710 --> 00:34:27,370 The maximum value between the current content height whatever that value might be and the value of inset 403 00:34:27,370 --> 00:34:32,990 frame inset frame dot maximum y. 404 00:34:34,180 --> 00:34:37,570 Now let me explain why we have to do this. 405 00:34:37,600 --> 00:34:43,640 The reason we have to do this is this the content height is actually not calculated anywhere. 406 00:34:43,870 --> 00:34:50,350 We are using it in here to find the content size and obviously we set it to zero at the very beginning 407 00:34:50,650 --> 00:34:58,360 but then our content height essentially has to be the size of the highest column that we have. 408 00:34:58,630 --> 00:35:05,890 So for instance in this current iteration this middle column the combination of the size of this cell 409 00:35:05,920 --> 00:35:12,160 and this cell and this set all the way to the last one the total height of them should be our content 410 00:35:12,160 --> 00:35:12,940 height. 411 00:35:12,970 --> 00:35:19,690 Now the way we calculate it is this we are saying find the value of the size of this particular cell 412 00:35:19,930 --> 00:35:27,070 find the height of that find the maximum value value of it which is essentially what it can reach at 413 00:35:27,070 --> 00:35:32,000 the maximum value of the Y I'm put that as the content height. 414 00:35:32,020 --> 00:35:38,380 Now you might be wondering what's the max value for let's say this wasn't here if you were only doing 415 00:35:38,380 --> 00:35:45,670 it based on the maximum y value of the last object that we get because as we go through all the items 416 00:35:46,000 --> 00:35:51,700 we get the last one in here and this example clearly shows what's going to happen because this picture 417 00:35:51,730 --> 00:35:57,880 the one on the far right by them corner is actually shorter than the image in the middle or essentially 418 00:35:57,880 --> 00:36:04,890 this column as the far right is shorter than the middle column somewhere before here we have reached 419 00:36:04,890 --> 00:36:11,910 the higher value for the y of the content height but then here we are kind of shrinking it back. 420 00:36:12,010 --> 00:36:18,480 That's why we said get the maximum value between the two of them if you have reached a higher one because 421 00:36:18,480 --> 00:36:21,810 of one of the columns then keep it like that. 422 00:36:21,810 --> 00:36:30,090 If we haven't then increases by whatever value is in here the max value is to account for the difference 423 00:36:30,090 --> 00:36:32,850 between these different images. 424 00:36:32,850 --> 00:36:40,550 So we got the attributes we added adhering to our all cell attributes and now we can go back in here. 425 00:36:40,560 --> 00:36:42,960 The party was supposed to re-explain again. 426 00:36:42,960 --> 00:36:44,450 I still remember that. 427 00:36:44,520 --> 00:36:51,090 So the reason we need the layout attributes for elements is simply because you don't necessarily only 428 00:36:51,090 --> 00:36:57,000 have cells in the sections you might have both cells and you might have supplementary views such as 429 00:36:57,000 --> 00:37:02,760 the head their views or the footer views or any other kind of supplementary views and the rectangle 430 00:37:02,760 --> 00:37:09,660 value here can understand which part of the collection view you are trying to lay out at that particular 431 00:37:09,660 --> 00:37:10,410 moment. 432 00:37:10,410 --> 00:37:16,500 So if the rectangle is the body of the cells then what we want to do is we want to return the values 433 00:37:16,500 --> 00:37:22,060 from the all the cells attributes which we have built in here during our preparation. 434 00:37:22,110 --> 00:37:25,640 If it is not in this case we are not doing anything else. 435 00:37:25,650 --> 00:37:31,020 If you wanted you could actually have another you know array of attributes that was relevant to the 436 00:37:31,020 --> 00:37:33,690 values of the supplementary views. 437 00:37:33,690 --> 00:37:36,330 That's why we had to do this thing in here. 438 00:37:36,330 --> 00:37:42,570 We had to return the attribute for any of the cells but that depends on the cells that we have placed 439 00:37:42,570 --> 00:37:48,560 into the array before and also there in the collection view we currently are at. 440 00:37:48,700 --> 00:37:50,850 So almost everything is ready. 441 00:37:50,850 --> 00:37:58,440 The last part we have to do is calculating this value the cell height which has to be calculated somewhere 442 00:37:58,440 --> 00:38:02,520 else essentially depending on something else. 443 00:38:02,520 --> 00:38:04,650 So let's call ahead to a collection view controller. 444 00:38:04,660 --> 00:38:10,500 And here we produce the height for each of the cells and let's see how we're going to do that to do 445 00:38:10,500 --> 00:38:10,710 that. 446 00:38:10,710 --> 00:38:13,430 I'm going to go ahead and say let's first get the image. 447 00:38:13,430 --> 00:38:21,000 We are trying to show in this particular cell I'm going to say let oration not image that's going to 448 00:38:21,000 --> 00:38:26,900 become my images array object at index path dot item. 449 00:38:27,330 --> 00:38:29,700 So we find the original image. 450 00:38:29,700 --> 00:38:35,420 Then the next thing you have to do is we could just simply go ahead and say let's get this images height 451 00:38:35,730 --> 00:38:41,590 but that height is not necessarily proportional to the size of our columns. 452 00:38:41,610 --> 00:38:47,670 So we have to get its height and we have to make it proportional to the current Vit. 453 00:38:47,730 --> 00:38:54,150 So to do that I'm going to go ahead and say let's get the vet the width of any of them which is very 454 00:38:54,150 --> 00:38:56,850 similar to what we did in the other fine. 455 00:38:57,000 --> 00:39:03,330 I'm going to say sell off dot collection view from the collection view I'm going to get the boundaries 456 00:39:03,540 --> 00:39:04,530 from the boundaries. 457 00:39:04,530 --> 00:39:11,490 I'm going to get the vit of course and I'm going to divide that by the number of the columns and the 458 00:39:11,490 --> 00:39:15,140 number of the columns I have to get it from this object. 459 00:39:15,210 --> 00:39:23,100 My custom layout which I've called it my layout so I'm going to go ahead and say my layout dot columns. 460 00:39:23,280 --> 00:39:25,050 So how many columns are there. 461 00:39:25,380 --> 00:39:32,180 And it really helps if I convert this to a C G float so C G float of this value. 462 00:39:32,280 --> 00:39:34,630 Let me see if I can get all of it in one line. 463 00:39:34,680 --> 00:39:35,760 So yes. 464 00:39:35,780 --> 00:39:41,100 So I'm going to get my corner of it which is the total collection view of it divided by the number of 465 00:39:41,100 --> 00:39:47,310 the columns which returns the same kind of weight as we have in the in the custom layout. 466 00:39:47,340 --> 00:39:49,940 Now do they have that I can get these values. 467 00:39:50,040 --> 00:40:01,130 I can say let this get the vit ratio to become column it divided my original image dot size dot Vit. 468 00:40:01,140 --> 00:40:09,630 So that's the ratio that we have between the current weight and the old width essentially let new height 469 00:40:09,960 --> 00:40:14,910 to become original image that size that height. 470 00:40:15,030 --> 00:40:19,000 I'm going to get that value multiplied by width ratio. 471 00:40:19,080 --> 00:40:24,180 So now I have the new height which is exactly what we need to return. 472 00:40:24,180 --> 00:40:27,570 So new height we have done something like this. 473 00:40:27,600 --> 00:40:29,820 I remember many many sections. 474 00:40:30,000 --> 00:40:33,960 That was when we were trying to fit so many images within a scroll view. 475 00:40:34,050 --> 00:40:36,340 This is kind of a similar situation. 476 00:40:36,390 --> 00:40:42,660 We have an image and we want to make sure that that image actually fits itself within the size that 477 00:40:42,660 --> 00:40:45,310 we have in this particular column. 478 00:40:45,330 --> 00:40:51,060 So if it all goes well we should be able to run this application now and we should be able to get something 479 00:40:51,570 --> 00:40:57,420 quite similar identical to what I've been showing you all through this less than this very very long 480 00:40:57,430 --> 00:41:00,040 lesson with so much to doing it. 481 00:41:00,180 --> 00:41:02,730 So let's see if that's going to happen. 482 00:41:02,730 --> 00:41:05,670 And here is exactly what you were expecting to see. 483 00:41:05,680 --> 00:41:12,590 We have all the columns we have the number of the items that we had as different index parts in here. 484 00:41:12,750 --> 00:41:20,580 And obviously the total height is calculated based on the tallest column that we have so that's about 485 00:41:20,580 --> 00:41:21,650 it for this lesson. 486 00:41:21,660 --> 00:41:24,280 It's been a very very long lesson. 487 00:41:24,480 --> 00:41:30,690 If you run into any issues or if you felt something is still not quite clear Drop me a line or write 488 00:41:30,690 --> 00:41:36,210 in the discussion boards and I will get back to you with more clarification for it. 489 00:41:36,210 --> 00:41:37,730 So let's keep it up to here. 490 00:41:37,770 --> 00:41:39,350 Let's move on to our next lesson.