Everybody this is Caleb with Dev slopes and in this video we're going to get those images we downloaded
to show up in our collection view.
It's going to be super cool.
Let's get it working right now.
Pull open your code project and we're going to scroll down to our extension of you eye collection view
delegate and you at collection view datasource.
Now we need to think about what we need to change Here now number of sections is fine.
There's only one section but we need to think about the number of items in section.
Right now we're just returning 4.
But the issue is that we're we have 40 images that are downloaded.
So returning for is not a good option.
And what if for some weird reason maybe it only downloaded 38 if we forced it to return 38.
I mean if we forced it to return 40 then we would have a crash because we don't have enough photos it
would be out of range.
We want to return the number of items in an array because that can change 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 static number unless you know for 100
percent certain that it will always be that number.
So instead of returning 4 we're going to use our image array count.
So as soon as that is populated we're going to count the number of images and set that to be the amount
of items in every section.
Okay so that's pretty cool.
But now what we need to do is we need to set up our cell.
Right now our cell is just a blank photocell.
We used our custom subclass.
It's just a blank photocell there's nothing much to it.
We're going to add an image view so that we can load in an image to it.
So before we do that we should make sure that we can create a cell by using guard.
Guard let cell as photocell.
But then if there is not the ability to make whoopsies to make a photocell we're going to simply return
a collection view cell like so an empty one just like that.
Because this does call for an eye collection view cell and if this doesn't work then we should definitely
return an empty one so that the app does not crash.
So now using this cell we can basically create an image view and then add it as a sub view.
So let's go ahead and let's do that.
Let's type let image view equals UI image view and if you look here you can pass in a UI image that's
perfect.
That's what we want.
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
and we're going to pass in the image view.
So now our cell has an image view that's exactly what it needed.
Now you see there's an error here cannot force unwrap non-optional type photocell when we use guard
Latt we.
It's not optional.
It definitely has a value because either it is the cell right as a photocell Decoud from our collection
view or it's an empty collection view cell.
So it's not optional.
It just is.
Anyway so what good is an imagery without an image.
Not much good.
So we're going to create a nice little constant here called image from index and I'll explain the name
in just a second.
Go ahead and type let image from index equals and we're going to pull out an image from our image array.
So go ahead and find that.
Now the cool thing about you I collection view is that we have an index path and that means if I have
maybe the third cell if I find the third cell in my collection view it has an index path and that index
path has a row of three.
Right the third item would be an index path row of three.
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
path and I can pull out the row which you can see as of type int.
So if I wanted to get the image for the third cell I can find the third row and then pull out that image
and that is the image that I've saved think of cell for item an index path sort of like a for loop that
goes through and creates all of the cells for the collection view one by one.
So if we think about that first we're creating a cell we're going through so index path 0 remember we
started the index of 0.
So we pull out the item at 0.
Then we go into our image view.
We append image from index.
We add that to our sub view and return the cell so that that cell shows up with our image view.
Simple as that.
Really really cool.
And you know what.
There is something that we need to do though now that we have our cell working we have an image view
we are passing it an image from our image array.
We're adding it as a sub view and we're returning it.
But you know what we are never reloading our collection view so it doesn't matter how many images are
added.
The change will never be displayed unless we reload that collection view.
So let's do that.
We created a space for it up here once we have retrieved all of the images.
We removed the spinner.
We removed the progress label and now we can reload our collection view.
All right go ahead and we're going to call self collection view that reload data.
This is the function that's going to reload our collection view and show our images.
Do you want to try it.
I know I do.
So let's build and run just command our Or you can click the little triangle play button and it's going
to give me some trouble here.
Looks like I need to quit my simulator and rebuild it again.
It'll open.
One more time.
Here we go.
And we got to wait for it to boot but then we'll be able to see our awesome app and see it.
Downloading images and saving them to our collection do all right he Rigaud cool.
So let's go ahead and double click Let's watch to see what happens.
Should download and then by the time it hits 40 the label in spinach should hide and it should update
with cells full of all of the images that we downloaded from that location.
Let's see how it does.
All right.
Here we go ha.
Look at that.
Awesome.
So we have photos we have all the photos from that location we can't do anything with them yet but they're
showing up.
Ok cool.
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 a problem.
Watch what happens if I drop a new pin.
All those images are still there.
The spinner shows up the label shows up but all the images are still there.
So in order to fix this I think we need to go into where we drop our pin.
And I think that we should clear out the image array there and then reload the collection view right
as the animate view up happens so that we have a nice blank collection view.
So let's go let's go find droppin which we're already in dropped pin and you know what let's go ahead
and let's set image you l array to be equal to an empty array and an image array as well as image array
is going to be equal to an empty array.
Then we can go ahead and call collection view reload data.
So this will blank out our res reload the data animate the view up.
Now remember if there is no if it's the first pin that we drop these are already ok to be empty and
it's OK if we reload the data because it's pulling from the count of image array it'll show zero cells
because image array has zero items or elements.
So that's cool.
But you know what we are clearing these out in another place that we shouldn't be.
That's in our functions here.
Retrieve you or else should only retrieve you or else and retrieve images should only retrieve images
so remove both of those from the functions.
And that way we can do all of the reloading up here.
That's great.
So we reload it here we clear it out.
Then at the end once it's fall we reloaded again to show the changes.
All right.
So let's go ahead and build and run this application.
Let's go see how we did if we are properly clearing the arrays reloading the table view just like we
were hoping to double click here let's load some images.
I mean you know what.
While we're doing this let's change this from this hideous green color to white which makes a little
more sense.
Let's scroll up until we find it.
There it is.
Color literals.
Nice to see it's very easy to see.
I'm going to just change the collection view up background color to white because I think it just looks
a little more professional.
OK great.
So we have images.
But now let's see if I scroll down.
Whoops.
Swipe on this.
If I swipe down it clears.
OK let's drop another pin.
Cool and it clears out.
So there's not.
Images still.
That's great.
So that looks like that's working the way it's supposed to.
There's one other thing I'm wondering about if I drop a new pin.
Is it going to clear it out and start loading new images or is it going to still show these images.
Let's try it.
Cool.
So it clears it out.
That's because when we call droppin we clear them out and then we reload the data so whether we start
a new instance of this view swiping up or whether we drop a new pin it's going to clear it out and make
it look really really nice.
Awesome job guys.
In the next video what we're going to do is we're going to build pop Visi which is what we're going
to use when we select a cell to pop up the image to view it in full screen and then in the video following
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
then push again to pop up the whole pop.
You see it's going to be super super cool.
We are so close to being done guys.
I will see you in the next video.
Amazing work with this one.