UICollectionView Compositional Layout With Diffable Data Source & Multiple Data Types.
In this article I’m going to talk about the new Apple API for diffable data source that is available since iOS 13.
I tried using the api and following the guidelines of apple but there were a problem, i wanted to implement the new API, But with dynamic sections and also dynamic item to use in the collection view, So that’s what i’m going to explain how i did it.
we are going to build this.
Basically the app shows two sections first of them is Movies section and
the other one is the categories section.
First, defining the entities of data:
note: that model used in the collectionView data source must conform to Hashable protocol so every item is unique.
After that we are going to define methods to get our data from the API, for the purpose of the article we will fetch data from local json files.
These couple of function just reads the files and using Codable it returns the data needed for each of our sections (Movie type, Category type).
Now let’s get our hands dirty.
we define our data source:
var dataSource: UICollectionViewDiffableDataSource<Section<AnyHashable, [AnyHashable]>, AnyHashable>?
let’s break this
the new api of DiffableDataSource takes two types the first one is the section type and the second is the type of item used in collectionView, we agreed that we want our item type to change in different sections, as we have in the first section Movie type, and the second section we have category type.
I mentioned earlier that our model must conform to Hashable protocol, then it’s safe to say our Item type to be used is AnyHashable as both Movie and Category are Hashable.
let’s get to the section type part:
I made a custom section type that contains both section and items for each section so that our section type be dynamic and can hold multiple sections.
now let’s define our sections
we have two section types:
Each section consists of the section header title and the data of the section.
after we knew our sections, now we define our data source :
let’s see what we did here:
we check the type for each section to define which cell we will render, this is new way of diffable data source definition in a collection view to return cell type.
we can also configure header and footer type for collection view using the following:
now we are going to configure our Layout:
the layout is per section so let’s break it down, in Compositional Layout we define our layout from the most inner item all the way back to section layout,
first thing will be the item, but we need to define its size first NSCollectionLayoutSize, but what does fractionalWidth(1.0) mean?
it means that the width of the item will be 1 of its parent, same applies for fractionalHeight(1.0)
second thing will be the group containing the item :
let group = NSCollectionLayoutGroup.horizontal( layoutSize: groupSize, subitems: [item])
it means the group will be horizontal containing item type.
last the section layout, it takes only the group we defined earlier and we can add more option like group spacing and section content insets.
we can also add the layout for header and footer here.
now let’s populate our collection view:
we get the data and make the section model we defined earlier and add it to the collection view:
data is added to the dataSource via SnapShot that holds the section and items for each section, here i defined custom type DataSource to help get section and items.
struct DataSource<T: Hashable> {
let sections: [T]
}
we use append section and append items to pass data to snap shot and finally we apply to render our collection view.
Thank You! hope you enjoyed
full project: https://github.com/ahmedelmoughazy/DiffableDemo.git
