Hi, Alex here from rebeloper.com and welcome back to the channel
and welcome back to this awesome tutorial series on DuckUI and
today we are going to move forward with lists and we are going to talk about
headers and footers. So without further ado let's just jump right into it.
Okay! In the previous episodes we have created our simple newsfeed
viewcontroller list and we have kind of experimented with the design of it and
let me just show you where we got and today we are just going to talk about
headers and footers because as you can see here we have our top view and if you
scroll all the way up it doesn't really move. So that could be a place in your
app but in some cases you want a header that will move with your scrolling cells.
So today we are going to implement just that and I'm just going to start from
scratch. Let's just delete all of these. Let me just move delete and move to trash and I
have left this group because we are going to add that in there. So it's just
right click on that group and select new file and just scroll all the way down
till you see DuckUI and if you don't have these templates go ahead and
take a look at the previous episodes where you can download the resources and
install all of these templates. Now we have been working with D_ListController
and we could use our D_ListFooterController if you just wanted a
footer or you could use word D_ListHController that has only a header, no
footer but today we are going to talk about both of them so we will be using
D_List header and footer controller. Okay! So let's just select that and let's
click on next and here we have some more options that we
need to add it here. Now the controller name is the news feed and if you have
been paying attention in the previous episode this is the name of the our view
controller what is going to show. So it's news feed the cell model name what the
cells are going to represent and those are posts. Now the header model name and
the footer model name. Now we just, these are just old items so let me just
remove all of these and the header model name let's say our profile that
should be okay. So profile view or profile item I don't recap for now and
the footer let's say details, okay. Details, now this wouldn't make a lot more
sense in your case because you already will know what you want to present on
your profile, on your header and your footer. Make sure that this header will
have a model so you are going to push some date through that model into that
header and of course into that footer. So the profile model will have that data
that you will want to see in the header, okay. So let's just click on next and I
will guide you through the explanation. Okay! Let's click on next and the news
feed is okay let's create it and as you can see we have quite a lot of files but
before I'll talk about them let me just again reiterate that this document
serializable needs to be created but only once to have D_Lists in your
project. So we have quite a lot of files here but before we dive into it let just
build and run and see how that looks. Okay, here we have our header, here we
have our footer, our cells, yeah it is yeah we cannot scroll right now because
we don't have enough cells but we could if we would have and we will add in
show you how that looks like, okay. And if you tap on the cells as usual did
the button with tag 0 so we are tapping the tab me here this second one tap me
again has a tag of 1 so you know which one is tabbed and it gets back the post
so this cell has a post as its model. So we have some data with the post so we
get back that beta on the view controller. That is the news which you
control so we can do whatever we want let's say we want to navigate away from
it so yeah pretty awesome and of course we if we tap a little bit further down
on the cell it says deep tap row in some cases you
just want to have the top row and just navigate away, okay. Next up let's talk
about this header. So let's tap on the header and it says this tab button with
tag 0 because it's tapped me it has a tag on 0 in header with an item and as
you can see we already have this profile with the UID of 0, 1. Let me just move
that a little bit up maybe so you can see it a little further.
Okay! Let's tap on the button with a tag 1, there we go tap me again that's that and
again the profile with the UID, but these models that are dummy models
that I have just created with this template I'm just a simple UID I will
just show you that in just a moment. So let's take a look at the footer
finally. In the footer we tag one and of course the other one was 0, okay. That is
pretty straightforward let's just jump right into the details, okay. Let's just go
remove this maybe stop it and let's take a look at
all of these files. So first of all we have our newsfeed view controller.
This is where everything happens this is the view controller we will be talking about
this intensively in just a moment. But before we do that let's take a look at
the cells. So we have our newsfeed cell as usual
you don't know how this works go ahead and take a look at the previous episode
where I go into detail how this works. The same goes for our newsfeed header.
It is basically view, a cell, a UIView cell. Okay! It's not but you can think about it
as a cell it is the header cell and it has the news with header delegate.
It has some buttons on it it's basically the same as with a cell but we have only
one of it, we have only one header, okay. Yeah, the same goes for the newsfeed
footer. We have our delegate here and our items buttons and so on. This should be
really familiar to you if you already saw in my other video on the cells.
Now let's talk about the cell model, there we go. Simple model we have a UID
and filters dictionary. Now the dictionaries are okay because once you
can basically create your post with a dictionary. Let's say you download some
data from firebase or from a server and that is a dictionary. Now you can feed it
right into our post with just a simple dictionary you don't have to type in UID,
name, title and so on. So you can use that with this document data so that is
why we use our documents serializable. Okay! What's up next? The same goes for
our footer model it's the same and our header model. Well the same. So no new stuff here.
Now let's take a look at our newsfeed view controller. There are some
stuff that is kind of the same as with the simple list controller but now we
have our besides our newsfeed cell and our post model we have our newsfeed
header cell and our profile so that is the
model for our header and here we have our newsfeed footer and that is again a
cell of view and with its model the details. So if you want to construct it
manually you have to add all of these in here. Okay! Let's move a little bit down I
would go into the details that I have already explained in the previous
episodes let's just move forward and for now let me just add in here a few more
posts so we can have that a scrollable effect. Sorry...
Maybe add a few more, okay. Now hander item. So on the header item you
need to provide this is an array but you need to provide only one element because
yeah the header is just one cell you provided only with one element and here
we have our profile model and it says this with a UID of zero one, pretty
straightforward and the footer item again you provide this with the details
model yep what you want to see in there you will get and again let's just, let's
just talk little briefly from the header when you had that model you will get it
inside this item. So when we did set this item you can basically grab the items
UID or whatever property it has this profile model and you can simply I'm
just going to display this on the label. So yeah that's how the data flows in to
the header and the same goes for our footer, profile footer, header footer, okay.
Let's move forward and let's just scroll a little bit down as you can see because
we are having those delegates on the tap of a button in the header in the footer too
and of course in the cell as usual we are setting the delegate to self here in
the setup header. Okay! Let's move forward and take a look
at our collection view delegate flow layout. Now there are a few more methods
here than the usual one we have our reference size for header in section of
course we have on one section with D_List. So we set the width to the whole
frame width and the height to be 100 the same goes for our footer, okay.
Padding I have already covered that minimum line spacing, minimum
interitum spacing one that is covered size for item this is for the cells and
did select item at index. Now this is just selecting the items it's not for
tapping on the item. Now the tab button and now the tab button
with tag and in cell with item. Now this is tapping on the button on a cell.
Now we do get back the tag of course now we can know which button was stepped but
here if we wanted to we can have basically actions on the header or
footer itself. Let's say we tapped on an item on the cell and we want to
something to be modified on the header. Now what we want to do is call this
header as the newsfeed header and we set the labels text to detail button with
tag 0. So let's just see how that looks in action. So it's pretty good that there
are so if we tap on the button on the header we do get an action in the view
controller but if we do tap on the cell we also get an action in the header.
So, there we go. It says did tapped button with tag with zero
so it's vice versa. So that is really hard thing to do with a simple UI
collection view controls but it's really simple to do with D_List, okay. And maybe
let's tab here it says dip the button with tag 1,0,
1 yep you can see that it is changing. Let's just scroll down and you could do
that the same for the footer too. Okay, here we go I won't comment out this
out you do that and experiment with that of course you can then transfer any kind
of data to your headers and footers. Now one final thing that I want to show you
in a D_List is how you can add a background to your list so let's just
add here, I believe it's self dot add background and yep you can add a simple
image to it. So let's just hit command M and and our
dummy image and there, okay. Let's select it and basically that is it in the
viewdidload setup you can add that. Now let's build and run and see how that
looks. I know this is kind of not that big of a
deal but you can already see that it's under there. So let's just scroll all the
way up and yeah it is not bouncing because of the headers and footers but
you already see that maybe let's remove one of this and if you have padding's
so maybe let's add, no let's not add a parent let's remove just one cell so you
can see that it is in there. If you have paddings or maybe you have more yeah
there we go. How awesome is that and now you can see
how important it is to have home indicators so let's just home indicator
view at home indicator view with color of purple and what I will do now
let just we have a few more minutes here so let's add in here 10 and 10 and then
we just want to remove 20, yep 20 it is. So let's build and run now and see how
that looks and maybe let's add padding to just to top
it off. So there we go. 20 how awesome is that, okay. You can see
that banner is back there. So let's add padding right now just to finish this
off way I know it's kind of ugly but let's add a padding of 100 on top let's
see on the left 50 and on the right 50 and now we need to remove those two 50s
so I will remove 100 there so we can have those free cells aligned correctly.
Okay! Let's just build and run there yeah and you can see we have our padding
there padding top left and right yeah just so you know I know it looks kind of
ugly but you get the idea you know how this will work, okay. Now that is it for
me today. I hope you enjoyed this video if you did
go ahead and give it a thumbs up, subscribe to the channel and hit that
notification bell to get notified of new videos as they come out. Now I will
leave you with lists for now in the next episode I will show you how you can add
a list within a handler, so that is the ultimate list creation so I will see you
in the next one.