Did Apple Just Kill UITableView?

Build Lists in UICollectionView // WWDC style

Image for post
Image for post

Difficulty: Beginner | Easy | Normal | Challenging

This article has been developed using Xcode 12 (beta 1), and Swift 5.2.4

This article has been updated for Xcode 12 (beta 2)

UICollectionView could never compete with a UITableView for ease of use, reordering and deletion. That’s never going to change. Wait. What? UICollectionViewCompositionalLayout.list(using: config). Can you speak English?

Prerequisites:

  • You will be expected to be aware how to make a Single View Application in Swift.
  • You will need to have installed the Xcode 12 (beta) if you are going to create or download the Repo and run it — this uses features of iOS14!
  • I’ve a number of tutorials that can be helpful here: custom cells, optionals, UITableViews, and UICollectionViews and so on: However I’d recommend you read the article and see if it makes sense and then come back and look at the tutorial for the section that isn’t clear to you.

Terminology:

UICollectionView: An object that manages an ordered collection of data items and presents them using customizable layouts

The goal of this article

This article will show a UICollectionView where we can treat this list as a UITableView — including removing items. We are going to use UICollectionViewDiffableDataSource, updating a NSDiffableDataSourceSnapshot, and remove data items when the user slides cells like in any nice App with a half-decent user interfaces.

If we can do all of that with a UICollectionView the question to be answered will be — Do we need to EVER use UITableView again?

The application

This application is going to display the plantes of the solar system. The data to be displayed is the following:

var data = [“Mercury”, “Venus”, “Earth”, “Mars”, “Jupiter”, “Saturn”, “Uranus”, “Neptune”]

Which is going to be displayed on a rather traditional Table (that can be in either orientation).

Image for post
Image for post

This is going to be awe-some (sic).

At the class level, we have a dataSource and collectionView

var dataSource: UICollectionViewDiffableDataSource<Section, String>!var collectionView: UICollectionView!

which is then setup in viewDidLoad().

Image for post
Image for post
Click for Gist

This function can be called from viewDidLoad() and allows us to create our list with an .insetGrouped appearance — and trust me this is the one we want!

Image for post
Image for post
Click for Gist

The idea is to use every other cell as a standard `UICollectionViewListCell` and the other cells as a `BasicCollectionViewCell` . To make the datasource release the right cell at the right time, here is a rather simple peice of logic that does just that:

Image for post
Image for post
Click for Gist

which is then setup in viewDidLoad() with

snapshot.appendSections([.main])snapshot.appendItems(Array(data))dataSource.apply(snapshot, animatingDifferences: false)

This example uses both a standard UICollectionViewListCell and a custom cell called BasicCollectionViewCell — to make it clear how we can use both a standard cell and a custom cell. There is nothing particularly special about my custom cell — but it is blue text in the cell to make it clear which one is which.

Now the idea is that every other cell is a BasicCollectionViewCell, and to do so we will need to register the cells.

To do so, we are going to use the new cellRegistration API:

Image for post
Image for post
Cilck for Gist

The main part of the code here is using defaultContentConfiguration for the UICollectionViewListCell and my own updateWithText(_ titleString: String) function for the BasicCollectionViewCell that sets the UILabel to the String fed into the cell.

For Xcode 12 Beta 1:

The trailingSwipeActionsConfiguration gives us a destructive “deletion” that is the swipe to delete functionality that we are looking for in this article. The custom part of this allows us to delete the item from the snapshot, and then apply the difference.

For Xcode 12 Beta 2:

The cell no longer has trailingSwipeActionsConfiguration in beta 2.

For example this gives us the following registrationUICollectionViewListCell

Image for post
Image for post
Click for Gist

so where has the trailingSwipeActionsConfiguration gone to? It is actually in createLayout() that has been modified to reflect this

Image for post
Image for post
Click for Gist

of course the update can be seen reflected in the Repo .

Conclusion

For this article, the question is do we ever need to use UITableView again? You want the bad news? The APIs used here require iOS14 which means that you can’t yet publish any App on the App store (since Xcode 12 is in beta).

You’re going to have to wait, James

(If your name isn’t James, you’re going to have to wait anyway).

If you want more information about UICollectionView I’d recommend you watch this WWDC video, or of course look at the “traditional” form of UICollectionViews with my tutorial.

The code from this is included in the attached Repo.

If you’ve any questions, comments or suggestions please hit me up on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store