Using different cell type in different sections of iOS table view

Question

I am testing how to use different cell types for different sections in UITableView. I have created a project for that. The story board looks like this:

As you can see, I have inserted two prototype cells with a slight different in there appearances. Here is my view controller:

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    @IBOutlet var tableView: UITableView!
    var firstSection = "first title"
    var secondSection = ["second title", "third title"]

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.dataSource = self
        self.tableView.delegate = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if section == 0 {
            return 1
        }
        return secondSection.count
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.section == 0 {
            let cell = self.tableView.dequeueReusableCell(withIdentifier: "first_cell", for: indexPath) as! FirstCell
            cell.title.text = self.firstSection
            return cell
        }
        else {
            let cell = self.tableView.dequeueReusableCell(withIdentifier: "second_cell", for: indexPath) as! OtherCell
            cell.title.text = self.secondSection[indexPath.row]
            return cell
        }
    }

    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        if section == 0 {
            return "Section 1"
        }
        else {
            return "Section 2"
        }
    }
}

And the definition of my two types of table view cells:

class FirstCell: UITableViewCell {
    @IBOutlet var title: UILabel!
}

class OtherCell: UITableViewCell {
    @IBOutlet var title: UILabel!
}

I have made sure to specify class names of the prototype cells in the story board, and set their reuse identifiers. However, the compiled app shows this unexpected behavior:

First, no cells are displayed. Second, under the second section header, there is this grey area with some x inset whose origin I do not know.How can I solve this? Thanks in advance.

Answer 1

You may need to setup the heights of the cells.

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableViewAutomaticDimension
    }

    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableViewAutomaticDimension
    }