Hi, Alex here from rebeloper.com and welcome back to our Christmas calendar
tutorial series and in this episode I will show you how you can easily create
a section for our UI collection view controllers. So without further ado let's jump right into it.
Okay, now if you haven't already done so go
ahead and take a look at the previous videos because this might be a little
strange for you so I advise that you take a look at the previous videos where
I explain what all of these files do and how is this set up, okay. Now in this
video we are going to add a new section and already we have our insta post
section in our collection view controller. So this one, okay, there we go.
So what I will do right off the bat is make these let's say in our manager we
are not going to fetch only let's say four cells. So let's a build and run that
and see that we will have only five. So zero to four we have five cells. So we
will add a new section down right here, okay. So what we need to do now is
go into our newsfeed controller. Right click on it and add a new file, okay.
Just scroll all the way down until you see collection kit and of course if you
haven't already done so go ahead and take a look at the previous videos where
you can download the resources of mater fact you can just click the link down
below and find the resources on my site. So go ahead and install as shown in the
tutorial before how you can add these custom made file templates. So we are
going to select section now and click on next and the sell model okay
the header model. What are those? Well we are going to create Facebook posts.
Facebook post this needs to be singular all of the template takes care of plural
names and this will be again a Facebook
user. Now it's kind of strange because in the newsfeed we will have insta posts
and Facebook posts but yeah it's just the same for the tutorial, okay. This will
be a new section again. So let's click on next
and we will place it in the newsfeed controller group because that's where
this section will live, okay. Let's hit create and let me just select all of
them and let's right-click on it and a new group from selection and I will name
this ... okay and that is it for the creation as you can see it resembles to
our insta post section. We have a manager, header sell, sell, post sell, post models.
The main difference is that this template already has a Facebook post in it. So all
of it is set up. So let's take a look at the manager for instance here as you can
see we have fetch Facebook user and so on and we have our Facebook post model
and here it is Facebook user and Facebook post and so on so this template
is awesome. You don't have to write this over and over again, okay.
Let's take a look at this sell. So here we have our protocol, our extension of
protocol, our sale it's called Facebook post cell and our delegate for that and
so on. Well it's basically the same but with the other data or the other model, okay.
Now that we have all of that let me just go into our manager and let's add in
here, let me just comment out and I will add let's say only two. Two is fine.
Two cells for our Facebook post, okay. And let's go into our cell and what I
want to do is add new colors. Now for that go ahead and download the resources
by clicking the link below and I believe we have something special for you and
let's just go to our testing here and here we have our resources and we have
our flat UI color swift. So what you want to do is just simply drag and drop all
of these into let's say all the way up here, okay. Make sure that copy items is
need is checked create groups is checked and collection kit Pro is check.
Let's finish and if you take a look at this group you will have a flat UI color
with offset we eat all of these awesome colors, okay. So let's just jump
right back to our post sell, Facebook post sell and let's create a new color.
Okay, let me just close this off and hit command shift M and the media library
will pop up and I will choose this red color cool, okay. And for the header cell
let me just go all the way down and delete this color, hit command shift M
again and I will have let me just see. Let's see what color this green color
looks quite, okay. Okay, now we have basically set some constraints for well
we can see that these posts are not the same as the insta posts, okay. Let's go
and add this section to our newsfeed controller and let's just scroll all the
way up and see what we need to add in order to integrate a new
section. So first of all we need to add a new notification. So go ahead and copy
that out and name this section one data source and section one. Again this is for
notifying when to reload the section data, okay. We want to have our Facebook
post and cell delegate and Facebook post header cell and delegate, okay. And right
off the bat it will ask us to add those two functions well it will not us
because they are optional but I will paste them in and there. So let's add in
here Facebook and that's all right with insta we are going to have Facebook and
that takes care of our delegate functions. Now section zero cell with.
Now let's just copy on this out and paste it in there and cell size and I will add in
here for section one, okay. So let's rename this section one cell width and
section one cell height and I will have this here. Now let's create all of this
and where do we create it well in the new sweet controller layout and it is
pretty simple. Let's copy all of this out and let's
paste it in there. Now let's set one here and one there, section one.
Number of cell per with and I want to have let's say let's have two, okay and the
spacing should be only one and the edge instead I will leave them as it is.
Or rorther yet let me just show you when it's zero.
Okay, let's just go all the way back and now we need to have this like sell one
with the section one cell provider. It's pretty self-explanatory what we are
doing here we are just simply changing the constants for our cell one and width
and height, okay. Let's just go all the way down collection view animators still
fade animator that is fine by me. Now compose provider in sets and that should
be the same because that is only for the collection view and now we come to our
section 0 provider layout and I will just copy this again and maybe paste it
all the way down here or maybe not maybe just paste it here. Section 1
provider. Let's rename this and again we are going
to have our top edge in sets and so on so all you need to do is set section
one here and let's rename section one provider layout there and the spacing
and the in sets. So that is pretty straightforward and it only took just a
few minutes, okay. Let's just scroll all the way up here we have our header
composer, section zero data source. Now we need to add our data source view source
and size source. So let's just copy that again, paste it in there and section one
provider elements. Again let's rename our data source and it's not insta post
manager, but it is Facebook posts manager and fetch Facebook posts, pretty simple,
isn't it. So a section of one view source and it
will be a Facebook post cell. Facebook and it will return the data as
Facebook post and we can set the delegate and populate as same with insta post
So once you get to know the hang of it this
is very very simple to add new sections. So section one size source it will be
the data will be Facebook post and section one cell width and section one
cell height, okay. Let's set up our controller Notification Center, okay.
Let's just notify ourselves when our section one data source has been set and
what we want to do here is for the section one data source data we want to
fetch our Facebook posts, face book post manager fetch, face book posts
pretty straightforward. Navigation stays the same, animator stays
the same. Now we want to create a new provider for the section one. So what I
do is copy and paste that in there. Create provider for section one, section
one provider it will be a basic provider and one one one for the datasource, view
source and size source. Section one providers layout will be section one
provider layout that we have just set right up above, okay. And now what we want
to do is add this to our work sections providers. So we can have a header for
this section two. If not then we can add it all the way down here but we don't
really want to. If we want to set the header for that we want to eliminate the
header that we can simply set the header height to be zero, okay. Let's just scroll
all the way down and that is it I believe that's it. Yeah, let's build and
run and see if this actually worked. Now that is how you can add multiple
sections to your UI view controller. I hope you enjoyed this one, if you did go
ahead and give it a thumbs up and subscribe to the channel
hit that notification bell and don't forget this is possible to this awesome
github repository called collection kit and as usual I will see you in the next one.