Modern Collection Views

Overview

Dynamic TypeEvent KitQuick LookApp IdeasKeyboard PreviewModern Collection Views


Modern Collection Views

Twitter: @nemecek_f License

My playground for trying stuff with compositional collection view layout and diffable data source.

The goal is to showcase different compositional layouts and how to achieve them. Feel free to use any code you can find and if you have interesting layout idea - open PR!

Please don't take these examples as the only correct way how to work with these APIs. I am still figuring them out and experimenting.

Check out my blog for posts about Compositional Layout and Diffable Data Sources or any other iOS development topics :-)

For more about NSCollectionLayoutGroup which lets you create layouts as shown below, check out this post.

CL-groups-example

Included examples

The project currently offers these example screens.

Layout examples

  • List layout - list created with Compositional Layout (CL) for iOS 13+
  • Simple grid - grid layout with option to change sizing and see it animate the change (see GIF below)
  • Lazy grid example - this grid starts with 12 items and when you scroll at the end it "loads" more (see GIF below)
  • Background decoration - this shows how to add background views to section in CL layout. For example you can use this to create layout similar to inset & grouped TableView [article]
  • System list - quick example of creating list layout with the API available from iOS 14
  • Onboarding flow - simple example showcasing creating onboarding with Compositional Layout [article]
  • Sticky headers - example showing how to configure headers to be pinned or sticky. Similarly what UITableView offers [article]
  • Responsive layout - example how to create responsive layout such that the items will retain approximately the same size across various devices [article]

More complete examples

  • Jokes list - this is more an example of Diffable Data Source that is used to display random jokes from an API and also favorited ones that are stored using Core Data. This also shows how to add headers to CL and loading effect. There is also context menu on the items and text-to-speech (because why not?)
  • Badges example - example showcasing adding badges to collection view cells and their positioning [article]
  • Instagram profile screen - this practical example shows how to build screen similar to Instagram profile with Compositional Layout and Diffable. You can read more on my blog

Free free to reach out over at @nemecek_f with issues, questions or anything else.

Apple Photos inspired layout with animations

Compositional Layout - Photos optimized

Instagram profile

Instantgram comparisson

Resizable grid

Resizable Grid Example

Lazy loaded grid - ideal for paging

Lazy Grid

Jokes list with loading indicators

Jokes Loading Shimmer

Badges

Compositional Layout - supplementary views example

Onboarding

Compositional Layout - onboarding example

Sticky headers

Compositional Layout - Sticky headers

You might also like...
Modern Collection Views
Modern Collection Views

The goal is to showcase different compositional layouts and how to achieve them. Feel free to use any code you can find and if you have interesting layout idea - open PR!

A Swift utility to make updating table views/collection views trivially easy and reliable.

ArrayDiff An efficient Swift utility to compute the difference between two arrays. Get the removedIndexes and insertedIndexes and pass them directly a

Highly configurable iOS Alert Views with custom content views
Highly configurable iOS Alert Views with custom content views

NYAlertViewController NYAlertViewController is a replacement for UIAlertController/UIAlertView with support for content views and UI customization. Fe

Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views
Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views

StatusProvider Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views CocoaPods Podfile pod 'StatusProvider'

Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple
Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

ChainPageCollectionView  A custom View with two level chained collection views and fancy transition animation
ChainPageCollectionView A custom View with two level chained collection views and fancy transition animation

ChainPageCollectionView A custom View with two level chained collection views and fancy transition animation. Demo Requirements iOS 9.0+ Xcode 8 Insta

This component allows for the transfer of data items between collection views through drag and drop
This component allows for the transfer of data items between collection views through drag and drop

Drag and Drop Collection Views Written for Swift 4.0, it is an implementation of Dragging and Dropping data across multiple UICollectionViews. Try it

Easy and type-safe iOS table and collection views in Swift.
Easy and type-safe iOS table and collection views in Swift.

Quick Start TL;DR? SimpleSource is a library that lets you populate and update table views and collection views with ease. It gives you fully typed cl

A mirror of Apple's sample code for high performance collection views in iOS 15.

Building High-Performance Lists and Collection Views Improve the performance of lists and collections in your app with prefetching and image preparati

TLIndexPathTools is a small set of classes that can greatly simplify your table and collection views.

TLIndexPathTools TLIndexPathTools is a small set of classes that can greatly simplify your table and collection views. Here are some of the awesome th

This component allows for the transfer of data items between collection views through drag and drop
This component allows for the transfer of data items between collection views through drag and drop

Drag and Drop Collection Views Written for Swift 4.0, it is an implementation of Dragging and Dropping data across multiple UICollectionViews. Try it

Easy and type-safe iOS table and collection views in Swift.
Easy and type-safe iOS table and collection views in Swift.

Quick Start TL;DR? SimpleSource is a library that lets you populate and update table views and collection views with ease. It gives you fully typed cl

ListPlaceholder is a swift library allows you to easily add facebook style animated loading placeholder to your tableviews or collection views.

ListPlaceholder ListPlaceholder Facebook news feed style animation Features ListPlaceholder is a swift library allows you to easily add facebook style

A collection of Swift functions, extensions, and SwiftUI and UIKit Views.

J's Helper A collection of Swift functions, extensions, and SwiftUI and UIKit Views. Legend: 🔸 UIKit 🔹 SwiftUI 🔺 Shared Installation In XCode 12 go

Reframing SwiftUI Views. A collection of tools to help with layout.
Reframing SwiftUI Views. A collection of tools to help with layout.

Overview A Swift Package with a collection of SwiftUI framing views and tools to help with layout. Size readers like WidthReader, HeightReader, and on

Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts.
Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts.

Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts. It comes

MerchantKit - A modern In-App Purchases management framework for iOS developers

MerchantKit dramatically simplifies the work indie developers have to do in order to add premium monetizable components to their applications. Track purchased products, offer auto-renewing subscriptions, restore transactions, and much more.

Default is a Modern interface to UserDefaults + Codable support
Default is a Modern interface to UserDefaults + Codable support

Default is a library that extends what UserDefaults can do by providing extensions for saving custom objects that conform to Codable and also providing a new interface to UserDefaults described below, via the protocol DefaultStorable. You can use only the Codable support extensions or the DefaultStorable protocol extensions or both. (or none, that's cool too)

Swifty and modern UserDefaults

Defaults Swifty and modern UserDefaults Store key-value pairs persistently across launches of your app. It uses NSUserDefaults underneath but exposes

Comments
  • Estimated size freeze and terminal error log

    Estimated size freeze and terminal error log

    Hello. On Xcode 13 and iOS 15 cells don't always stretch to fit the content. Sometimes it fit to estimated size and after scroll cell off screen and return to it - solve the bug. Plus every time when cell jump to fit content size on terminal printed this error: CompositionalDiffablePlayground[27245:411402] [UICollectionViewRecursion] cv == 0x7ff260979000 Disabling recursion trigger logging

    opened by saparfriday 1
  • [Question] Horizontal scroll

    [Question] Horizontal scroll

    Hey, @nemecek-filip Thanks for the article.

    I recently faced a bit similar task but ended up resolving it without compositional layout. So the question is, is there any possibility to have a horizontal scroll in the photos section (slice D from the article), so you scroll among tabs from the header?

    opened by rnkyr 6
  • [Question] Multi column layout with auto-sizing elements but the rows are filled

    [Question] Multi column layout with auto-sizing elements but the rows are filled

    Is it possible with the Compositional Layout to define a layout which fulfills all the following criteria:

    • Multi-column
    • The cells are auto-sizing
    • Each cell in the row will fit into the row (picks up its largest possible size)
    opened by chosa91 12
Owner
Filip Němeček
Mostly iOS development, occasionally Django. Current project: https://iOSFeeds.com
Filip Němeček
This component allows for the transfer of data items between collection views through drag and drop

Drag and Drop Collection Views Written for Swift 4.0, it is an implementation of Dragging and Dropping data across multiple UICollectionViews. Try it

Michael Michailidis 508 Dec 19, 2022
Easy and type-safe iOS table and collection views in Swift.

Quick Start TL;DR? SimpleSource is a library that lets you populate and update table views and collection views with ease. It gives you fully typed cl

Squarespace 96 Dec 26, 2022
A Swift mixin for reusing views easily and in a type-safe way (UITableViewCells, UICollectionViewCells, custom UIViews, ViewControllers, Storyboards…)

Reusable A Swift mixin to use UITableViewCells, UICollectionViewCells and UIViewControllers in a type-safe way, without the need to manipulate their S

Olivier Halligon 2.9k Jan 3, 2023
Easy way to integrate pagination with dummy views in CollectionView, make Instagram "Discover" within minutes.

AZCollectionView Controller Features Automatic pagination handling No more awkward empty CollectionView screen AZ CollectionVIew controller give you a

Afroz Zaheer 95 May 11, 2022
A SwiftUI collection view with support for custom layouts, preloading, and more.

ASCollectionView A SwiftUI implementation of UICollectionView & UITableView. Here's some of its useful features: supports preloading and onAppear/onDi

Apptek Studios 1.3k Dec 24, 2022
Custom transition between two collection view layouts

Display Switcher We designed a UI that allows users to switch between list and grid views on the fly and choose the most convenient display type. List

Yalantis 2.3k Dec 14, 2022
Generic collection view controller with external data processing

FlexibleCollectionViewController Swift library of generic collection view controller with external data processing of functionality, like determine ce

Dmytro Pylypenko 3 Jul 16, 2018
Lightweight custom collection view inspired by Airbnb.

ASCollectionView Lightweight custom collection view inspired by Airbnb. Screenshots Requirements ASCollectionView Version Minimum iOS Target Swift Ver

Abdullah Selek 364 Nov 24, 2022
A component to quickly scroll between collection view sections

SectionScrubber The scrubber will move along when scrolling the UICollectionView it has been added to. When you pan the scrubber you 'scrub' over the

Elvis 190 Aug 17, 2022
A custom paging behavior that peeks the previous and next items in a collection view

MSPeekCollectionViewDelegateImplementation Version 3.0.0 is here! ?? The peeking logic is now done using a custom UICollectionViewLayout which makes i

Maher Santina 353 Dec 16, 2022