Simple UICollectionView in iOS 14
Apple has made new powerful updates for UICollectionView. With UICollectionViewCompositionalLayout.list and UICollectionViewListCofiguration, UICollectionView has become more customisable to use.
When paired with UICollectionViewListCell, UICollectionView now support features that used to only be available to UITableView only. For instance, now you can now add swipe actions and set its accessories on a cell like a disclosure indicator.
We’ll see how to implement this feature with some additional ideas to our simple example.
Our example is about two sections, when select an item at the first section it refresh or reload the second section.
Let’s start coding.
Starting with modelling we will display list of products related to its category,
And the model for collection view sections that is using enum ,
And now until this step we finished modelling, and we need to achieve the last step in our model, we will add a static data in Categories.swift , So the final look for our file here,
It’s clear that every category in our enum is linked to it’s category , so when you working with multi sections or dynamic section, you should implement it with clear relations between enum & struct .
And now let’s start with ViewController.swift and to see how to configure the collection view with our data, First we declare two vars first one will be the normal UICollectionView and second UICollectionViewDiffableDataSource this is the DataSource that will give our collectionView the data to be render as a list,
Now we will create two methods, the first is will create UICollectionView and add it as subView and the second will specify the layout for each section (horizontal or list) to our collection based on section index.
Now we will add 3 methods, and it’s easy to know what they do, But i will tell the summery for them, They just specify the cell in each section and the data they will represent from dataSource,
Now we will call the methods in the configuration of our dataSource to tell our collectionView what the cell should be called in each section,
We’ve finished all configuration steps, And it time to dive into small logic that we will talk about,
First, we called the sections that we created in (enum Section) then we append them for dataSource by create NSDiffableDataSourceSnapshot and append the sections into snapshot then apply them to dataSource which will notify the collectionView for updates every time we apply change to dataSource.
Second, we called the main categories that will be displayed as horizontal list to the first section, And here we apply change by specify which section will show the items in dataSource.
Third, we do the same of second step but with specifying the root for items, it is the way to specify the relation between the categories and products.
Last thing we need to do is to handle the selected item in the horizontal section to refresh the second section,
Here, we check the current section and get the selected category and call its items then apply them to dataSource.
After we finish all steps you can run the code and see the result and how it is working fine with new features of UICollectionView.
Conclusion
For more information, I recommend checking out the following WWDC session videos: https://developer.apple.com/videos/
Code for this tutorial:
