Typed yet flexible Table View Controller

[[163982]]

UITableView is like bread and butter for (almost) all iOS developers. In most cases, we use a UITableViewCell to display a data type and reuse cells through Identifiers. This technique is introduced in objc.io. When we want to use multiple cells of different types in a Table View, the situation is much more complicated. The inconsistency of cells makes it difficult for us to handle.

This article introduces three ways to solve this problem. Each solution attempts to fix the problems caused by the previous solution. The first method is common in many Objective-C code bases. The second method uses enumerations, but it is still not a perfect solution. The third method is implemented using protocols and generics - they are the magic weapons provided to us by Swift.

Base

I will walk you through a demo project (github address). In this example, we create a Table View with two different cells: one cell for displaying text and one cell for displaying images, as shown below:

UITableView showing two types of data (text and pictures)

When rendering a view, I like to use value types to encapsulate data. I call this view data. Here, we use two view data:

 struct TextCellViewData {
 let title: String
 } 
  
 struct ImageCellViewData {
 let image: UIImage
 }

(In a real project, there may be more properties; the image property should be declared as NSURL to avoid dependence on UIKit.) Correspondingly, we also need two types of cells to display these two types of view data:

 class TextTableViewCell: UITableViewCell {
    func updateWithViewData(viewData: TextCellViewData) {
        textLabel?.text = viewData.title
 }
 } 
  
 class ImageTableViewCell: UITableViewCell {
    func updateWithViewData(viewData: ImageCellViewData) {
        imageView?.image = viewData.image
 }
 }

Then, we start to enter the View Controller.

***Method: Simple method

I don't like to talk about complicated things at the beginning. At the beginning, I will talk about a simple implementation to display something on the screen.

We want the Table View to be driven by the data in the array (the items array, to be precise). Because our data is two completely different structures, the array type can only be [Any]. In the registerCells() method, we use the standard cell reuse mechanism to register the cell in advance. In the tableView(_:cellForRowAtIndexPath:) method, we create a cell based on the type of view data corresponding to the specified IndexPath. The complete implementation of our View Controller is very simple (for simplicity, we use ViewController as the data source of the Table View. In a real project, we may need to extract the data source into a separate object.):

 class ViewController: UIViewController { 
  
 @IBOutlet weak var tableView: UITableView! 
  
 var items: [Any] = [
        TextCellViewData(title: "Foo" ),
        ImageCellViewData(image: UIImage(named: "Apple" )!),
        ImageCellViewData(image: UIImage(named: "Google" )!),
        TextCellViewData(title: "Bar" ),
 ] 
  
    override func viewDidLoad() {
 super .viewDidLoad() 
  
        tableView.dataSource = self
 registerCells()
 } 
  
 func registerCells() {
        tableView.registerClass(TextTableViewCell.self, forCellReuseIdentifier: textCellIdentifier)
        tableView.registerClass(ImageTableViewCell.self, forCellReuseIdentifier: imageCellIdentifier)
 }
 } 
  
 extension ViewController: UITableViewDataSource { 
  
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 return items.count
 } 
  
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let viewData = items[indexPath.row] 
  
 if (viewData is TextCellViewData) {
            let cell = tableView.dequeueReusableCellWithIdentifier(textCellIdentifier) ​​as! TextTableViewCell
            cell.updateWithViewData(viewData as! TextCellViewData)
 return cell
 } else   if (viewData is ImageCellViewData) {
            let cell = tableView.dequeueReusableCellWithIdentifier(imageCellIdentifier) ​​as! ImageTableViewCell
            cell.updateWithViewData(viewData as! ImageCellViewData)
 return cell
 } 
  
 fatalError()
 }
 }

This approach works, but I am not happy with it for at least the following reasons:

• We can't reuse this ViewController. If we want to add a new type of cell, such as one for displaying videos, we have to modify the code in three places:

1. Add a new reusable Identifier

2. Modify the registerCells() method

3. Modify the tableView(\_:cellForRowAtIndexPath:) method

• If we modify items and provide it with a type of view data that we cannot handle, we will trigger a fatalError() in the tableView(\_:cellForRowAtIndexPath:) method.

• There is a relationship between view data and cells, but this relationship is not reflected in the type system.

The second method: enumeration

We can add a TableViewItem enumeration type to solve these problems to some extent. In the enumeration, we list all the types supported by view data:

 enum TableViewItem {
 case Text(viewData: TextCellViewData)
 case Image(viewData: ImageCellViewData)
 }

Then change the type of the items property to [TableViewItem]:

 var items: [TableViewItem] = [
    .Text(viewData: TextCellViewData(title: "Foo" )),
    .Image(viewData: ImageCellViewData(image: UIImage(named: "Apple" )!)),
    .Image(viewData: ImageCellViewData(image: UIImage(named: "Google" )!)),
    .Text(viewData: TextCellViewData(title: "Bar" )),
 ]

Then modify the registerCells() method:

 func registerCells() {
 for item in items {
        let cellClass: AnyClass
        let identifier: String 
          
 switch (item) {
 case .Text(viewData: _):
            cellClass = TextTableViewCell.self
            identifier = textCellIdentifier
 case .Image(viewData: _):
            cellClass = ImageTableViewCell.self
            identifier = imageCellIdentifier
 } 
          
        tableView.registerClass(cellClass, forCellReuseIdentifier: identifier)
 }
 }

***, modify the tableView(_:cellForRowAtIndexPath:) method:

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let item = items[indexPath.row] 
      
 switch (item) {
 case let .Text(viewData: viewData):
        let cell = tableView.dequeueReusableCellWithIdentifier(textCellIdentifier) ​​as! TextTableViewCell
        cell.updateWithViewData(viewData)
 return cell
 case let .Image(viewData: viewData):
        let cell = tableView.dequeueReusableCellWithIdentifier(imageCellIdentifier) ​​as! ImageTableViewCell
        cell.updateWithViewData(viewData)
 return cell
 }
 }

Admittedly, this approach is better than the previous one:

• View Controller can only provide view data types specified in the enumeration.

• Use switch statement instead of annoying if statement, and remove fatalError().

Then we can also improve this implementation, such as modifying the reuse and settings of cells to:

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let item = items[indexPath.row] 
      
 switch (item) {
 case let .Text(viewData: viewData):
 return tableView.dequeueCellWithViewData(viewData) as TextTableViewCell
 case let .Image(viewData: viewData):
 return tableView.dequeueCellWithViewData(viewData) as ImageTableViewCell
 }
 }

But the sad thing is, we have to add these switch statements everywhere. So far, we have only used switch statements in two places, but it is not difficult to imagine that it is more than just that. For example, when automatic layout will become unavailable and we have to use manual layout, we must use another switch statement in tableView(\_:heightForRowAtIndexPath:).

It's not that this method can't be used, but I'm still bothered by those switch statements, so I decided to take it a step further.

The third (***) approach: protocols and generics

Let’s completely overturn the first two solutions and start over.

Declaring the Updatable Protocol

Our cell presents different interfaces based on view data, so we define an Updatable protocol and bind it to a type ViewData:

 protocol Updatable: class {
 typealias ViewData 
      
    func updateWithViewData(viewData: ViewData)
 }

Then let our custom cell implement this protocol:

 extension TextTableViewCell: Updatable {
    typealias ViewData = TextCellViewData
 } 
  
 extension ImageTableViewCell: Updatable {
    typealias ViewData = ImageCellViewData
 }

After looking at the first two methods, it is not difficult to find that for each view data object in items, we need:

1. Find out which cell class to use

2. Find out which reuse identifier to use

3. Rendering cells with view data

Define the CellConfigurator structure

Therefore, we declare another structure to package the view data. Use the structure to provide more properties and functions. Let's name this structure CellConfigurator:

 struct CellConfigurator<cell where cell: updatable, cell: uitableviewcell> { 
  
    let viewData: Cell.ViewData
    let reuseIdentifier: String = NSStringFromClass(Cell)
    let cellClass: AnyClass = Cell.self 
      
    ...</cell where cell: updatable, cell: uitableviewcell>

This is a generic structure that uses the type parameter Cell. Cell has two constraints: first, it must implement the Updatable protocol, and second, it must be a subclass of UITableViewCell.

CellConfigurator has three properties: viewData, reuseIdentifier and cellClass. The type of viewData depends on the type of Cell and it has no default value. The values ​​of the other two properties depend on the specific type of Cell (this is a new feature in Swift, it's really great!).

 ...
 // further part of CellConfigurator  
   func updateCell(cell: UITableViewCell) {
 if let cell = cell as? Cell {
           cell.updateWithViewData(viewData)
 }
 }

***, we pass the UITableViewCell instance to the updateCell() method, and we can render the viewData to the cell. Here, we don't need to use the Cell type, because the UITableViewCell object is returned by the dequeueReusableCellWithIdentifier(_:forIndexPath:) method. Phew, such a short implementation, but it's so hard to explain.

Then, create a CellConfigurator instance in the items array:

 let items = [
    CellConfigurator<texttableviewcell>(viewData: TextCellViewData(title: "Foo" )),
    CellConfigurator<imagetableviewcell>(viewData: ImageCellViewData(image: UIImage(named: "Apple" )!)),
    CellConfigurator<imagetableviewcell>(viewData: ImageCellViewData(image: UIImage(named: "Google" )!)),
    CellConfigurator<texttableviewcell>(viewData: TextCellViewData(title: "Bar" )),
 ]</texttableviewcell></imagetableviewcell></imagetableviewcell></texttableviewcell>

Wait, what’s going on? A compile-time error?

Type of expression is ambiguous without more context

That's because CellConfigurator is generic, but Swift arrays can only store the same type, we can't simply put CellConfigurator and CellConfigurator into the same array. This is correct, but it's not what we want.

Aha, wait a minute, we'll get it done. The Cell type parameter is actually only used when declaring viewData. Therefore, we don't need to specify the actual type of Cell in CellConfigurator. Declare a new non-generic protocol:

 protocol CellConfiguratorType {
    var reuseIdentifier: String { get }
    var cellClass: AnyClass { get } 
      
    func updateCell(cell: UITableViewCell)
 }

Modify CellConfigurator to implement CellConfiguratorType:

 extension CellConfigurator: CellConfiguratorType {
 }

Now we can declare the type of items as:

 let items: [CellConfiguratorType]

Compilation passed.

View Controller

Let’s modify the View Controller now. registerCells() can be made simpler:

 func registerCells() {
 for cellConfigurator in items {
        tableView.registerClass(cellConfigurator.cellClass, forCellReuseIdentifier: cellConfigurator.reuseIdentifier)
 }
 }

The good news is that the tableView(_:cellForRowAtIndexPath:) method has also become much simpler:

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cellConfigurator = items[indexPath.row]
    let cell = tableView.dequeueReusableCellWithIdentifier(cellConfigurator.reuseIdentifier, forIndexPath: indexPath)
    cellConfigurator.updateCell(cell)
 return cell
 }

In order to reuse the View Controller, we still have to do some work. For example, we can make the items modifiable from outside the class. I won’t go into details here. You can refer to the final implementation of the framework and demo on GitHub: ConfigurableTableViewController

Conclusion

Let's take a look at how the first solution differs from the first two:

1. When we want to add a new cell, we don’t need to modify the View Controller

2. View Controller is type-safe. If we add a type of view data that the cell does not support, we will get a compilation error.

3. No switch statement is required when refreshing the cell.

It seems that the third method solves all our problems. I think we have made another step forward. A better solution is often "I searched for it for thousands of times, but when I turned around, I found it was in the dim light."

Thanks to Maciej Konieczny and Kamil Kołodziejczyk for reviewing this article.

If you liked this article, follow me on Twitter or subscribe to my RSS.