Hi Alex here from rebeloper.com and welcome back to the last episode of our
Christmas Calendar tutorial series! And in today's episode I am going
to show you how you can create different headers for your UICollectionViewController.
So without further ado let's jump right into it!
Okay! Now we have left off in the last episode like we have
created our NewsfeedController. And as you can see it... let me just make this a
little larger so we may see our text here... well it is yep! Okay, there we go!
We have our NewsfeedController here and I have seen a bug in my code and I want to
make sure that you get the latest and the best updates for these projects. And
what I have changed I will go through in this video. First of all let me just
start creating a new project, a new file sorry. And if you just scroll all the way
down you will see that I have now two CollectionKit groups. One is for the
Base, Controller, Section. And the other one still has Base, Controller, Section
but we have with CollectionViewController. Now what is
the difference between these two. And if you are downloading the resources you
will have now these resources. Now without the CollectionViewController
you will not have these let's say parent class created for you. But it will be all
of these data the collectionView, the provider and how you add your collectionView
and set its frame. It will be
in the Controller. In our case the NewsfeedController. It will be here like
under the delegates or something like that. I just can't remember right now but
it will be inside our NewsfeedController. Now why is this so important?
Well sometimes you don't want to have the CollectionViews frame set to the
views and bounds. Maybe you want to just set it to half of your controller
so that is how you set it up with the other. Let me just show you the one
with the without... just scroll all the way down... without the CollectionViewController.
This is without and this is with the CollectionViewController. Okay!
Now one thing that has changed and that is about headers. Now in this new version
and in both of the examples the header has been added to our NewsfeedController.
Now we will have 3 files created and the HeaderCell will
be a universal cell that you can and we will see in just a moment how you can
customize it. In the Section part there will be no more HeaderCell. Okay!
And that is it about it these changes. Okay! Now let's take a look at
what code changes there are. First of all of course the HeaderCell is moved from
the sections. No more HeaderCells in the sections. It is in the Controller.
Let's just go and take a look at what has been modified and what has been
removed here. Okay, modified yep, we have added in the fetch
a user or InstaUser or FacebookUser I have added that you can comment out this
createdFacebookUser with a basic documentData. And we are returning our
created fetch user as the fetched Facebook user. That is so we can
basically see that we do have a header. Otherwise the header will be empty.
Nothing will be shown. Okay! Let's go to our Manager. It is the same thing for our
InstaUser. Now let's take a look at the NewsfeedControllerLayout.
Nothing much but we have removed the HeaderCellHeight from here
from up here the NewsfeedControllerLayout and added it to our Section0.
And likewise for the section1. That is how you can set the height of
your section headerCell. If you set it to 0 then no header will be shown.
That is an option. Okay! Let's take a look at the NewsfeedHeaderCell.
Basically it is the same thing but now you can get this didTapFacebookUserHeaderCell.
You just have to add it to your delegate. Well first of all when we
create this it has this didTabInstaUserHeaderCell and if you want to add
another section then you have to do it my basically just copy and paste it and
add the appropriate changes like InstaUser, FacebookUser and didTabInstaUser,
didTabFacebookUser. The same goes for this extension so it may be optional.
Let's just scroll all the way down. Here you will have a dataForInstaUser.
And if you want to add a Facebook user then you want to have a dataForFacebookUser.
Well again this is the second section, section1 but it is the
second section. Now we have something here and that is a new thing. We can set
up the views here you will add your new views like let's say a profile picture
or at the name label and so on. But now we have a new one... a function called
configureViews. Basically it configure the view
according to the sections index. If the index and as you can see we have an
index that is inputted in the NewsfeedController, if the index is 0 then
let's set the backgroundColor to be this yellow background. And if the index
is 1 then the backgroundColor should be this blue1. Okay! Let's just scroll
down more down here we have our handlerInstaPostHeaderCellTapped. And if
you want to have more sections than the handleFacebookPostHeaderCellTapped and
of course we can populate our headers. And first of all we have our
header data for our InstaUser and then for the FacebookUser. Again this first
one is created by default and the second one you just have to simply copy and
paste it. Okay! Let's take a look at the meat of it inside the NewsfeedController.
And first of all you can see some changes in the classes.
And that is that we have added our NewsfeedHeaderCellDelegate and removed the
other HeaderCellDelegates. Okay and two things we have our InstaPostCellDelegate
FacebookPostCellDelegate. These were already in there but the change is this one.
Now we have our headerCell didTapInstaPostHeaderCell
delegate and the didTapFacebookPostsHeaderCell delegate too.
These are optional as I have already told you. Okay! Again section1Cell and that is okay.
Let's just scroll all the way down to see the only the changes because we have
gone through these in the previous episodes. Now the headerComposer is of
type NewsfeedHeaderCell. So not InstaPostsHeaderCell or not FacebookPostHeaderCell.
This is only on one type of headerComposer. Okay! Let's scroll all
the way down and we will see why we
wanted to have this. Because in the viewUpdater we are setting the views
delegate to self. And then we check if the index is 0 then the dataForInstaUser
we know that we are talking about the InstaUser. Then we
fetch the InstaUser from our Manager and of course we populate it with the
dataForInstaUser. Otherwise if the index is 1 then we
fetch the FacebookUser and we of course populate with the dataForFacebookUser.
Here is where you set the different data for the different headers.
And of course the size is the same. Index is 0 then we return this size
otherwise we set the Sections1.headerCellHeight. And please note that we
need to have this "else" statement. Not "else if" statement in the headerSizeSource.
Because we need to return something, so the last one should be else.
Okay! Let's just scroll all the way down if we do have something and nothing
as is left hope that covers all of it. And now let's just a build and run
finally and see how it all worked out. Okay, we should see two sections. And there we go!
We have our header here with the yellow one and the other header is the
blue one. And as you can see the size is differ and so on. And there we go! We have
a different header sizes with different header data.
Now I hope you enjoyed this one
and that is it for the Christmas Calendar tutorials this was the last
episode of the series. Hope you enjoyed it! If you did go ahead and give it a
thumbs up subscribe to the channel and hit that notification bell!
And as usual I will see you in the next one!