1 00:00:08,040 --> 00:00:12,450 Everybody this is Caleb with devah slopes and in this video we're going to get those images we downloaded 2 00:00:12,450 --> 00:00:14,650 to show up in our collection view. 3 00:00:14,670 --> 00:00:16,140 It's going to be super cool. 4 00:00:16,140 --> 00:00:18,040 Let's get it working right now. 5 00:00:18,060 --> 00:00:24,000 Pull open your XCode project and we're going to scroll down to our extension of you eye collection view 6 00:00:24,000 --> 00:00:27,120 delegate and you collection view datasource. 7 00:00:27,120 --> 00:00:30,950 Now we need to think about what we need to change here. 8 00:00:31,100 --> 00:00:32,690 Now number of sections is fine. 9 00:00:32,790 --> 00:00:37,830 There's only one section but we need to think about the number of items in section. 10 00:00:37,860 --> 00:00:40,130 Right now we're just returning four. 11 00:00:40,390 --> 00:00:43,680 But the issue is that we're we have 40 images that are downloaded. 12 00:00:43,680 --> 00:00:46,830 So returning four is not a good option. 13 00:00:46,830 --> 00:00:52,850 And what if for some weird reason maybe it only downloaded thirty eight if we forced it to return 38. 14 00:00:52,860 --> 00:00:57,690 I mean if we forced it to return 40 then we would have a crash because we don't have enough photos. 15 00:00:57,680 --> 00:00:59,170 It would be out of range. 16 00:00:59,190 --> 00:01:02,790 We want to return the number of items in an array because that can change. 17 00:01:02,790 --> 00:01:10,170 That can be fluid in our app it can't but it's always best to use the count of an array instead of a 18 00:01:10,170 --> 00:01:14,990 static number unless you know for 100 percent certain that it will always be that number. 19 00:01:15,000 --> 00:01:22,170 So instead of returning 4 we're going to use our image array count. 20 00:01:22,230 --> 00:01:27,480 So as soon as that is populated we're going to count the number of images and set that to be the amount 21 00:01:27,480 --> 00:01:29,240 of items in every section. 22 00:01:29,420 --> 00:01:31,380 OK so that's pretty cool. 23 00:01:31,380 --> 00:01:35,010 But now what we need to do is we need to set up our cell. 24 00:01:35,010 --> 00:01:38,160 Right now our cell is just a blank photocell. 25 00:01:38,160 --> 00:01:40,030 We used our custom subclass. 26 00:01:40,140 --> 00:01:43,220 It's just a blank photocell there's nothing much to it. 27 00:01:43,230 --> 00:01:47,670 We're going to add an image view so that we can load in an image to it. 28 00:01:47,670 --> 00:01:53,930 So before we do that we should make sure that we can create a cell by using guard. 29 00:01:54,030 --> 00:01:57,760 Guard let sell as photocell. 30 00:01:57,900 --> 00:02:04,920 But then if there is not the ability to make whoopsies to make a photocell we're going to simply return 31 00:02:05,340 --> 00:02:09,500 a collection view cell like so an empty one just like that. 32 00:02:09,660 --> 00:02:14,370 Because this does call for and you have collection you sell and if this doesn't work then we should 33 00:02:14,370 --> 00:02:17,730 definitely return an empty one so that the app does not crash. 34 00:02:17,730 --> 00:02:25,200 So now using this cell we can basically create an image view and then add it as a sub view. 35 00:02:25,410 --> 00:02:27,510 So let's go ahead and let's do that. 36 00:02:27,510 --> 00:02:31,870 Let's type let image view equals you image view. 37 00:02:32,370 --> 00:02:36,460 And if you look here you can pass in a UI image that's perfect. 38 00:02:36,540 --> 00:02:38,040 That's what we want. 39 00:02:38,220 --> 00:02:45,810 And now in order to get this to show up on our cell we're going to go ahead and type cell add sub view 40 00:02:46,530 --> 00:02:48,260 and we're going to pass in the image view. 41 00:02:48,450 --> 00:02:52,340 So now our cell has an image view that's exactly what it needed. 42 00:02:52,350 --> 00:02:57,500 Now you see there's an error here cannot force unwrap non-optional type photocell when we use guard 43 00:02:57,520 --> 00:03:06,480 Latt we it's not optional it definitely has a value because either it is the cell right as a photocell 44 00:03:06,930 --> 00:03:11,460 Decoud from our collection view or it's an empty collection view cell. 45 00:03:11,460 --> 00:03:12,920 So it's not optional. 46 00:03:13,140 --> 00:03:14,420 It just is. 47 00:03:14,640 --> 00:03:18,600 Anyway so what good is an imagery without an image. 48 00:03:18,600 --> 00:03:19,480 Not much good. 49 00:03:19,500 --> 00:03:24,270 So we're going to create a nice little constant here called image from index and I'll explain the name 50 00:03:24,270 --> 00:03:25,170 in just a second. 51 00:03:25,170 --> 00:03:30,510 Go ahead and type let image from index equals. 52 00:03:30,960 --> 00:03:34,730 And we're going to pull out an image from our image array. 53 00:03:35,010 --> 00:03:36,580 So go ahead and find that. 54 00:03:36,660 --> 00:03:41,880 Now the cool thing about eye collection view is that we have an index path and that means if I have 55 00:03:41,880 --> 00:03:49,260 maybe the third cell if I find the third cell in my collection view it has an index path and that index 56 00:03:49,260 --> 00:03:50,790 path has a row of three. 57 00:03:50,820 --> 00:03:51,030 Right. 58 00:03:51,030 --> 00:03:54,120 The third item would be an index path row of three. 59 00:03:54,210 --> 00:04:01,800 And so what I can do is if I want to create a cell here I can take the index like so I can get the index 60 00:04:01,800 --> 00:04:06,990 path and I can pull out the row which you can see is of type int. 61 00:04:07,050 --> 00:04:14,370 So if I wanted to get the image for the third cell I can find the third row and then pull out that image 62 00:04:14,940 --> 00:04:20,400 and that is the image that I've saved think of cell for item and index path sort of like a for loop 63 00:04:20,430 --> 00:04:26,480 that goes through and creates all of the cells for the collection view one by one. 64 00:04:26,490 --> 00:04:29,130 So if we think about that first we're creating a cell. 65 00:04:29,140 --> 00:04:31,590 We're going through so index path 0. 66 00:04:31,590 --> 00:04:33,560 Remember we started the index of 0. 67 00:04:33,570 --> 00:04:36,580 So we pull out the item at 0. 68 00:04:36,720 --> 00:04:41,250 Then we go into our image view we append image from index. 69 00:04:41,310 --> 00:04:46,200 We add that to our subcu and we return the cell so that that cell shows up with our image view. 70 00:04:46,200 --> 00:04:46,830 Simple as that. 71 00:04:46,830 --> 00:04:48,060 Really really cool. 72 00:04:48,390 --> 00:04:49,570 And you know what. 73 00:04:49,740 --> 00:04:54,030 There is something that we need to do though now that we have our cell working we have an image view 74 00:04:54,030 --> 00:04:57,100 we are passing it an image from our image array. 75 00:04:57,360 --> 00:05:00,540 We're adding It is a sub view and we're returning it. 76 00:05:00,540 --> 00:05:05,790 But you know what we are never reloading our collection view so it doesn't matter how many images are 77 00:05:05,850 --> 00:05:11,200 added the change will never be displayed unless we reload that collection view. 78 00:05:11,230 --> 00:05:12,930 So let's do that. 79 00:05:13,240 --> 00:05:17,620 We created a space for it up here once we have retrieved all of the images. 80 00:05:17,620 --> 00:05:18,870 We removed the spinner. 81 00:05:19,060 --> 00:05:23,550 We removed the progress label and now we can reload our collection view. 82 00:05:23,590 --> 00:05:31,570 All right go ahead and we're going to call self collection view reload data. 83 00:05:31,570 --> 00:05:35,730 This is the function that is going to reload our collection view and show our images. 84 00:05:35,770 --> 00:05:36,860 Do you want to try it. 85 00:05:36,880 --> 00:05:37,960 I know I do. 86 00:05:37,990 --> 00:05:40,650 So let's build and run just command. 87 00:05:40,660 --> 00:05:45,510 Or you can click the little triangle play button and it's going to give me some trouble here. 88 00:05:45,580 --> 00:05:49,870 Looks like I need to quit my simulator and rebuild it again. 89 00:05:49,930 --> 00:05:50,870 It'll open. 90 00:05:50,890 --> 00:05:52,730 One more time. 91 00:05:52,750 --> 00:05:54,100 Here we go. 92 00:05:54,130 --> 00:05:59,140 And we've got to wait for it to boot but then we'll be able to see our awesome map and see it downloading 93 00:05:59,140 --> 00:06:03,420 images and saving them to our collection view. 94 00:06:03,430 --> 00:06:03,690 All right. 95 00:06:03,700 --> 00:06:06,310 He Rigaud cool. 96 00:06:06,320 --> 00:06:11,510 So let's go ahead and double click Let's watch to see what happens. 97 00:06:12,610 --> 00:06:17,620 Should download and then by the time it hits 40 the label in spinach should hide and it should update 98 00:06:17,620 --> 00:06:21,910 with cells full of all of the images that we downloaded from that location. 99 00:06:21,940 --> 00:06:24,890 Let's see how it does. 100 00:06:24,920 --> 00:06:25,160 All right. 101 00:06:25,160 --> 00:06:26,240 Here we go ha. 102 00:06:26,240 --> 00:06:26,700 Look at that. 103 00:06:26,720 --> 00:06:28,470 Awesome so we have photos. 104 00:06:28,610 --> 00:06:33,120 We have all the photos from that location we can't do anything with them yet but they're showing up. 105 00:06:33,380 --> 00:06:33,900 OK cool. 106 00:06:33,900 --> 00:06:38,540 So let's go ahead and swipe down to get rid of that and I want to show you something that's a bit of 107 00:06:38,540 --> 00:06:39,460 a problem. 108 00:06:39,470 --> 00:06:41,640 Watch what happens if I drop a new pin. 109 00:06:42,050 --> 00:06:43,870 All those images are still there. 110 00:06:43,970 --> 00:06:48,350 The spinner shows up the label shows up but all the images are still there. 111 00:06:48,350 --> 00:06:52,870 So in order to fix this I think we need to go into where we drop our pin. 112 00:06:53,090 --> 00:06:58,130 And I think that we should clear out the image array there and then reload the collection view right 113 00:06:58,130 --> 00:07:02,790 as the animate view up happens so that we have a nice blank collection view. 114 00:07:02,810 --> 00:07:10,130 So let's go let's go find droppin which we're already in drop pin and you know what let's go ahead and 115 00:07:10,130 --> 00:07:19,130 let's set image you Arel array to be equal to an empty array and an image array as well as image array 116 00:07:19,880 --> 00:07:22,280 is going to be equal to an empty array. 117 00:07:22,370 --> 00:07:25,770 Then we can go ahead and call collection view related data. 118 00:07:26,000 --> 00:07:30,760 So this will blank out our res reload the data animate the view up. 119 00:07:30,770 --> 00:07:38,870 Now remember if there is no if it's the first pin that we drop these are already ok to be empty and 120 00:07:38,900 --> 00:07:44,480 it's OK if we reload the data because it's pulling from the count of image array it will show zero cells 121 00:07:44,510 --> 00:07:49,440 because image array has zero items or elements so that's cool. 122 00:07:49,460 --> 00:07:55,670 But you know what we are clearing these out in another place that we shouldn't be that's in our functions 123 00:07:55,670 --> 00:08:02,240 here retrieve you or else should only retrieve you or else and retrieve images should only retrieve 124 00:08:02,240 --> 00:08:04,950 images so remove both of those from the functions. 125 00:08:05,060 --> 00:08:07,840 And that way we can do all of the reloading up here. 126 00:08:07,850 --> 00:08:08,830 That's great. 127 00:08:08,840 --> 00:08:11,260 So we reload it here we clear it out. 128 00:08:11,330 --> 00:08:14,450 Then at the end once it's full we reloaded again to show the changes. 129 00:08:14,450 --> 00:08:14,720 All right. 130 00:08:14,720 --> 00:08:17,840 So let's go ahead and build and run this application. 131 00:08:17,840 --> 00:08:24,860 Let's go see how we did if we are properly clearing the arrays reloading the table view just like we 132 00:08:24,860 --> 00:08:30,260 were hoping to double click here let's load some images on you know what while we're doing this let's 133 00:08:30,260 --> 00:08:35,860 change this from this hideous green color to white which makes a little more sense. 134 00:08:35,870 --> 00:08:37,490 Let's scroll up until we find it. 135 00:08:37,490 --> 00:08:38,360 There it is. 136 00:08:38,360 --> 00:08:39,330 Color literals. 137 00:08:39,350 --> 00:08:41,800 Nice to see it's very easy to see. 138 00:08:41,840 --> 00:08:45,740 I'm going to just change the collection of background color to white because I think it just looks a 139 00:08:45,740 --> 00:08:46,870 little more professional. 140 00:08:47,030 --> 00:08:47,510 Okay great. 141 00:08:47,510 --> 00:08:48,920 So we have images. 142 00:08:49,040 --> 00:08:51,780 But now let's see if I scroll down. 143 00:08:51,850 --> 00:08:53,430 It's a swipe on this. 144 00:08:53,680 --> 00:08:55,790 If I swipe down it clears. 145 00:08:56,060 --> 00:08:58,310 OK let's drop another pin. 146 00:08:58,310 --> 00:08:59,500 Cool and it clears out. 147 00:08:59,510 --> 00:09:00,020 So there's not. 148 00:09:00,020 --> 00:09:02,010 Image images still. 149 00:09:02,300 --> 00:09:03,080 That's great. 150 00:09:03,080 --> 00:09:05,750 So that looks like that's working the way it's supposed to. 151 00:09:05,750 --> 00:09:13,730 There's one other thing I'm wondering about if I drop a new pin is it going to clear it out and start 152 00:09:13,730 --> 00:09:16,310 loading new images or is it going to still show these images. 153 00:09:16,310 --> 00:09:18,170 Let's try it. 154 00:09:18,170 --> 00:09:18,640 Cool. 155 00:09:18,650 --> 00:09:19,730 So it clears it out. 156 00:09:19,760 --> 00:09:26,870 That's because when we call drop when we clear them out and then we reload the data so whether we start 157 00:09:26,900 --> 00:09:32,120 a new instance of this view swiping up or whether we drop a new pin it's going to clear it out and make 158 00:09:32,120 --> 00:09:34,300 it look really really nice. 159 00:09:34,460 --> 00:09:35,420 Awesome job guys. 160 00:09:35,450 --> 00:09:40,400 In the next video what we're going to do is we're going to build pop AVC which is what we're going to 161 00:09:40,400 --> 00:09:46,160 use when we select a cell to pop up the image to view it in full screen and then in the video following 162 00:09:46,160 --> 00:09:52,250 that we're going to add 3-D touch Pekan pop so you can use 3-D touch on these cells to pop them up and 163 00:09:52,250 --> 00:09:54,270 then push again to pop up the whole pot. 164 00:09:54,280 --> 00:09:56,250 You see it's going to be super super cool. 165 00:09:56,270 --> 00:09:58,420 We are so close to being done guys. 166 00:09:58,460 --> 00:10:00,170 I will see you in the next video. 167 00:10:00,170 --> 00:10:01,400 Amazing work with this one.