In iOS 13 and 14 Collection Views got a lot more powerful and easy to use. Now in iOS 14 the use of UITableView is discouraged and is sure to be deprecated. In this series we'll cover how to use these new APIs. We'll learn about compositional layout, cell registration, new list layout, diffable datasources and snapshots and more.
Length: about 2 hours
In this episode we review the basic example app and start setting up our collection view in code. We start with the basic flow layout which is most common. Later we'll refactor this to use the newer style, but this episode introduces the series and sets up the foundation we'll build upon.
In this episode we migrate our collection view to use the new cell registration API. Using this API we no longer need to cast dequeued cell types to our custom types. Instead, we set up the registration object with the cell type and the data we'll be passing to each cell. This further reduces the code we have to write in our datasource implementation and gives us more flexibility on how and where cells are configured.
With UITableView no longer being encouraged for use, we need to replace this behavior with UICollectionView. This is where UICollectionViewListLayout comes into play. Using this layout we can get the familiar table view appearance in plain and grouped styles (as well as additional styles to support sidebars on iPad and macOS). This includes support for sticky headers and footers, swipe actions, and other UITableView behaviors that we've come to rely on.
First introduced in iOS 13, UICollectionViewCompositionalLayout is an amazing and powerful addition that gives you lots of flexibility when describing layouts. There are a few new types to get used to (namely sections, groups, and items) but they all work together allowing you to keep layout separate from your views and your data.
Diffable datasources provides a great API for driving your collection view updates in a transactional, state-driven way. We no longer have to manually call insert/delete/move rows when the data is changed. Instead, we apply a new snapshot and the changes are made for us, including animations.
In this episode we'll make a custom header view to give some of our sections a title. The approach we use here with compositional layout is more flexible than with UITableView. We'll start with a UICollectionReusableView implementation for our header, add the desired item to our layout, and then vend the desired view using the datasource's supplementaryViewProvider.
Our Diffable Datasource and snapshots are generic over the type of data that we pass to the cells. So how can we make sections with completely different data? In this episode we'll cover one approach which involves defining an enum with associated data for each of the sections. We'll use this to add a Series strip of data mixed in with our collection view.
One of the things you'd get for free with UITableView in the grouped style is a nice rounded rect background around your sections. With UICollectionView, you can implement these with background decoration views. We'll see how to set these up in our compositional layout to give the series section a different feel.
Not every layout will be appropriate for every screen size. In this episode you'll see how you can use the layout environment when constructing your compositional layout to provide a more suitable layout for iPad.
Using Item Anchors we can position decoration views anchored to our layout items. This is could be used to outline or underline items, or in our case to add a little unread indicator badge to our items.