Did Apple Just Kill UITableView?

Build Lists in UICollectionView // WWDC style

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)

could never compete with a for ease of use, reordering and deletion. That’s never going to change. Wait. What? . 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 where we can treat this list as a — including removing items. We are going to use , updating a , 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 the question to be answered will be — Do we need to EVER use 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).

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

Configuring the collection view

At the class level, we have a dataSource and collectionView

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

which is then setup in

Click for Gist

The layout

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

Click for Gist

The data source

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:

Click for Gist

which is then setup in with

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

The cells

This example uses both a standard and a custom cell called — 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 , and to do so we will need to register the cells.

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

Cilck for Gist

The main part of the code here is using for the and my own function for the that sets the to the fed into the cell.

For Xcode 12 Beta 1:

The 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 , and then apply the difference.

For Xcode 12 Beta 2:

The cell no longer has in beta 2.

For example this gives us the following

Click for Gist

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

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 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