Are you terrified of adding data to your UICollectionViewController? Alex here
from rebeloper.com and fear not, because in this video we are going to use
UICollectionViewController diffable data sources to sort all of your
problems out. So SUBSCRIBE to the channel, open up Xcode and let's just dive in.
So let's take a look at the data source part of our UICollectionViewController
that Apple has introduced and it's really amazing. In the previous
video I have talked about the layout. We have set up the collection view and we
have created our custom layout. So go ahead and take a look at that if you
haven't already done so. We have some resources there so yeah make sure to
check out that. Now in this video we are finally going to make it all work
together and create the data source. So make sure you are in the collection view
controller dot Swift file and just scroll a little bit up and you can see
that the first to do is add the data source and the data source snapshot
typealias. We are going to use the app typealiases because it's much easier to type out
code, well it's much easier to look at. So let's just add these two typealiases and
the first one is the data source. So typealiases and I will name this data source
and we are going to create and we are going to use a UICollectionView,
collection view oh UI not cool action. It is a cool action collection view
controller but it needs to be a data source, there we go.
UICollectionViewDifficultDataSource. This is what we want so yeah make sure you got
that and then add the section and add a contact. Now a section we have already
created these sections. So that's the section that we are going to use.
So section and the data that we are going to populate
it with is the contact. So contact, there we go. Go ahead and take a look at the
downloaded resources or maybe the previous video that explains all of this.
Now the next one we want to create a typealias for our datasource snapshots.
So typealiases data source, let's have that with capital S
snapshot, okay. And that will be an NSDiffableDataSourceSnapshot. I know
it's quite a lot but yeah we will get a custom to that. So NSDiffableDataSourceSnapshot
and again we are going to use a section and a contact, okay.
So that's that. We are ready with the typealiases because we are going to use them
in just a moment. So we don't have to type all of this out every time we use them.
Next up we need to create a data source and the snapshot. Well basically
we are just going to kind of declare them and they could be private because
maybe we have some in some other places data sources and snapshots. So data source,
private var sorry. Private var data source and that will be a data source.
That we have just set up as typealias and that needs to be declared. So that's why
I'm banging it out here. So again private var and we're just going to initialize
the snapshot as is. So snapshot
equals data sources snapshot, there we go. And we are initializing it, okay.
So that's for the setup part. Now if you just take a look at the configure
collection view data source and just scroll a little bit down you'll see it's
in empty. So we need to populate that and it's quite easy, basically we want to
create well initialize the data source. So let's just type out data
source and as you can see it needs to be alive initialized and that will be a
simple data source. So that is where we are using this data source so it's much
easier and we are going to use collection view with a cell provider and
so on, so just choose this one. The collection view will be simply the
collection view that we have declared and the cell provider let's just hit a
return here and as you can see it returns a UICollectionView, an index path and the
contacts. So basically we are cutting back three things and we are using them
all of them and it's really awesome. So collection view and index path and let's
see here contact. Now what we want to change here
is that this will not be a simple UICollectionViewCell. This will be a
contact cell. So contact cell, there we go. Now let's dequeue our cell. So let cell equals
collection view dequeue reusable cell with reuse identifier and if you recall and
that's in the contact cell dot reuse identifier and for index path this is
just a simple index path, index path that we have here and now we want to
explicitly say as contact cell. I believe this is not that unfamiliar
for you and finally if you take a look at the contact cell there is a
configure function there with the contact. That basically adds in the info
that we have here the contact model and displays it in the cells. So cell dot
configure with contact and we add in their contact. Finally we have to return
our cell, okay. Now that's that, okay. We have considered our datasource. What we
still need to do when you take a look at this create a dummy data because we are
going to do that with a dummy data first. We have this apply snapshot. So once we
configure the data source we need to take a look at the changes that we have
and the changes are that we had all of these dummy contacts to the snapshot and
then apply them. And this applies snapshot is right down here and finally we
are just going to write this and hopefully we will have some data shown
in the simulator. So we have created the snapshot. So snapshot equals and data
source snapshot and there we go and now we want
to append at the section and the items and then we apply them to the snapshot.
We applied to the data source, okay. So let's just type it out it's much easier.
So snapshot append sections, there we go. And again this is an array so we are going to add
in your section that main snapshot append items and again this will be an
array but because contacts is an array we have our contacts and contacts is
right over here. We apply that with the snapshot and finally on the data source
we apply and we are not going to listen for the completion for now. We have this snapshot
and maybe animating difference is set to false, okay. And that should do it.
Let's just build and run and see all of our a dummy data. I know it's been a
long, long coding session, 2 videos long but finally we will see some data and
it's kind of long but once you get a hang of it you have the advantages to
build out all of these cool layouts. So what we do have here is the name contact 0
and then we created an example0@gmail.com and we are fetching that
adorable avatar according to this email. So that's what you see here, okay.
How awesome is that. And of course this is scrollable if we
just set it to let's say 20, let's just hit command R again. As you can see here is
our email and we are fetching it all of those. How awesome is that.
Okay! Now finally we want to check out once we tap on a cell what do we have to do.
And that's pretty straightforward we just need to scroll a little bit up
to the did select item. Yes! Let's go up here and as you can see here we just
want to grab the contact because now we have these identifiers we don't have
index paths but there's a cool way to grab the contact from the index path
that we have selected. And it will return an optional so we want to guard let
unwrap it. Let's say contact equals and here you have your data source and
it's pretty simple. Item and data identifiers for index path, there we go.
And the index path it's the index path that we get from under did select item
add and else let's just return here and we just want to print out the
contact, okay. That's how simple it is. You don't have
to loop throw an array and let just remove that W. So you don't have to remove, you don't have to move
through the array and grab the index path you just grab it with item
identifier for index path and there we go. Let's just get there and let's see
what we got here. Contact 0 name, let me just do another
one let's say contact 3, there we go. contact 3 we just tapped on it, you
can navigate away you do whatever you want with that contact and finally let's
just make this a little much more fun. Let not just create a dummy data but fetch
items and if we just scroll a little bit down we see that is fetching some data
and yeah it is just getting the API URL and fetching all of that and then once
we get that JSon we are applying the snapshot and it's the same. So adding,
applying the snapshot to the datasource. Okay and again this is just a list of
contacts and this API URL is let's just scroll all the way up from the
jsonplaceholder.tyicode.com. If you take a look at the first video you will see
where this is from. So let's just build again and now using it with live data
from the JSon placeholder, okay. And there we go we have 10 here.
Let's just build and run again, there is some issues with
downloading that image but yeah there we go this is from that database. Now this
is how easy it is to create collection views the new way with diffable data sources.
So now you know how you can populate your UICollectionViewControllers
with data sources, how awesome is that. I want you to hit that
notification bell because in my next video I am going to talk about
iOS application lifecycle in 2020. Now while you wait for that make sure to check out
these two videos as well. I talked a lot about SwiftUI, UIKit and
Swift in general and as usual I will see you in the next one.