1 00:00:00,820 --> 00:00:02,010 Welcome come back again. 2 00:00:02,050 --> 00:00:05,860 In this lesson we're going to get started with collection views. 3 00:00:05,890 --> 00:00:10,950 And since we already know how to use table views a lot of the concepts should be quite familiar now. 4 00:00:11,320 --> 00:00:19,000 So let's go into school and yeah I'm going to start a new application called it my collection view app 5 00:00:19,030 --> 00:00:21,820 or just a collection view app in the collection. 6 00:00:21,820 --> 00:00:27,100 You are the first thing I'm going to do is I'm going to head into the storyboard and change the type 7 00:00:27,190 --> 00:00:28,710 of the view controller. 8 00:00:28,960 --> 00:00:31,980 So I don't want it to be a view controller outlet. 9 00:00:31,990 --> 00:00:35,100 I want it to be a collection viewpoint or an outlet. 10 00:00:35,410 --> 00:00:40,000 So up here I'm going to choose this one which is a collection view controller ultimate. 11 00:00:40,030 --> 00:00:44,920 It's actually very similar to a table view controller except that in a table the view controller. 12 00:00:44,920 --> 00:00:54,400 The cells are necessarily placed in in defend rows by here cells could be in columns or in rows. 13 00:00:54,400 --> 00:00:59,200 So the first thing I'm going to do is I'm going to actually go ahead and make a new file command in 14 00:00:59,740 --> 00:01:05,750 cocoa touch class and this one is going to be of the type you eye collection view controller type. 15 00:01:05,840 --> 00:01:09,330 And I'm going to call it my collection view controller. 16 00:01:09,430 --> 00:01:15,160 Once they have that which is very similar to a table view controller on work I come back in here I'm 17 00:01:15,160 --> 00:01:22,570 going to go through the a storyboard and set the class of my outlet to be this newly created file. 18 00:01:22,570 --> 00:01:25,630 That is my collection view controller. 19 00:01:25,630 --> 00:01:32,260 And finally in here I'm going to go ahead and say this view controller is my initial view controller 20 00:01:32,650 --> 00:01:37,390 and now everything is ready for us to move one with making a collection view. 21 00:01:37,390 --> 00:01:43,120 So in this first example all I'm going to do is I'm going to make a collection view that has says that 22 00:01:43,180 --> 00:01:50,230 each cell depending on their index number will be either green or there would be blue. 23 00:01:50,290 --> 00:01:55,120 So there just gonna be a difference of color between the cells because we're just trying to get a sense 24 00:01:55,120 --> 00:01:56,550 of how it works. 25 00:01:56,560 --> 00:02:00,540 So the first thing is making sure that our cells they actually have an idea. 26 00:02:00,700 --> 00:02:03,150 And this is very similar to what we did in table views. 27 00:02:03,160 --> 00:02:10,320 I'm going to call this identifier of my reusable view to be cell I.D. And that's all I have to do 40 28 00:02:10,550 --> 00:02:11,590 cents. 29 00:02:11,620 --> 00:02:17,320 Now let's head back to our collection view controller and we have a view continuing that we don't need 30 00:02:17,340 --> 00:02:17,820 it anymore. 31 00:02:17,840 --> 00:02:22,160 So I'm going to delete that fine and my correction of your controller. 32 00:02:22,180 --> 00:02:27,820 Let's go ahead and look at some of the items that these should be quite familiar from when we were doing 33 00:02:27,820 --> 00:02:29,110 table views. 34 00:02:29,140 --> 00:02:32,640 I'm going to get rid of my view and looked all together. 35 00:02:32,650 --> 00:02:36,240 I'm actually going to get rid of the static already usable. 36 00:02:36,400 --> 00:02:37,690 Then I'll get it coming here. 37 00:02:37,690 --> 00:02:42,150 That is something called number of sections which for now the only one to one. 38 00:02:42,180 --> 00:02:43,370 So then don't delete that. 39 00:02:43,420 --> 00:02:50,030 So it becomes the default value of one then it's another of the number of the rows. 40 00:02:50,080 --> 00:02:54,540 It's saying how many items you have in each section. 41 00:02:54,610 --> 00:02:59,530 So you're gonna say the number of items for nine is I think value such as Ten. 42 00:02:59,560 --> 00:03:05,280 So I have ten items because this is just a test and we don't really care about the actual values and 43 00:03:06,070 --> 00:03:14,050 then the next important function here is called sell for IDM art which is very similar to a function 44 00:03:14,050 --> 00:03:18,290 table view that was called the for a role at index path. 45 00:03:18,370 --> 00:03:24,190 So this is essentially the one that decides what is going to be there in that cell in that particular 46 00:03:24,190 --> 00:03:26,900 location location being the next Mark. 47 00:03:27,010 --> 00:03:29,980 So in here I'm going to say let's send a collection view. 48 00:03:30,060 --> 00:03:37,540 Dick you're using the identifier identifier is cell I.D. that's part you already know unnamed then they 49 00:03:37,720 --> 00:03:47,110 obviously in next month then in here for the cell I'm going to go ahead and say if index parts dot to 50 00:03:47,290 --> 00:03:59,220 all modulus 2 was 0 then do this said DOD background color make it the UI color dot read the phrase 51 00:03:59,230 --> 00:03:59,690 thus. 52 00:04:00,400 --> 00:04:06,380 And if that wasn't the case right at the very beginning maybe make it green or blue or any other color 53 00:04:06,430 --> 00:04:08,660 let's put it out perhaps. 54 00:04:08,740 --> 00:04:15,700 So what's going to happen now is there's going to try to push 10 cells into our collection view and 55 00:04:15,700 --> 00:04:19,440 then depending on the index Mark is gonna make soft then blew us off them. 56 00:04:19,450 --> 00:04:22,140 Brett let me get rid of everything else. 57 00:04:22,330 --> 00:04:28,720 So I call it becomes easier to navigate around the application and then show you some other stuff that 58 00:04:28,720 --> 00:04:35,850 is quite necessary in fact so once our application runs we can see that we have to do that expecting 59 00:04:35,880 --> 00:04:42,840 red blue red blue so on and so forth but the placement of the cells is not really what you were expecting 60 00:04:42,840 --> 00:04:43,430 to be. 61 00:04:43,470 --> 00:04:49,190 I was hoping that there would be placed right next to each other like the one that I have in my free 62 00:04:49,190 --> 00:04:52,290 instance photos application on my iPhone. 63 00:04:52,290 --> 00:04:54,240 So let's go ahead and fix that. 64 00:04:54,250 --> 00:05:00,480 But the first thing you have to think about is how many items do you want to see in each role simply 65 00:05:00,480 --> 00:05:07,890 because that I was in this storyboard I just manually drag this cell made it a certain size but that 66 00:05:07,890 --> 00:05:14,820 size doesn't really inform anything you have to actually decide about the size of each cell. 67 00:05:14,820 --> 00:05:20,010 You have to tell the machine that you want each cell to be of a certain size or if you want a certain 68 00:05:20,010 --> 00:05:22,610 number of cells in each role. 69 00:05:22,710 --> 00:05:31,520 So for that I'm going to go ahead in here and say I have a value let's call it left I pair our role 70 00:05:31,770 --> 00:05:34,330 I'm going to say that value is actually three four. 71 00:05:34,330 --> 00:05:41,460 Now we could simply change that later on we then have to use four methods from a delegate which is called 72 00:05:41,460 --> 00:05:48,690 the UI collection view flawed delegate which essentially informs our collection view of how to place 73 00:05:48,720 --> 00:05:49,900 each said. 74 00:05:49,900 --> 00:05:55,680 So those four methods are these methods one of them is the size for each item. 75 00:05:55,680 --> 00:06:02,950 So how big each item should be in the next one is going to be the inset for each section. 76 00:06:03,240 --> 00:06:09,150 That's essentially if you have multiple sections in your collection view what is the inset for each 77 00:06:09,150 --> 00:06:10,200 of the sections. 78 00:06:10,200 --> 00:06:16,410 Now in this current example if you only have one of them but this still for that one we have to inform 79 00:06:16,410 --> 00:06:22,920 it of that then we have to find that minimum line a space says in a section. 80 00:06:22,950 --> 00:06:27,110 So what are the minimalist spaces between two lines in each section. 81 00:06:27,120 --> 00:06:29,290 Again we only have one section. 82 00:06:29,460 --> 00:06:37,440 And finally what's the minimum space between cells in a in a section essentially. 83 00:06:37,440 --> 00:06:42,840 Now I know it seems a little bit complicated but the reason for it is collection of views they can do 84 00:06:42,840 --> 00:06:44,450 a lot of different things. 85 00:06:44,460 --> 00:06:49,650 And even though we are showing to do something quite simple by the end of this section we will be doing 86 00:06:49,650 --> 00:06:52,420 far more complex collection views. 87 00:06:52,470 --> 00:06:57,870 And the reason we need all of these methods is simply because of that because we want to be able to 88 00:06:57,870 --> 00:07:04,880 do so much more than the basic collection viewers that are just a square shaped cells next to each other. 89 00:07:04,920 --> 00:07:11,820 Now however for this test I'm going to go in here and say I need another essentially a superclass or 90 00:07:11,820 --> 00:07:19,770 a protocol which is called UI collection view a delegate floor layout so is the floor layout that I 91 00:07:19,770 --> 00:07:29,500 get I gives us these methods that I need one of those methods is called size for item and for the size 92 00:07:29,510 --> 00:07:36,790 for them I'm going to go ahead and say I need to return ACG size so we can see G size. 93 00:07:37,300 --> 00:07:42,160 And for my C G size I have to come up with two values of it and a height. 94 00:07:42,160 --> 00:07:48,160 And since I want them to be placed right next to each other I'm going to say the vit is essentially 95 00:07:48,160 --> 00:07:52,260 the total of it divided by the number of the items. 96 00:07:52,290 --> 00:08:01,500 So I'm going here and say let's W to be self dot collection view dot boundaries that private divide 97 00:08:01,500 --> 00:08:06,590 that we see G floor to value of i.e. Dems per roll. 98 00:08:06,610 --> 00:08:14,170 So because they can't divide ACG frauds by an Integer i had to cast it into a C G float and now we have 99 00:08:14,170 --> 00:08:20,530 the W and when I say W is both of it and height because I won my items to have a square shape I want 100 00:08:20,530 --> 00:08:23,030 them to have the same width and the same height. 101 00:08:23,050 --> 00:08:25,870 So now we have the size for each item. 102 00:08:25,910 --> 00:08:29,180 The next one is the inset for each section. 103 00:08:29,260 --> 00:08:36,880 So I'm going to come in here and say inset for section and that is essentially the edges for each of 104 00:08:36,880 --> 00:08:38,000 the sections. 105 00:08:38,000 --> 00:08:43,670 Now if we change the edges for the section interior each year then actually affect this says. 106 00:08:43,780 --> 00:08:49,450 But since I'm using the boundaries of the collection view because of that is going to affect it. 107 00:08:49,450 --> 00:08:52,250 So for now I'm going to say return. 108 00:08:52,240 --> 00:08:56,550 Sue I edge inset dot zero. 109 00:08:56,680 --> 00:09:00,510 I will show you later what happens if I change this value. 110 00:09:00,610 --> 00:09:06,460 We then talked about having the minimum line of spaces on the minimum of space between the says I'm 111 00:09:06,460 --> 00:09:14,890 going to say minimum interim spacing that is the space between the cells which in a specific section. 112 00:09:14,890 --> 00:09:24,250 I'm gonna say for that return just zero and then I'm going to say minimum line spacing minimum minus 113 00:09:24,310 --> 00:09:31,300 facing for the section I'm going to say for that one as well for now just return to zero. 114 00:09:31,400 --> 00:09:36,220 Let's go ahead and see how this one looks like because I know a lot of quote and I have to break it 115 00:09:36,220 --> 00:09:39,870 down for you so you get a sense of what's happening with each of them. 116 00:09:39,910 --> 00:09:45,160 So now we have a collection view that shows us 10 cells and each cell is perfectly placed next to the 117 00:09:45,160 --> 00:09:45,990 other one. 118 00:09:46,060 --> 00:09:51,520 There is no line spacing that is no in terms of spacing and there is really all of them are perfectly 119 00:09:51,520 --> 00:09:52,950 adjacent to one another. 120 00:09:53,350 --> 00:09:56,410 So the next thing I'm going to do is I going to try to show you something. 121 00:09:56,440 --> 00:10:02,680 I'm going to go in here and say for the inset for the collection of U.S. I'm going to go ahead and say 122 00:10:03,010 --> 00:10:06,450 I actually have a real inset and the real inset is from the top. 123 00:10:06,460 --> 00:10:11,980 Let's say 50 from the left 50 from the bottom zero from the right. 124 00:10:11,980 --> 00:10:15,300 Let's make it a much larger number say a hundred. 125 00:10:15,910 --> 00:10:22,080 And now what we should see is we should see your collection view appearing 50 units from the top a 50 126 00:10:22,090 --> 00:10:23,270 units from the left. 127 00:10:23,290 --> 00:10:25,380 A lot of news from there right. 128 00:10:25,510 --> 00:10:26,970 And that's exactly what's happening. 129 00:10:26,980 --> 00:10:31,260 This is a very collection view is essentially being appearing. 130 00:10:31,300 --> 00:10:38,230 If I change this numbers to say this keep the top at 50 left at five and right and. 131 00:10:38,470 --> 00:10:45,790 Now I entire section is shrunk but less than what it was showing before and that has an impact on the 132 00:10:45,790 --> 00:10:47,360 size of the cells. 133 00:10:47,620 --> 00:10:55,030 So this is now where my collection view is being present at this area but then because the width of 134 00:10:55,030 --> 00:11:00,960 each of them was dependent on the boundaries it is affecting the size of each of the cells. 135 00:11:00,970 --> 00:11:05,800 You could run a little calculation on your own to perfectly calculate this value. 136 00:11:05,830 --> 00:11:08,070 I'm not going to bother with that right now. 137 00:11:08,090 --> 00:11:08,290 Yeah. 138 00:11:08,320 --> 00:11:09,910 Next thing I'm going to show you is this. 139 00:11:09,940 --> 00:11:12,430 Let's put this back to zero. 140 00:11:12,430 --> 00:11:17,170 I'm gonna say let's have minimum line a spacing of 20 and that's the simplest one. 141 00:11:17,170 --> 00:11:26,420 It should have 20 spaces between each two rows in this section and that's exactly what you were expecting. 142 00:11:26,460 --> 00:11:31,520 And finally if I changed your smile you back to zero and change the other one to ten. 143 00:11:31,560 --> 00:11:36,510 We can get spaces between each of the two cells before they're on the application. 144 00:11:36,510 --> 00:11:40,170 I want to add one more method which is a very very simple one. 145 00:11:40,230 --> 00:11:47,370 Did select item which is very similar to our method in table view that was called did select a row at 146 00:11:47,370 --> 00:11:48,360 index spot. 147 00:11:48,480 --> 00:11:51,660 This time is it did select item an index fund. 148 00:11:51,660 --> 00:11:52,350 And then we do that. 149 00:11:52,350 --> 00:11:58,350 I'm going to say print we are at set and let's find out where we are. 150 00:11:58,410 --> 00:12:04,580 All right index smart doctoral so when we run this application now we should see that tennis face ten 151 00:12:04,590 --> 00:12:07,210 point the spaces between each two cells. 152 00:12:07,230 --> 00:12:11,100 Obviously there is not going to be three of them anymore because they don't fit anymore. 153 00:12:11,100 --> 00:12:15,980 So now we have this one and then we have that one in the middle of one it's actually an empty space. 154 00:12:16,170 --> 00:12:18,090 And then we tap on any of them. 155 00:12:18,120 --> 00:12:25,320 Essentially get the number of that said if you want to try a little calculation to make sure that you 156 00:12:25,320 --> 00:12:32,580 find exactly how much the vit should be based on this number you could actually run a little maths in 157 00:12:32,580 --> 00:12:32,800 here. 158 00:12:32,820 --> 00:12:35,640 I'm going to go ahead and do that for you. 159 00:12:35,730 --> 00:12:43,650 So the calculation of it is not all that complicated is essentially saying we have three items and in 160 00:12:43,740 --> 00:12:49,770 between each two of them we need to have 20 or 10 units. 161 00:12:49,770 --> 00:12:58,570 So in Yeah I'm going to go ahead and say let's total margin is items per roll. 162 00:12:58,590 --> 00:12:59,930 How many of them are there. 163 00:13:00,390 --> 00:13:07,230 Minus of one simply because if you have three items we have two gaps between them. 164 00:13:07,230 --> 00:13:11,790 There is the first one and then the gap between the first then and the second one. 165 00:13:11,790 --> 00:13:12,470 That's the one. 166 00:13:12,480 --> 00:13:14,420 And then the gap between the second one. 167 00:13:14,430 --> 00:13:15,470 Undeterred one. 168 00:13:15,480 --> 00:13:18,620 So if there are three says there is two gaps between them. 169 00:13:18,900 --> 00:13:22,230 So items per roll minus one. 170 00:13:22,320 --> 00:13:27,450 I'm going to multiply that number by this one 10 which is a really bad idea. 171 00:13:27,450 --> 00:13:31,670 You have to make all of these dynamic values up here so we can change them. 172 00:13:31,740 --> 00:13:37,080 But for now I'm going to say let's just do it manually like that and this is the total margin that is 173 00:13:37,080 --> 00:13:41,870 being subtracted from the sum total collection of you Vit. 174 00:13:41,910 --> 00:13:48,420 So if you want to calculate this properly I have to say let's get the total margin subtract that from 175 00:13:48,420 --> 00:13:56,200 the vet and then divided by the items Pearl and if you get that then we should be good. 176 00:13:56,250 --> 00:14:02,340 And now he's giving me an error saying that you're trying to divide a force up to like a CGT fraud against 177 00:14:02,340 --> 00:14:03,330 an integer. 178 00:14:03,330 --> 00:14:06,190 So I'm going to go ahead and say yes I want to do that. 179 00:14:06,210 --> 00:14:10,290 So CGT float of this entire value. 180 00:14:10,350 --> 00:14:16,770 So whatever you calculate in here make it the C G float then that's C G float subtracted from the total 181 00:14:16,770 --> 00:14:22,310 of it and divided by items per rows with that becomes the veto of each of the rules. 182 00:14:22,410 --> 00:14:27,380 If you're on the application now we should be able to see our three selves again in each row. 183 00:14:27,420 --> 00:14:32,970 But they also should have a 10 points distance between each two of them which is exactly what we wanted 184 00:14:32,970 --> 00:14:37,800 to see if we wanted to could actually say the minimum Linus spacing is ten as well. 185 00:14:37,800 --> 00:14:39,570 So essentially it would look like that. 186 00:14:39,630 --> 00:14:46,010 Each cell has an instead of its own and they are being placed a slightly separated from the other ones. 187 00:14:46,620 --> 00:14:48,260 So that's about it. 188 00:14:48,270 --> 00:14:51,400 A quick introduction to collection views. 189 00:14:51,450 --> 00:14:56,760 Let's move on to our next lesson where we do more advanced the stuff faith collection. 190 00:14:56,780 --> 00:14:57,060 Yes.