DEV Community

loading...

Learn compositional collection view layout and diffable data source with example code

Filip Němeček
Primarily iOS developer, I also like Django and Python. And dabble with JavaScript occasionally. Love reading and coffee.
・1 min read

Compositional collection view layouts and diffable data sources are great UIKit additions available for iOS 13 and up. They greatly simplify building collection views (especially those with complicated layout) and populating those collections views with data.

No longer it is needed to manually specify the number of sections and rows and to keep the collection view correctly updated. These new APIs will do much of the hard work for you.
I wanted to get a better grasp on compositional collection views and diffable data sources so I created public repository to share my experiments.

CDP Main screen small

So far I have one main screen with fairly complicated layout. Multiple sections where some are horizontal and items are responsive to fill the width along with screens dedicated for specifics layouts. For example list layout, grid layout with option to change grid cell size and see them animate or lazy loaded grid which is ideal when you need to implement paging of results from API.

CDP Resizable Grid Example

CDP Lazy Grid

I am by no means an expert so please take this code and examples more like a suggestion and inspiration than best practices.

Do you have layout you want to see? Let me know and I can try to implement it.

The project is available on GitHub.

Discussion (0)