1 00:00:00,180 --> 00:00:01,130 Welcome back again. 2 00:00:01,140 --> 00:00:05,650 In this lesson we'll talk about drag and drop between collection views. 3 00:00:05,730 --> 00:00:12,590 It's unfortunately a bit of a longer court sided and quite easier to try and get it done in in one setting. 4 00:00:12,600 --> 00:00:19,020 So let's going to school and here I'm going to start a new application single view application drag 5 00:00:19,710 --> 00:00:22,560 and drop in collections. 6 00:00:22,560 --> 00:00:28,620 And this time unlike the last few times that I've been using a UI collection view controller I'm actually 7 00:00:28,620 --> 00:00:31,360 going to use a UI collection view. 8 00:00:31,410 --> 00:00:38,580 So to do that I'm going to go ahead in here and say I have an outlet saw a b outlet and that's going 9 00:00:38,580 --> 00:00:42,690 to be a value event called my collection view. 10 00:00:42,690 --> 00:00:45,690 She's off the type UI collection view. 11 00:00:45,900 --> 00:00:48,900 So that's the thing that we usually do with the that I gander up. 12 00:00:49,020 --> 00:00:53,340 Sometimes they prefer to just type with myself when I go for storyboard. 13 00:00:53,340 --> 00:00:58,520 And in here I'm going to go ahead and add a collection view which is here. 14 00:00:58,870 --> 00:01:05,750 So that's my collection view and I'm going to go ahead and say it's actually placed somewhere like this. 15 00:01:05,830 --> 00:01:10,390 I'm going to add all the missing constraints and this one cell in here. 16 00:01:10,560 --> 00:01:13,550 I'm going to call it to be a cell. 17 00:01:13,630 --> 00:01:16,370 I just like the last few times. 18 00:01:16,380 --> 00:01:19,640 I'm only going to worry about changing the color of a cell. 19 00:01:19,650 --> 00:01:26,040 I'm not going to make an actual cell in here because that would just exponentially make our code longer. 20 00:01:26,040 --> 00:01:27,360 I don't really want to do that. 21 00:01:27,840 --> 00:01:33,900 So the next thing is I'm going to connect my connection view that this is my collection view and then 22 00:01:33,900 --> 00:01:40,650 I'm going to go ahead and say in here my collection view with view controller it is the data source 23 00:01:41,490 --> 00:01:45,220 and then it is also the delegate. 24 00:01:45,560 --> 00:01:47,910 And I'm actually going to add two more things. 25 00:01:47,980 --> 00:01:54,960 One of them is Dragon delegate and the other one is a drop delegate as you can imagine you can do all 26 00:01:54,960 --> 00:01:57,660 of these things in coding as well. 27 00:01:57,690 --> 00:02:02,280 Well that's right they're doing it in here because going to simplify my code than the amount of code 28 00:02:02,280 --> 00:02:04,840 that they have to be I have to be writing. 29 00:02:05,010 --> 00:02:09,620 We then have to keep something in mind when I select my collection of you. 30 00:02:09,810 --> 00:02:13,330 Here it says user interaction is enable. 31 00:02:13,350 --> 00:02:18,870 But that doesn't mean the drag interaction is also enabled and that's something that you have to do 32 00:02:18,870 --> 00:02:19,500 manually. 33 00:02:19,500 --> 00:02:24,330 So I'm going to head into the court in my view controller interview that Lord I'm going to go ahead 34 00:02:24,330 --> 00:02:32,880 and say self dogs my collection view DOD drag interaction enable the true and keep in mind that this 35 00:02:32,880 --> 00:02:40,020 value is by default true when you're working in an AI pad and false when you're working on a phone which 36 00:02:40,020 --> 00:02:42,140 is described in the application. 37 00:02:42,240 --> 00:02:45,620 So that's why I had to essentially manually fix that. 38 00:02:45,720 --> 00:02:47,650 Now there are a few things we still have to do. 39 00:02:47,650 --> 00:02:52,450 For a view controller class we have to conform to obviously you a view controller. 40 00:02:52,470 --> 00:02:58,360 You also have to get the UI collection view delegate collection view delegate. 41 00:02:58,850 --> 00:03:07,320 You also need to get the UI collection view drag delicate UI collection view drag delegate and the UI 42 00:03:07,350 --> 00:03:09,270 collection view drop delegate. 43 00:03:09,660 --> 00:03:17,190 So a lot of methods that we have to implement from a variety of these different are essentially delegations. 44 00:03:17,190 --> 00:03:22,970 Now I'm actually going to write them down so we get a sense of what we have to be doing because there's 45 00:03:22,980 --> 00:03:26,160 a few of these and we have to know what we have to do with them. 46 00:03:26,490 --> 00:03:33,930 So these are the essentially the five pieces that we need someone to say they favor these the two of 47 00:03:33,930 --> 00:03:35,690 them are the ones that we have been doing. 48 00:03:35,700 --> 00:03:42,140 Number of items and then sell for them after all. 49 00:03:42,240 --> 00:03:48,450 These two are essentially parts of the UI collection view data source which I have forgotten for you 50 00:03:48,450 --> 00:03:54,850 eye collection view data collection view data source. 51 00:03:54,900 --> 00:03:59,990 So these two are from the UI collection view a data source that we have done many many times before. 52 00:04:00,150 --> 00:04:08,820 We then have to implement three other guys and those are for drag and drop those large items for beginning 53 00:04:09,160 --> 00:04:10,060 drag. 54 00:04:10,500 --> 00:04:18,920 So which item we are dragging right at the very beginning and then updating the drop session at the 55 00:04:18,930 --> 00:04:19,610 drop. 56 00:04:19,640 --> 00:04:27,960 So the moment you drop what you're going to do and then performing drop so should it drop. 57 00:04:27,960 --> 00:04:33,030 Is it on top of the right index part and so on and so for there's so many things that we have to do 58 00:04:33,060 --> 00:04:33,840 in here. 59 00:04:33,840 --> 00:04:39,480 So let's get this started the easier one I'm going to say I have a value over I'm going to call. 60 00:04:39,570 --> 00:04:42,250 I'd them count just like the last time. 61 00:04:42,330 --> 00:04:44,410 So we know how many items you're going to have. 62 00:04:44,430 --> 00:04:53,100 And I'm going to say number of items in section and we get rid of that so I can format things better. 63 00:04:53,320 --> 00:04:57,600 There's going to be a return whatever we have in the item count. 64 00:04:58,050 --> 00:05:03,910 So one is down easier one obviously the next one is sell for IDM. 65 00:05:03,940 --> 00:05:13,310 I think next math something a game we have done multiple times so let's sell to be collection view dot 66 00:05:13,520 --> 00:05:17,150 D Q reusing sell a D. 67 00:05:17,690 --> 00:05:20,050 And for index card that is index card. 68 00:05:20,490 --> 00:05:27,430 And I'm going to say return cell between these two I'm just gonna change the color so I'm going to say. 69 00:05:27,520 --> 00:05:28,120 Bygones. 70 00:05:28,160 --> 00:05:44,570 Color is you eye color dot red and if index part the raw modulus 2 is 0 then say sell background color 71 00:05:44,660 --> 00:05:48,470 is your eye color dot blue. 72 00:05:48,870 --> 00:05:56,180 So so far we should have a collection view of it at least 10 items that they are alternating between 73 00:05:56,180 --> 00:05:58,170 colors of red and blue. 74 00:05:58,220 --> 00:06:01,100 So another method is down as well. 75 00:06:01,130 --> 00:06:04,130 Now we have to talk about these three methods. 76 00:06:04,130 --> 00:06:06,130 So I'm going to add all three of them. 77 00:06:06,230 --> 00:06:12,820 One of them is items for beginning items for beginning to adopt one. 78 00:06:12,830 --> 00:06:16,820 We have a thing here and began to talk about what we have to have for it. 79 00:06:16,820 --> 00:06:26,010 I'm going to say for now return nil because it essentially needs a an array of new either items for 80 00:06:26,100 --> 00:06:30,320 members it just returned nothing because we don't know how this is going to work. 81 00:06:30,450 --> 00:06:33,840 The next thing is updating the drop session. 82 00:06:33,860 --> 00:06:40,590 So I'm going to say drop their obsession did the update. 83 00:06:40,600 --> 00:06:43,430 If I'm not drawing did update. 84 00:06:43,770 --> 00:06:45,380 So the obsession did update. 85 00:06:45,380 --> 00:06:48,830 So this the next method that we have to implement at some point. 86 00:06:48,830 --> 00:06:52,360 So this one we can't return and nil the value for it. 87 00:06:52,370 --> 00:06:58,950 We actually have to return a UI collection view drop proposal and let me explain to you what that is. 88 00:06:59,060 --> 00:07:07,590 Let's say my proposal is essentially what you are expecting to happen once the drop is done. 89 00:07:07,620 --> 00:07:17,210 So when I say is going to be a UI collection view drop proposal analysts build one of these and then 90 00:07:17,210 --> 00:07:23,270 what I want to build is this I'm going to go ahead and say I have two things and I have a drop operation 91 00:07:23,360 --> 00:07:28,020 and I also have an intent for what I'm expecting to happen. 92 00:07:28,040 --> 00:07:34,520 The operation that they want to do is let's go ahead and see the operations is actually moving because 93 00:07:34,550 --> 00:07:36,110 I wanted to write and draw up. 94 00:07:36,110 --> 00:07:37,930 I don't want to copy one. 95 00:07:37,940 --> 00:07:42,970 I want to move one from one place to the other one so the operation type is move. 96 00:07:43,000 --> 00:07:45,400 Now let's go ahead and talk about intent. 97 00:07:45,410 --> 00:07:47,470 What do we expect to see. 98 00:07:47,470 --> 00:07:48,960 Vendor intent happens. 99 00:07:48,980 --> 00:07:53,560 So the intent on letting go ahead and say there are few things in here. 100 00:07:53,570 --> 00:08:00,710 The most notable one is insert at destination X point or insert into a destination the X1 and I'm going 101 00:08:00,710 --> 00:08:07,180 to go ahead and say I want to do an inset at destination and x part and remember the destination the 102 00:08:07,220 --> 00:08:14,100 Smart is actually already built into this function it knows where you are trying to drop. 103 00:08:14,120 --> 00:08:17,930 So when did I get that obsession begins which is in here. 104 00:08:17,930 --> 00:08:24,560 We pick up some items for drag and drop and as we are going along and we drop them somewhere at the 105 00:08:24,560 --> 00:08:28,490 drop point we have to decide what do we want to happen in there. 106 00:08:28,700 --> 00:08:30,370 So this is a proposal. 107 00:08:30,380 --> 00:08:37,130 This is a very he's going to drop it doesn't mean he's going to drop that it just means that it feels 108 00:08:37,130 --> 00:08:39,200 like this is where it should be. 109 00:08:39,200 --> 00:08:40,430 Do you want to do it or not. 110 00:08:40,430 --> 00:08:42,890 And that's something we still have to decide about it. 111 00:08:43,070 --> 00:08:44,910 We do either have to return this. 112 00:08:44,920 --> 00:08:47,930 I'm going to say return my proposal. 113 00:08:47,930 --> 00:08:52,180 Because he's expecting a huge collection of you drop proposal somewhere. 114 00:08:52,190 --> 00:08:55,590 Return that value and say here's what I'm trying to do. 115 00:08:55,970 --> 00:08:57,680 So one more is done. 116 00:08:57,680 --> 00:08:59,390 So these two are taken care of. 117 00:08:59,390 --> 00:09:05,520 And finally the important one is this one doing the actual drop performance. 118 00:09:05,540 --> 00:09:08,790 What do you want to happen when we actually do did it. 119 00:09:08,870 --> 00:09:18,290 So I'm going to go ahead and say perform drop so that is that and this fund doesn't have to have any 120 00:09:18,290 --> 00:09:19,210 written values. 121 00:09:19,220 --> 00:09:22,670 It just has to be there so they can actually test the application. 122 00:09:22,670 --> 00:09:29,500 Now I know that everything is working so far because I kind of like to be able to draw on my apps once 123 00:09:29,510 --> 00:09:31,870 130 is like ten minutes or so. 124 00:09:31,880 --> 00:09:33,740 So let's run the application. 125 00:09:33,740 --> 00:09:40,290 So now that the simulator is up I can see my items but a chance to need drag or drag and drop just yet. 126 00:09:40,310 --> 00:09:42,680 Even I try to hold the button in here. 127 00:09:42,710 --> 00:09:48,710 It doesn't really do anything simply because the value that we have in here either returns nil the correction 128 00:09:48,740 --> 00:09:50,740 you drag and drop doesn't really know. 129 00:09:50,810 --> 00:09:53,070 Shy them to begin that oxygen. 130 00:09:53,330 --> 00:09:55,320 So that's the next thing we have to do. 131 00:09:55,340 --> 00:10:01,520 So we now have to make an array of you drag items and since you only have one of them let's go ahead 132 00:10:01,520 --> 00:10:02,920 and make just one. 133 00:10:02,920 --> 00:10:10,940 So I'm going to say let's drag IDM to be a new drag item and the usually drag items have to be built 134 00:10:10,970 --> 00:10:18,890 based on IDM providers and then provide there's essentially a way of conveying what kind of data has 135 00:10:18,890 --> 00:10:22,790 to be going with the object you're dragging or dropping. 136 00:10:22,790 --> 00:10:29,810 So before I could use a drink item I'm going to go ahead and say let my IDM provider. 137 00:10:29,840 --> 00:10:36,080 And that's going to become an endless IDM provider and then as IDM provider you can make it with any 138 00:10:36,080 --> 00:10:41,280 kind of object that conforms to NSA IDM provide their writing. 139 00:10:41,330 --> 00:10:46,400 These are NSA strings and as they say they are things such as UI images. 140 00:10:46,460 --> 00:10:48,000 So on and so forth. 141 00:10:48,020 --> 00:10:54,410 Now for now the data that they want to send it doesn't exist simply because I don't have an array of 142 00:10:54,440 --> 00:10:54,980 objects. 143 00:10:54,980 --> 00:10:59,060 I only have an item count and I'm somewhere in the index spot. 144 00:10:59,090 --> 00:11:03,590 So for instance here if you're the index tool that is there the are. 145 00:11:03,590 --> 00:11:05,660 So that's the item I want to move. 146 00:11:05,690 --> 00:11:11,450 So I'm going to go ahead and say let item to be index part doctoral. 147 00:11:11,480 --> 00:11:17,150 Now if this was an application that you actually had an array of objects then you had to get your item 148 00:11:17,150 --> 00:11:18,830 from that array. 149 00:11:18,830 --> 00:11:20,230 So keep that in mind. 150 00:11:20,300 --> 00:11:26,900 Now since we can make NSA then providers from things such as NSA stings I'm going to convert my IDM 151 00:11:26,960 --> 00:11:34,940 into one NSA string I'm going to say I have the IDM as NSA string and then that is going to become my 152 00:11:35,070 --> 00:11:41,250 then provide that are my item provider becomes the IDM provider for my drag IDM. 153 00:11:41,300 --> 00:11:47,780 And finally I'm going to say my dad I gave them DOD no con object which could be any kind of object 154 00:11:47,840 --> 00:11:50,120 becomes the item itself. 155 00:11:50,210 --> 00:11:56,210 And of course we are returning that drag item routine are our rate of return. 156 00:11:56,210 --> 00:12:01,810 Now if you're on the application by now we should be able to see the drag report happening. 157 00:12:01,820 --> 00:12:06,740 We should be able to drag an object even though we still can't drop it anywhere. 158 00:12:06,770 --> 00:12:12,500 So if I type in yet I can actually drag things and I can come in here and I try to up but nothing happens 159 00:12:12,500 --> 00:12:19,730 simply because they're performed drop is not happening even though we know the a proposal we know where 160 00:12:19,730 --> 00:12:25,920 we are trying to drop at the update of the drop but we don't know what should happen in the performance 161 00:12:26,080 --> 00:12:26,670 drop. 162 00:12:26,690 --> 00:12:29,630 So that's the next thing that I'm going to be working on. 163 00:12:29,630 --> 00:12:35,610 So theoretically this object is the one that knows everything about your drop operation. 164 00:12:35,690 --> 00:12:41,270 So I'm going to go ahead in here and say let index path and I'm going to make my index path to become 165 00:12:41,630 --> 00:12:45,460 coordinator DOD destination index. 166 00:12:45,800 --> 00:12:50,730 So that's the next part that we're trying to go to the set destination 1. 167 00:12:50,750 --> 00:12:52,930 Now I would also like to make a suggestion. 168 00:12:52,940 --> 00:13:00,920 I'm gonna say if left in the expand is that thing because simply you might have a situation where your 169 00:13:00,920 --> 00:13:06,080 user is dropping your cell at the place that doesn't exist. 170 00:13:06,080 --> 00:13:06,460 It is. 171 00:13:06,460 --> 00:13:10,310 There is no destination in path in that situation. 172 00:13:10,310 --> 00:13:16,580 If you use a drag something and drops it somewhere outside the collection view there is no index spot 173 00:13:16,580 --> 00:13:16,790 there. 174 00:13:16,790 --> 00:13:19,780 So you want to make sure that there is an index map. 175 00:13:19,940 --> 00:13:27,730 And if that thing was happening let's go ahead and say let the items is the coordinator or the need 176 00:13:27,730 --> 00:13:29,510 for those items. 177 00:13:29,510 --> 00:13:32,580 So we get all the items that haven't been dropped. 178 00:13:32,630 --> 00:13:40,580 Once I got the items I'm going to go ahead and see if I Dems that count is the one even though I know 179 00:13:40,580 --> 00:13:43,300 it is one because we only drag one. 180 00:13:43,330 --> 00:13:49,810 But I'm going to make a check for it in the NSA if there's only one thing go ahead and say let's I IDM 181 00:13:49,820 --> 00:13:53,480 it to be a Dems dot first. 182 00:13:53,480 --> 00:14:00,470 So let's get that very first one and then find out the various its source index spot some less a source 183 00:14:01,160 --> 00:14:06,500 index but I'm going to go ahead and say that is IDM dot source index. 184 00:14:06,830 --> 00:14:13,310 So we find the index part which is our destination index fund where we are trying to drop we find the 185 00:14:13,960 --> 00:14:20,580 we are trying to drop up and from those we find only one of them and that one we forget our date is 186 00:14:20,580 --> 00:14:21,850 coming from. 187 00:14:21,870 --> 00:14:24,600 So now we have all the information we need. 188 00:14:24,840 --> 00:14:32,670 So I'm going to go ahead and say since we have all of these do this say collection view dog perform 189 00:14:33,330 --> 00:14:37,900 batch updates and as you're trying to perform the batch updates. 190 00:14:37,900 --> 00:14:43,190 If you don't have to do anything at its completion so you can essentially drop the completion parts 191 00:14:43,190 --> 00:14:44,150 say nil. 192 00:14:44,550 --> 00:14:49,640 But for the update itself let's go ahead and do all of these things now. 193 00:14:49,670 --> 00:14:56,820 The things that you want to be doing are these if you have an array if you have an array you have to 194 00:14:56,820 --> 00:14:57,970 update that. 195 00:14:58,080 --> 00:15:04,290 That's just like what you would do if you were deleting a set or if you were rearranging objects in 196 00:15:04,290 --> 00:15:05,360 a table view. 197 00:15:05,370 --> 00:15:12,420 So if you're moving an item between the cells of a collection of you you obviously have to update that 198 00:15:12,480 --> 00:15:14,970 array to reflect these new changes. 199 00:15:14,970 --> 00:15:21,890 You have to see my array but remove the objects of source index Mark and then insert objects at the. 200 00:15:21,960 --> 00:15:25,140 In this case the destination expert which is the index fund. 201 00:15:25,170 --> 00:15:36,020 Now once that is done I'm going to go ahead and say collection view do a delete item at source in the 202 00:15:36,110 --> 00:15:43,010 spot so we won't delete that one which is an error rate because that expects an a rate delete a Dems. 203 00:15:43,270 --> 00:15:48,570 And since it is an optional value I'm going to have to force unwrap it now that they got the delete 204 00:15:48,570 --> 00:15:49,650 part taken care of. 205 00:15:49,650 --> 00:15:51,540 I have to insert a new one. 206 00:15:51,630 --> 00:15:59,610 I'm going to say collection view dot insert items and I'm going to insert at index back because that's 207 00:15:59,610 --> 00:16:01,420 my destination index. 208 00:16:01,860 --> 00:16:08,950 I'm going to say insert items at index but once this entire process is done lost our founding index 209 00:16:08,950 --> 00:16:15,600 by the item the source index bad and we have performed all the updates both on our collection view as 210 00:16:15,600 --> 00:16:22,360 well as our arrays we can go ahead and safely drop the objects so they could go ahead and say co-ordinator 211 00:16:22,710 --> 00:16:29,700 dot to drop and I want to drop them the UI that I got them to the index path so I'm going to go ahead 212 00:16:29,700 --> 00:16:40,380 and say the object you have been dragging which happens to be a Dems dot first dot dot I IDM and that 213 00:16:40,380 --> 00:16:46,570 first has to be none optional obviously and then it says well you want to drop it I won't drop it at 214 00:16:46,600 --> 00:16:47,510 the index spot. 215 00:16:47,910 --> 00:16:55,770 So by now it finds out what are you trying to do updates every one and let's go of the object as being 216 00:16:55,800 --> 00:17:01,950 drag which is this what it drops this from the application and if it all works well we should be able 217 00:17:01,950 --> 00:17:06,620 to see that we can pick an object drag it drop it somewhere. 218 00:17:06,810 --> 00:17:13,020 So now when I run the application I can actually go ahead and drag and drop objects and they perform 219 00:17:13,020 --> 00:17:15,570 exactly the way we were hoping they would do. 220 00:17:15,570 --> 00:17:21,640 Now keep in mind that this was a very basic drag and drop there's a lot more yet you have to do for 221 00:17:21,640 --> 00:17:27,990 a real life application specifically because you will have real objects instead of a adjust they're 222 00:17:27,990 --> 00:17:34,680 valuable that counts numbers you would have objects and you would have classes and then those if you 223 00:17:34,680 --> 00:17:41,550 have an implication on how you do your item provided in here and what item you sent as your drag object 224 00:17:41,850 --> 00:17:48,330 but everything else should work similarly in terms of finding your proposal the correct destination 225 00:17:48,360 --> 00:17:55,080 in the expired as well as doing the update this after you have right now should give you the the bones 226 00:17:55,080 --> 00:18:01,110 for developing pretty much any kind of dry gander up after this you have an assignment which is about 227 00:18:01,140 --> 00:18:07,560 dragging and dropping between different collection views so let's move on into that one.