DEV Community

Filip Němeček
Filip Němeček

Posted on

1 1

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

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more