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