1 00:00:00,150 --> 00:00:01,330 Welcome back again. 2 00:00:01,350 --> 00:00:08,030 In this lesson we will learn how to delete a cell or a series of cells in a collection view. 3 00:00:08,100 --> 00:00:13,610 So let's head into court and in here I'm going to start a new application of the tape single view. 4 00:00:13,620 --> 00:00:21,150 I'm going to call it deleting deleting cells in collection views. 5 00:00:21,210 --> 00:00:23,670 So this is my deleting cells in collection of views. 6 00:00:23,670 --> 00:00:29,790 And once my application is loaded the first thing I'm going to do is I'm going to make a new final command 7 00:00:29,820 --> 00:00:38,880 in this file is going to be called Touch class UI collection view UI collection view controller. 8 00:00:38,880 --> 00:00:42,510 I'm going to call it my collection view controller. 9 00:00:42,690 --> 00:00:48,810 Then I'm going to delete the order view controller and I'm going to head into the storyboard and say 10 00:00:49,320 --> 00:00:50,700 I don't want this outlet. 11 00:00:50,710 --> 00:00:58,530 Rather I need a collection view controller which is also connected to my collection view controller 12 00:00:59,280 --> 00:01:02,380 and is also my initiated view controller. 13 00:01:02,400 --> 00:01:09,420 And finally I'm going to say my cell actually has an I.D. such as cell I.D. And that's all I have to 14 00:01:09,420 --> 00:01:15,330 do to set up the basics of a collection view and then I'm going to head into my collection view controller 15 00:01:15,500 --> 00:01:16,970 get rid of all of doors. 16 00:01:16,980 --> 00:01:23,130 I don't need that and I'm going to go ahead and say let's actually get rid of everything this rewrite 17 00:01:23,160 --> 00:01:24,660 everything on our own. 18 00:01:24,750 --> 00:01:29,490 The very first thing I want to do is I want to say I have a certain number of items. 19 00:01:29,550 --> 00:01:33,650 So let's say let item count to be 10. 20 00:01:33,660 --> 00:01:37,340 This is obviously not the way you do it in a real life application. 21 00:01:37,350 --> 00:01:44,310 I'm just doing it for the sake of testing essentially the next thing I need to do is number of items 22 00:01:44,580 --> 00:01:53,760 in sections for the number of items in sections I'm going to say return item count and then I have sell 23 00:01:53,760 --> 00:01:56,130 for I then add in next month. 24 00:01:56,340 --> 00:02:05,130 And this one I'm going to go ahead and say it has a list let's call it cell that's going to become collection 25 00:02:05,130 --> 00:02:13,470 viewed the Q reusing an idea which was sell a I.D. And then in the expired which is this index back 26 00:02:14,040 --> 00:02:19,620 Now let's say for now my cells are only going to show two different colors something that we have done 27 00:02:19,890 --> 00:02:28,820 before as of at the source cell that like on color becomes you a part of the red and if index path died 28 00:02:28,830 --> 00:02:39,120 to roll modulus 2 was 0 it means if these were even cells let's go ahead and say cell the background 29 00:02:39,120 --> 00:02:42,930 color becomes actually your eye color blue. 30 00:02:43,140 --> 00:02:46,970 And of course at the end we have to return are said now. 31 00:02:47,160 --> 00:02:52,770 Up until this very point we should be able to run our application and we should see a collection view 32 00:02:52,800 --> 00:02:59,430 which doesn't have a flaw or a proper layout but it still shows me a number of cells that some of them 33 00:02:59,430 --> 00:02:59,910 are red. 34 00:02:59,910 --> 00:03:05,730 Some of them are blue and once they have that I can actually go ahead and add some sort of a delete 35 00:03:05,760 --> 00:03:11,640 by then to each of these cells because I'm not that really bother with the flow of this maybe it makes 36 00:03:11,640 --> 00:03:17,640 sense that we go through the a storyboard and we increase the size of the cells so then we run the application 37 00:03:17,670 --> 00:03:24,240 we actually end up seeing them slightly larger so it is easier to select them or view them so something 38 00:03:24,240 --> 00:03:25,290 like that. 39 00:03:25,290 --> 00:03:32,120 Now the next thing I want to do is I want to add a delete by then to each cell in here and let me reformat 40 00:03:32,130 --> 00:03:35,070 this or we get a little bit of a better viewing. 41 00:03:35,110 --> 00:03:40,720 So something like that and yet I'm going to go ahead and say I need a delete button for my grid one 42 00:03:40,740 --> 00:03:47,800 that I'm going to say let delete button and I'm going to make that to be a UI button. 43 00:03:47,830 --> 00:03:50,490 Are you able then can be made from CGI correct. 44 00:03:50,520 --> 00:03:56,310 And that's what I'm going to be doing when I see the CGI correct for this by then which is in every 45 00:03:56,310 --> 00:04:00,570 single cell is somehow on the top left corner. 46 00:04:00,570 --> 00:04:02,040 So it is 0 0. 47 00:04:02,190 --> 00:04:05,200 Maybe the veto if it is 25 25. 48 00:04:05,400 --> 00:04:10,320 So it's a delete by then that is on the top left corner of each cell. 49 00:04:10,320 --> 00:04:17,580 Now the next thing I'm going to do is when I say it is by then dot background color maybe because some 50 00:04:17,580 --> 00:04:18,390 of them are red. 51 00:04:18,390 --> 00:04:19,390 Some of them are blue. 52 00:04:19,420 --> 00:04:20,580 We make the delete by then. 53 00:04:20,580 --> 00:04:24,040 Back on here you a color diet yellow. 54 00:04:24,330 --> 00:04:27,470 So we can see it clearly and visibly. 55 00:04:27,720 --> 00:04:31,710 The next thing I'm going to do is I'm going to go ahead and say I need a title for it. 56 00:04:31,800 --> 00:04:39,510 So I'm going to go ahead and say delete by then that set title and the title of it. 57 00:04:39,510 --> 00:04:44,730 It says X for delete for a state that is normal of course. 58 00:04:44,760 --> 00:04:46,960 So we got that by taking care of. 59 00:04:47,140 --> 00:04:54,210 Now if you remember from our topics when you were dealing with core animation with the CIA early years 60 00:04:54,210 --> 00:05:01,050 on the core graphics I could go ahead and say delete my then dot to layer that corner radius. 61 00:05:01,160 --> 00:05:02,500 Let's give it a little bit afraid. 62 00:05:02,510 --> 00:05:08,060 Yes I may give it the radius that is half of this value so that's twelve point five. 63 00:05:08,060 --> 00:05:14,930 And that essentially makes these pardons to have perfectly round corners like circular by thence. 64 00:05:14,990 --> 00:05:19,850 So once they have that part taking care of then the last thing I'm going to do is I want to make sure 65 00:05:19,850 --> 00:05:23,940 that this button is actually added to my cell. 66 00:05:23,940 --> 00:05:25,640 So I'm gonna go ahead and say cell. 67 00:05:26,040 --> 00:05:30,570 Add the subbed view and the view I want to add is that the need to then. 68 00:05:30,920 --> 00:05:37,510 Now the only thing that is still missing is what happens when we press or when we tap on this by then. 69 00:05:37,760 --> 00:05:43,750 And to do that I'm going to go ahead and say Dale by then start at target for the target of it. 70 00:05:43,760 --> 00:05:51,110 I'm going to add a target which is here and a selector which says go for. 71 00:05:51,130 --> 00:05:52,710 Delete cell. 72 00:05:53,030 --> 00:05:58,340 This is an action that we still have to add in here and the event is touch up inside. 73 00:05:58,370 --> 00:06:00,760 Just like what we usually do. 74 00:06:00,920 --> 00:06:03,960 We now have to write the function for delete set. 75 00:06:03,980 --> 00:06:12,080 So I'm going to come in here and say I have a function that function is called delete cell and I don't 76 00:06:12,080 --> 00:06:14,520 have any kind of return for it. 77 00:06:14,600 --> 00:06:20,420 And since I want to use that for a selector I have to make sure that's exposed as an objective c and 78 00:06:20,420 --> 00:06:23,470 this is a specific to a swift for as you record. 79 00:06:23,540 --> 00:06:28,970 Now before we can actually use the delete cell function there's still something that we have to change 80 00:06:29,030 --> 00:06:31,180 and that is when we call the delete. 81 00:06:31,190 --> 00:06:38,570 By then we go to this function but we don't know which by then from which cell is sending us here and 82 00:06:38,570 --> 00:06:45,300 to fixed on and will go ahead and say My delete then actually has an argument let's call it sender which 83 00:06:45,380 --> 00:06:54,540 is of the type UI by then and in the selector that argument actually gets called by calling the underscore 84 00:06:54,590 --> 00:07:01,850 and then a column that says I am calling this function and this by then is essentially calling it and 85 00:07:01,850 --> 00:07:05,830 now within the delete cell we actually have access to this it. 86 00:07:06,140 --> 00:07:12,410 Now access to this by then alone doesn't mean we know which cell it is but we could actually get it 87 00:07:12,410 --> 00:07:17,430 from it because we know the buttons are a sub view of the cell. 88 00:07:17,540 --> 00:07:18,620 So let's keep that in mind. 89 00:07:18,650 --> 00:07:25,510 The buttons are a sub view of the cell that's going here I say I'm going to have to find this cell so 90 00:07:25,530 --> 00:07:35,360 when I say led to the cell to be sent there whatever it is that sender then super review super review 91 00:07:35,790 --> 00:07:43,370 and I'm gonna get that as a you eye collection view said because I need to make sure that they get this 92 00:07:43,400 --> 00:07:47,730 object send from there I get a super view from there. 93 00:07:47,750 --> 00:07:53,750 I get this cell which is of the type you a collection view cell if you want to be even more careful 94 00:07:53,750 --> 00:07:59,060 about this you could essentially do this you could God this thing you could see God the letters cell 95 00:07:59,480 --> 00:08:07,310 and then depending on the situation you would say I have an LS in the LS I would just say return and 96 00:08:07,370 --> 00:08:12,890 in the not else in the remainder of the court I would decide the right what I want to do in this case 97 00:08:12,950 --> 00:08:18,680 I know cell is of the type you are a collection of your cells so I don't need to guard it but it kind 98 00:08:18,680 --> 00:08:23,320 of is in generally good practice to get used to to guard in Swift. 99 00:08:23,330 --> 00:08:30,110 So I'm going to keep the god I'm going to save once for each year which means we haven't returned so 100 00:08:30,200 --> 00:08:40,430 I'm going to go ahead I'll say let index path to be self DOD connection view and then index path for 101 00:08:40,910 --> 00:08:48,790 cell and I have to force all wrapped up one making sure that since we know the cell existing next fight 102 00:08:48,860 --> 00:08:50,390 does exist as well. 103 00:08:50,540 --> 00:08:58,790 And then finally I'm going to go ahead and say self DOD collection view DOD delete items at this array 104 00:08:58,790 --> 00:09:05,540 of index funds under one is this one index but now we know that if we do this right now you're going 105 00:09:05,540 --> 00:09:11,400 to have an error and that error is essentially the number of IDM is hasn't changed. 106 00:09:11,510 --> 00:09:17,360 So because of that I'm going to go ahead and see changed item count to a variable so it can actually 107 00:09:17,360 --> 00:09:26,480 change and in here when I delete one right before that I'm going to say let's add the one from or subtract 108 00:09:26,480 --> 00:09:32,490 one from item count in a real life situation a real application this would be an array items that you 109 00:09:32,490 --> 00:09:38,240 delete one of the items from the array and then you also delete the item from the collection view. 110 00:09:38,660 --> 00:09:43,520 So that's all I have to do in here I have to find the cell I have to delete it from the items of the 111 00:09:43,520 --> 00:09:51,430 collection of you and I have to respectively subtract the item from my item count or the array that's 112 00:09:51,440 --> 00:09:56,510 on the application and if it all works we should be able to see a little X on the top left corner of 113 00:09:56,540 --> 00:10:03,660 all of the cells any of them that the top one should get deleted and I kind of can't see heat but they 114 00:10:03,660 --> 00:10:05,250 chose a bad color for it. 115 00:10:05,250 --> 00:10:06,630 I apologize for that. 116 00:10:06,720 --> 00:10:08,670 Maybe yellow wasn't the really good idea. 117 00:10:08,670 --> 00:10:10,710 Maybe purple would be better. 118 00:10:10,980 --> 00:10:15,000 And if we run this one we should be able to see them more vividly. 119 00:10:15,090 --> 00:10:19,350 And then if you click on them we should be able to see them getting deleted. 120 00:10:19,380 --> 00:10:19,890 So here. 121 00:10:19,920 --> 00:10:22,670 When I tap on that it gets deleted. 122 00:10:22,890 --> 00:10:26,210 On the other one and the other one so on and so forth. 123 00:10:26,400 --> 00:10:30,180 And that is how you delete a cell in a collection of you. 124 00:10:30,180 --> 00:10:35,610 This is one of the many ways there are other ways such as when you customize you a collection of view 125 00:10:35,620 --> 00:10:38,460 cell and you take care of the deletion victim. 126 00:10:38,470 --> 00:10:45,090 This cell cell class actually you know encouraged you guys to try different ways depending on what you 127 00:10:45,090 --> 00:10:46,500 are trying to do as well. 128 00:10:46,740 --> 00:10:49,550 So let's keep it up to here and move on to our next lesson.