Come back again in this lesson we'll work on Customs says in collection views.
And even though they are very similar to the ones in table views I wanted to show you this because true
all at this process I want to show you some other features of collection of yours as well.
This time I won't be using a controller.
I will be using a view itself.
So let's go into X scope.
And here I'm going to start a new application.
I'm going to call it.
Customs says in that cell Lilly's says in collection views and in here I'm going to head into my a storyboard.
Unlike the last time that we deleted the view contorted to be made a collection view.
This time I'm not going to do any of those things.
I'm just gonna go in here and say I want a collection view.
I'm going to add a new collection view just like how when we were adding a table views to view controllers.
And yet when I place it somewhere and you probably want to set the constraints for it as well.
I'm going to say at the missing constraints I'm going to make my bank on The View to be maybe a light
gray so I can actually see the collection view more vividly.
So this is my creation now.
Now since I have it like that I have to make an outlet for it.
So I'm going to go into my assistant window and in here I'm going to go ahead and say This is my collection
view.
So that part is taking care of.
And the next thing that I wanted to do I wanted to have a custom class for this cell.
So to do that then they come back in here and say I have a new file this new fight is going to be after
type EU I collection view cell on what I call it my collection view is set
so none of you have that flight I'm going to go ahead back into my storyboard and say this cell is actually
using my collection you sell my collection of your cell as its class and now they're connected to each
other so I can head into the assistant window load the right file which is going to be this one and
say this cell is now going to have its different outlets introduced in here just like how we have done
it in a table view.
So for instance what I want to have is this I want to have an image of you V in my collection of your
cell.
So right in here I'm going to place it to be right on ten ten ten on ten.
So somebody in the middle Exactly and I'm going to say this is going to be my I am G view.
So it's the image view of the collection view settled and now that's taken care of.
And the last thing I want to do is I want to see my collection.
You send as an identifier identifier is cell I.D. so that part is taken care of.
Let's head back into our view controller where we have to do a lot of things now.
And the first thing we have to do is our view controller is conforming to you a view controller but
you also need to conform to UI collection view delegate as well as the UI collection view collection
view data source because now this view controller is both the delegation and the data source for my
collection view which is this one.
So let's go in here and say we need to add the tool methods in here.
One of those methods is going to be the cell for item at source center for IDM art.
So that's one of them the important one.
And then the other one is going to be number of items number of items in the section.
Of course we could use the other delegation and data source methods but these two are the ones we absolutely
need them.
And for this I'm going to go ahead and say the number of items on the number of the and the content
of it has to be informed this time not by a static number rather by an actual array of images.
So I have an array of images that you can use or you could just had your own array of images.
There are six images in here.
I'm going to add them all in here.
So I have six images and I want to copy all of their names going here into the top of my view controller
essentially I'm put all of them inside an array so I'm going to say let images array to be all of these
guys and we help obviously close them properly.
So they are known to be a string values of that and then this and then that and then that and then that.
So I have an array with six images in it and I'm going to format it properly and then I'm going to say
the number of items is the return my images array images array that count and then for the sell at roll
we have to introduce a new set.
So that's selling let's say let's sell to be collection view that the Q Using the identifier is a sell
idea just like the last thing index that is index.
What are sell is not going to be of the type you a collection view sell anymore it's now going to be
of the type that because m collection view said someone is going to let us say let's do this as this
type my collection of you sell.
Well of course you have to return it.
So we take care of that error.
Now in the meantime between when we introduce it and when we return it we can do things such as this
one and say Sell dot image view or my Image view dot image becomes a new image and that image is named
and the name is from images are a index cards dots are all so we find the right image from the array.
You place it in the name of a UI image object and put that in the image of the image view of our cell.
So now everything is setup except for the fact that our collection view which is called My collection
view here doesn't know where the data source on delegate are coming from.
So I'm going to go ahead to my view that load and say after the Super view look to gloat I'm going to
say that delegate is itself and data source is once again set.
And if are application now we should be able to see some sellers showing up in our collection view even
though their floor under layout is not done properly yet.
So that's the next thing that we have to be doing.
We have to make sure that all of these cells are essentially placed in the vein that we want them to
meet and to do that.
We could either do what we did in the last lesson which is using the delegate methods or we could do
a different approach this time and this time I'm going to choose a new approach and this new approach
I'm going to say let my layout to be less be of a new eye collection view floor layout.
So this is my new layout and I'm going to apply this to my collection view dot collection view layout
so that becomes my layout and then I'm going to set everything in between.
So I'm going to say my layout dot item size is something that we have to decide about in.
I have my layout and I have to set the section inset just like the last time I have to decide about
my layout dot int. spacing and then I have to decide about my layout.
Dot Linus spacing just like what we had done the last time the line of spacing is very simple is zero.
We know it.
The internal spacing is zero.
The section set is you eye edge in Dodd 0 4.
That's also easy.
The item size just like the last time we actually have to calculate it sort of calculate that I'm going
to go going here and say let I them's a pair to be let's say last time it was three this time let's
make it five.
So I have five items pair or let's make it two because we only have six items.
So let's say items pair are two.
And based on that I'm going to go ahead and say let's sell a vet to become self-taught.
My collection view is not boundaries does it.
Let's divide that by the C.G. float of the items pair.
So now we find the vet of each of the cells because we get the total vet divided by how many are there.
And I'm going to say this becomes a C G size of the let's say the same values same vet on the same value
of the vet for the height.
Now the last thing that you have to do in this case is probably doesn't make much of difference but
you have to be careful about it is that your collection view is not necessarily laid out in the view
of the Lord.
So that actually happens in the view did appear.
We could put it all if this code in the view did appear but that's really not something that I'm a very
big fan of it.
Instead here's what I'm suggesting to do.
We could say right before we do this little calculation because that's the part that gets affected by
the size of their view.
I'm going to say right before that due self died the view does lay out if needed.
So if you need to lay it out if the size of the view is different than the size of the device do that
lay it out then calculate the size because it wants to view is laid out.
We will have the right size for the vet and based on that you could actually calculate this size the
item size now cannot run this application.
Now we should be able to see the cells that are two of them on each line or essentially on each roll
and they should have no spaces between them.
And that's exactly what's happening in here.
There are gaps that you're seeing here are not between the cells.
These are the gaps that each image view has against the cell itself.
Let me show you that really quickly so we know where that's happening from this is that gap.
There is an image of you and then there is a cell.
And we have a kind of strange for five units.
I could in fact do this one for you.
I could go into my view controller and say when we are making the cells make this cell DOD background
color to become you eye color your eye color that sound for instance.
And if you're on this will see that the sign bag guns are perfectly adjacent to each other but the image
you is they have a little margin from each side.
So this was how we use a collection view of cell when this cell is actually designed vit in the collection
view itself.
There is another situation that happens quite often and that is when you want to share a cell between
different collection views.
So I'm going to show you how we do it.
That's one really quickly I'm going to start the new file in this new find which is a gain of the type
UI collection view cell.
I'm going to call it my cell for instance and I'm going to say also create the X I'll be fine.
Or you could do that separately.
Doesn't matter.
So once they make it it's gonna go ahead and make two files for me.
One of them is the cell swift and the other one is the cell XIV.
Now if I go to the X I'd be fine.
The important one so here is the cell in a separate XIV file and the class for it is my cell.
So they are interconnected to each other.
Now I could go ahead and say this cell actually has an object in it may be a Laban.
All right.
And I place it right up there something like that and I'm going to go ahead and say make the kind of
things just like the last time five units from all angles and then make it align to the center maybe
a little bit larger and has a different background.
And now I'm going to go into my cell and say I have an outlet for it and that outlet is this so is a.
How it's not value then let's call it my label which is of the type you I label and if I head back to
my XIV file now I should be able to select my cell and output in the connections see that my label and
I'm going to connect it to my labor and I'm also going to go ahead and give an IED to my cell.
So here the idea for a time when I say it's my cell idea.
So we have two cells so far.
One of them is within the storyboard within the collection view.
The other one is outside in X A B file has a standing alone.
Now this one is not connected to any particular collection view just yet.
So to fix that I'm going to go to my view controller in my view did look just like what we did in a
table view.
I'm going to say my collection view dot register and I want to register using a nip and using an identifier
so not that actually I want to register using a nib and an identifier.
So that's one I'm going to go ahead and say you I never.
And that name is actually from a string and the string for it is called my cell.
So it's going to be my cell and then the bundle for it is nil because it is within the same bundle and
identifier for it is my cell I.D. that's to identify every put for this cell.
So now my collection of you can use this kind of set if it can.
It doesn't mean is going to use it.
So we could actually change that.
I'm going here in my collection view cell for IDM and I'm going to say let's do this.
If stained expired is even let's use that image if they are odd.
Let's use the label so to do that.
Here's what we have to do.
We have to run if Elsa statement and here's it becomes a little bit tricky.
So it could go ahead and say if index smart dot to roll are motionless two is zero then we have to do
something else.
We are obviously to do something else.
So to do that I'm going to go ahead and say if it is even you want to use the image.
So this part is easy.
Let's take that.
I'm going to place it there.
Then I'm going to copy the whole thing and I'm going to paste it in here and say if it is the else if
it is odd.
Let's do this.
Let me delete these so I can show you everything in one screen.
So in here I'm going to go ahead and say if it is an odd one let's sell to be a collection view with
my cell I.D. and then go ahead and hear us say it is off the type my cell and my cell doesn't have an
image of you anymore.
You're right there.
It has this.
It has a label built into it.
That text becomes let's say it becomes the value of the index.
So index fad diets rule.
Now this seems to be working.
But then when you're trying to return the cell both of these cells are actually declared the victim.
If as bodies.
So really this one doesn't know where a cell is.
So that the scope of it is actually different.
And that's where it becomes a little bit tricky because you could do one of these two things.
You could say well I'm going to bring the cell out of this scope so put it in here and then drop that.
Obviously this is not going to work now because cell doesn't know what kind of cell it is.
You could say well I'm going to make it of the M collection cell.
So something like that.
But then the problem is this very same cell it should be used in here as well.
So both if and else they have to use the same cell.
But one of them is of the type M collection view cell.
One of them is of the type my cell and that's really not going to work.
Now here is the advantage of essentially inheritance a topic that we discussed many many many sections
ago.
So when I declare my cell I'm going to say it is of the type you are a collection of you said it seems
most M collection your cell and my cell.
They are both subclasses of you a collection of your cell.
They are kind of interchangeable.
So it is true that the cell is declared of the type you a collection of your cell.
But for the even numbers it is being defined or implemented as an M collection view.
And for the odd ones is being implemented as a different type of cell.
Now when you are trying to put the image of you or the Labor is saying that I don't know if the UI collection
of your cell has anything like that because that is how you have declared it for me and what you have
for do you have to say.
Well cell in here is as the M collection you said I know that for sure to be true.
And then in here I'm going to go ahead and say cell as this time is going to be my cell and this time
my label that text or even the cell has been declared of a different type.
It is being defined as two other different ways.
Both of them subclasses of the origin out of type.
And now if you're on this application in some of the cells we should see the images in some other cells
we should see the numbers of the index parts and expanded roles essentially and that's exactly what
you were hoping to see.
And now we have to custom cells that they appear here based on some sort of a condition and they're
both of the same type even though their definitions are quite different.
And that is how to use custom cells as well as how to use a collection view layout instead of using
the collection view floor layout delegate and let's keep it up to here and let's move on to our next
lesson.