Welcome come back again.
In this lesson we're going to get started with collection views.
And since we already know how to use table views a lot of the concepts should be quite familiar now.
So let's go into school and yeah I'm going to start a new application called it my collection view app
or just a collection view app in the collection.
You are the first thing I'm going to do is I'm going to head into the storyboard and change the type
of the view controller.
So I don't want it to be a view controller outlet.
I want it to be a collection viewpoint or an outlet.
So up here I'm going to choose this one which is a collection view controller ultimate.
It's actually very similar to a table view controller except that in a table the view controller.
The cells are necessarily placed in in defend rows by here cells could be in columns or in rows.
So the first thing I'm going to do is I'm going to actually go ahead and make a new file command in
cocoa touch class and this one is going to be of the type you eye collection view controller type.
And I'm going to call it my collection view controller.
Once they have that which is very similar to a table view controller on work I come back in here I'm
going to go through the a storyboard and set the class of my outlet to be this newly created file.
That is my collection view controller.
And finally in here I'm going to go ahead and say this view controller is my initial view controller
and now everything is ready for us to move one with making a collection view.
So in this first example all I'm going to do is I'm going to make a collection view that has says that
each cell depending on their index number will be either green or there would be blue.
So there just gonna be a difference of color between the cells because we're just trying to get a sense
of how it works.
So the first thing is making sure that our cells they actually have an idea.
And this is very similar to what we did in table views.
I'm going to call this identifier of my reusable view to be cell I.D. And that's all I have to do 40
cents.
Now let's head back to our collection view controller and we have a view continuing that we don't need
it anymore.
So I'm going to delete that fine and my correction of your controller.
Let's go ahead and look at some of the items that these should be quite familiar from when we were doing
table views.
I'm going to get rid of my view and looked all together.
I'm actually going to get rid of the static already usable.
Then I'll get it coming here.
That is something called number of sections which for now the only one to one.
So then don't delete that.
So it becomes the default value of one then it's another of the number of the rows.
It's saying how many items you have in each section.
So you're gonna say the number of items for nine is I think value such as Ten.
So I have ten items because this is just a test and we don't really care about the actual values and
then the next important function here is called sell for IDM art which is very similar to a function
table view that was called the for a role at index path.
So this is essentially the one that decides what is going to be there in that cell in that particular
location location being the next Mark.
So in here I'm going to say let's send a collection view.
Dick you're using the identifier identifier is cell I.D. that's part you already know unnamed then they
obviously in next month then in here for the cell I'm going to go ahead and say if index parts dot to
all modulus 2 was 0 then do this said DOD background color make it the UI color dot read the phrase
thus.
And if that wasn't the case right at the very beginning maybe make it green or blue or any other color
let's put it out perhaps.
So what's going to happen now is there's going to try to push 10 cells into our collection view and
then depending on the index Mark is gonna make soft then blew us off them.
Brett let me get rid of everything else.
So I call it becomes easier to navigate around the application and then show you some other stuff that
is quite necessary in fact so once our application runs we can see that we have to do that expecting
red blue red blue so on and so forth but the placement of the cells is not really what you were expecting
to be.
I was hoping that there would be placed right next to each other like the one that I have in my free
instance photos application on my iPhone.
So let's go ahead and fix that.
But the first thing you have to think about is how many items do you want to see in each role simply
because that I was in this storyboard I just manually drag this cell made it a certain size but that
size doesn't really inform anything you have to actually decide about the size of each cell.
You have to tell the machine that you want each cell to be of a certain size or if you want a certain
number of cells in each role.
So for that I'm going to go ahead in here and say I have a value let's call it left I pair our role
I'm going to say that value is actually three four.
Now we could simply change that later on we then have to use four methods from a delegate which is called
the UI collection view flawed delegate which essentially informs our collection view of how to place
each said.
So those four methods are these methods one of them is the size for each item.
So how big each item should be in the next one is going to be the inset for each section.
That's essentially if you have multiple sections in your collection view what is the inset for each
of the sections.
Now in this current example if you only have one of them but this still for that one we have to inform
it of that then we have to find that minimum line a space says in a section.
So what are the minimalist spaces between two lines in each section.
Again we only have one section.
And finally what's the minimum space between cells in a in a section essentially.
Now I know it seems a little bit complicated but the reason for it is collection of views they can do
a lot of different things.
And even though we are showing to do something quite simple by the end of this section we will be doing
far more complex collection views.
And the reason we need all of these methods is simply because of that because we want to be able to
do so much more than the basic collection viewers that are just a square shaped cells next to each other.
Now however for this test I'm going to go in here and say I need another essentially a superclass or
a protocol which is called UI collection view a delegate floor layout so is the floor layout that I
get I gives us these methods that I need one of those methods is called size for item and for the size
for them I'm going to go ahead and say I need to return ACG size so we can see G size.
And for my C G size I have to come up with two values of it and a height.
And since I want them to be placed right next to each other I'm going to say the vit is essentially
the total of it divided by the number of the items.
So I'm going here and say let's W to be self dot collection view dot boundaries that private divide
that we see G floor to value of i.e. Dems per roll.
So because they can't divide ACG frauds by an Integer i had to cast it into a C G float and now we have
the W and when I say W is both of it and height because I won my items to have a square shape I want
them to have the same width and the same height.
So now we have the size for each item.
The next one is the inset for each section.
So I'm going to come in here and say inset for section and that is essentially the edges for each of
the sections.
Now if we change the edges for the section interior each year then actually affect this says.
But since I'm using the boundaries of the collection view because of that is going to affect it.
So for now I'm going to say return.
Sue I edge inset dot zero.
I will show you later what happens if I change this value.
We then talked about having the minimum line of spaces on the minimum of space between the says I'm
going to say minimum interim spacing that is the space between the cells which in a specific section.
I'm gonna say for that return just zero and then I'm going to say minimum line spacing minimum minus
facing for the section I'm going to say for that one as well for now just return to zero.
Let's go ahead and see how this one looks like because I know a lot of quote and I have to break it
down for you so you get a sense of what's happening with each of them.
So now we have a collection view that shows us 10 cells and each cell is perfectly placed next to the
other one.
There is no line spacing that is no in terms of spacing and there is really all of them are perfectly
adjacent to one another.
So the next thing I'm going to do is I going to try to show you something.
I'm going to go in here and say for the inset for the collection of U.S. I'm going to go ahead and say
I actually have a real inset and the real inset is from the top.
Let's say 50 from the left 50 from the bottom zero from the right.
Let's make it a much larger number say a hundred.
And now what we should see is we should see your collection view appearing 50 units from the top a 50
units from the left.
A lot of news from there right.
And that's exactly what's happening.
This is a very collection view is essentially being appearing.
If I change this numbers to say this keep the top at 50 left at five and right and.
Now I entire section is shrunk but less than what it was showing before and that has an impact on the
size of the cells.
So this is now where my collection view is being present at this area but then because the width of
each of them was dependent on the boundaries it is affecting the size of each of the cells.
You could run a little calculation on your own to perfectly calculate this value.
I'm not going to bother with that right now.
Yeah.
Next thing I'm going to show you is this.
Let's put this back to zero.
I'm gonna say let's have minimum line a spacing of 20 and that's the simplest one.
It should have 20 spaces between each two rows in this section and that's exactly what you were expecting.
And finally if I changed your smile you back to zero and change the other one to ten.
We can get spaces between each of the two cells before they're on the application.
I want to add one more method which is a very very simple one.
Did select item which is very similar to our method in table view that was called did select a row at
index spot.
This time is it did select item an index fund.
And then we do that.
I'm going to say print we are at set and let's find out where we are.
All right index smart doctoral so when we run this application now we should see that tennis face ten
point the spaces between each two cells.
Obviously there is not going to be three of them anymore because they don't fit anymore.
So now we have this one and then we have that one in the middle of one it's actually an empty space.
And then we tap on any of them.
Essentially get the number of that said if you want to try a little calculation to make sure that you
find exactly how much the vit should be based on this number you could actually run a little maths in
here.
I'm going to go ahead and do that for you.
So the calculation of it is not all that complicated is essentially saying we have three items and in
between each two of them we need to have 20 or 10 units.
So in Yeah I'm going to go ahead and say let's total margin is items per roll.
How many of them are there.
Minus of one simply because if you have three items we have two gaps between them.
There is the first one and then the gap between the first then and the second one.
That's the one.
And then the gap between the second one.
Undeterred one.
So if there are three says there is two gaps between them.
So items per roll minus one.
I'm going to multiply that number by this one 10 which is a really bad idea.
You have to make all of these dynamic values up here so we can change them.
But for now I'm going to say let's just do it manually like that and this is the total margin that is
being subtracted from the sum total collection of you Vit.
So if you want to calculate this properly I have to say let's get the total margin subtract that from
the vet and then divided by the items Pearl and if you get that then we should be good.
And now he's giving me an error saying that you're trying to divide a force up to like a CGT fraud against
an integer.
So I'm going to go ahead and say yes I want to do that.
So CGT float of this entire value.
So whatever you calculate in here make it the C G float then that's C G float subtracted from the total
of it and divided by items per rows with that becomes the veto of each of the rules.
If you're on the application now we should be able to see our three selves again in each row.
But they also should have a 10 points distance between each two of them which is exactly what we wanted
to see if we wanted to could actually say the minimum Linus spacing is ten as well.
So essentially it would look like that.
Each cell has an instead of its own and they are being placed a slightly separated from the other ones.
So that's about it.
A quick introduction to collection views.
Let's move on to our next lesson where we do more advanced the stuff faith collection.
Yes.