Welcome back again.
In this lesson we will be talking about supplementary views in collection views and tools are essentially
a kind of fuel that you can reuse them as many times as you want.
And we often use them for situations such as a header view for sections or a area view for sections.
So let's go ahead and see how we do that and what impact Scott and yet I'm going to start a new application
called supplementary views in the collection views.
So once I have that I'm going to head into my view controller and because I know what they have to do
and and do some parts of it right away I'm not going to necessarily do it in the right order but I know
for a fact that we have to be doing.
Are you eye collection view delegate and we have to be doing UI collection view data source so I know
that part and I know I have to essentially make an outlet for my collection view some when I say my
collection view of the type UI collection view and we have to include two methods for sure.
So a number of items number of items in section let's say return 0 for now and sell for I them at indexed
spot.
So these two they absolutely must be there.
So I'm going to say let sell to be collection view that D Q Using the identifier that you always use
for an index card which is then index.
So I have the basics of making a collection view.
Now let's head into our storyboard and I have to return this of course return.
So let's head into our storyboard and in here with I'm going to have these I'm going to have an actual
collection view.
So here is a collection view I'm going to play see about here not like that like that.
And then in my collection view I'm going to go ahead and change the the name of my cell.
So this guy here I'm going to call it Cell I.D. or something like that and then I'm going to go ahead
and connect it to the outlet that he made.
So my collection view is this one and then I'm going to go in here and add something that is called
a reusable view which is essentially my search for it which is this one and this is essentially a view
that we can add to our collection views and acts as a reusable you eye view that you can reuse it for
different sections or for defending our purposes.
So let's add the one here as the footer and the one here as the header.
Now for both of these seats they are reusable just like when we had a cell and our cell has an I.D..
I'm going to give them I.D. as well.
So this is had their I.D. And then this button one is photo I.D. so we have the two of these.
And because they want to have some content in them I'm going to have to actually give them a subclass
as well.
So to do that I'm going to say command and and in a with each class I'm going to say these are actually
of the type you eye collection reusable view I'm one of them is going to be called a header view so
that's that I'm going to say command and again and a gain of the type your eye collection or the use
of L view.
This one is going to be called a footwear view as you can imagine.
We need the views so we will be able to get access to the content between these two are usable views.
So the top one the class for it becomes the Muslim into here becomes their view on the bottom one.
The class for it becomes obviously the footer view.
So now that we have this we can have any kind of content between them as if they were just UI views.
So for instance I could go in here and say this one has a label inside it maybe like that.
And this other one has the same thing and I've worked with labels because they're the easiest objects
but you can imagine you could essentially use any kind of object in them.
And then I'm going to go to my assistant window in the system window and get a load the right file which
one of them would be the header view wants to have their view is loaded.
I'm going to go in here and say This is Heather labor and that's one of them.
And now let's load the footer view and that is also properly connected to my footer of your outlet here.
So I'm going to connect that and that becomes a footer label.
So now we have everything that we need.
We have a table view for our table view.
We have a cell.
Obviously we have a supplementary hither view U.S. supplementary footer view.
We now have to head into our coding and write the code that is gonna reuse these reusable views and
show us different content depending on the sections and to do that.
And when I go to my view controller and I'm going to make an assumption right off the bat that my collection
view actually has two sections one section that we have been doing for a while.
For cities and another section for countries.
So I'm going to go ahead in here and say let cities are right to be these guys let's say New York and
New York.
Let's say Vancouver let's say early and let's say I have the last one to be real and then I have to
let countries agree to be.
And again here I have a U.S. I have Canada.
I have India and maybe I have Mexico.
So we got some cities on some countries and we want to have two sections to do that.
I'm actually going to go ahead and say valuable array of arrays.
And that's going to be an array.
That is an array of arrays of strings.
So it's a bit of a complicated process.
I'm seeing an array of arrays which is an array which we need.
There are arrays of strings so I'm going to put these two arrays within this array and I'm going to
do that in my view did load so right off the top in here at the very beginning I'm going to say in my
view that load array of arrays becomes an array of cities array and countries array countries array.
So now we have the array that we need to show in this collection view.
Then I'm going to go in here to my number of items in sections and before that actually I have to decide
about the number of sections.
So I'm going to say number of sections and the number of sections would be the number of objects in
this array.
So I'm going to say return this one that count.
So we got the number of sections taking care of.
Then we have to worry about the number of items in each of these sections.
So for that I'm going to say array of arrays section whether it is the 0 1 or the first one from that.
What I want to get is the counterfeits.
So if we are in their first one.
Get the city's array count.
If you're in the countries or get the country's array count.
Finally we have the sale of for item at index spot and we already have a cell.
So that's good.
Let's format this properly and then yet I'm going to say let's sell a label to be a you I label made
by a frame and the frame for it is actually sell da down there is.
So whenever my sell is place this guy right over there and then sell label sell a label.
The text alignment when I say and sticks a lime and center so they are taking care of so label that
fund let's make it a you I find that system font of size maybe a larger ones such as 22 and then the
important thing of it is so label that text which essentially has to become array of arrays from the
area of arrays we have to get the index part that section.
So we find from rich array we want to read and then from there we want to get index part DHA to roll.
So we want to find which section I'm from which section which all you want to read for this particular
text.
Once we have that and when to go ahead and say Sell dot background view becomes the sell label this
a different way that we have been doing in the past we have actually been adding this whole label to
our sales which is good for testing but Jared another very good idea.
But here I'm actually adding it as a bag on view in general is not a good idea to build your items here
when you are doing when you are producing your sales for items is whether if you subclass yourself but
they don't want to do that because I don't want to make things overly complicated.
This isn't the topic of this particular lesson.
And then finally maybe we change the bygone colors as well.
So when I say sell not background color becomes you eye color that red.
And like always if they expand that role was modulus 2 was 0 that even ones essentially make this sell
dot background color to become you eye color dot.
So we have two sets of sense.
We have the blue ones and the red ones and they all show are the correct label hopefully.
The final thing I have to do before I run the application I have to make sure that my collection view
dot delegate is self and also my collection view not data source is self.
You could do this either in your story world or do it here in your actual coding environment.
Now if I were on the application now we should be able to see a collection view with two sets of data.
Some of them being cities some of them being countries and there to head their views are there but we
just can't see anything.
And since we then set any of the constraints we are getting this weird look that you know there's some
gaps in here but that's again it doesn't matter for this particular practice.
The next thing that is important is actually setting our values for these gaps on the top and the bottom.
Those are two views.
The header view on the footer view and to do that we use a particular function from the delegation called
The View for supplementary view and that's the kind of function that returns what view you would like
to see at what supplementary location.
And the first thing I'm going to do is I'm going to say let and I'm going to call this one my subbed
view which is of the type you UI collection reusable view.
So we have that.
And then somewhere much further.
Let me get only this code in here somewhere at the end.
We have to return my sub view but in the between these two you have to essentially decide what happens
to this top view.
So the first thing I'm going to do is I'm going to say if this thing kind if kind was of the type you
eye collection view dot header element is head there.
So for the header if you have something in the else which is the footprint you have to obviously do
something else.
So in header I'm going to go ahead and say let's head there to become collection view and I'm going
to d q a supplementary view for it and this is a bit of a longer quote I'm actually gonna formatted
like this which is a different way of formatting.
The moment you take it outside their practice.
So I'm going to say the idea that I want to do.
Q Is this one of the ideas actually had their idea just like what we did before the index part is obviously
indexed bond and the kind of the object that you want to use is actually disguised you collection and
view element section header just like what we had earlier.
So now we have the header but the header is not of the type that we want which is the header view.
So I'm going to have to fix that one.
I'm going to say get this as a header view.
So we have that part taken care of.
And now I could go ahead and say header dot head there labelled dot text say whatever that you want.
This is Heather.
And of course you make it relevant to the value of your index part.
If the index part is section is zero you make it say something.
If it does not make it say something else.
I'm actually going to try to do that for you in there in the footer section.
However once that is done I'm going to have to go ahead and say in here my sub view becomes header.
So now we have our sub view which is of the type that we needed to be.
And then we're gonna go ahead and here and say of course return.
Let's go ahead and do the exact same thing here for the L spot which is the footer.
So I'm going to go ahead and copy this paste the whole thing in here.
Say let's footer to be the D Q reusable.
All of that is good section type which is a footer.
So we are in the footer.
If you were there don't get the header right.
There you get the footer.
And don't get it as a header view you get it as a footer review and obviously doesn't have a header
labor anymore.
It has a foot terribly but if I'm not wrong.
Is that what we called it.
Let's have a look footer.
Labor has a footer.
Yes.
So in here I'm gonna go ahead and say ah let's just rewrite this whole thing with an if statement.
So I'm going to say once we got the footer If index smart that section is 0.
If you're in the very first one to say footer the footer Lei Ben dot text says section it's Section
Zero.
All right.
And otherwise you just say something else as you do footer label with a text later becomes Section 1.
You obviously could decide or you should decide on much better ways of doing these things.
I'm just doing it for the purpose of demonstration.
So once again we have view for a supplementary element of kind if the supplemental element of kind is
header the subclass or had their view.
Otherwise we do our footer view no matter what we return that sub view at the end depending on whether
that's of you becomes a footer or it becomes a header and for either of the two of them we essentially
write the kind of data that we want.
In this case we only have a text value.
Otherwise you would have more value.
And if I run my application now we should be able to see a new head the review and a new footer review
for our collection views that it says this is header for both of them.
This is Section 0 footer.
This is Section 1 footer.
I'm going to quickly change some of the look matters of my collection view because it looks really ugly
and I don't wonder that first thing I'm going to do is here and when it comes to my view did Lord I'm
going to say let's get the layout lit let's call it my layout to be self dot my collection view dot
collection view layout as I'm going to get as you I.
Collection collection view floor layout and then I'm going to go ahead and say my layout dot section
inset becomes you I edge in sets of their values they want to put in here is I want to give it some
space for the top and bottom so the top I'm going to give it 50 left is zero by then I'm going to give
it 50 and write a zero again.
So I want to have a little larger space for post my foot her view and my head their view and then I'm
going to head into my storyboard and here I'm going to select my collection view and set all the constraints
for it maybe 30 0 0 and 30 the same numbers are good so it's actually has some gap on the top some gap
on the bottom and if we on our application now we should be able to see that it's collection view is
properly kind of straining itself and on see the header view and the footer view and we obviously can
essentially reuse these if you had more US sections in your collection view and that is essentially
how we use a supplementary view in collection use views it primarily fit this method view supplementary
element of kind but to do that we need to have our head their views or footer views or any other kind
of reusable view that we want and that's about that this keep it up to here and let's move on to our
next lesson.