others-how to solve the blank-showing problem when testing custom TableViewCell with real iphone device ?

1. Purpose

In this post, I would demo how to use custom TableViewCell and how to solve the blank-showing problem when testing with the real iphone device.

This is the final result:

2. Environment

• Mac OS 10.15
• Xcode 12
• Swift 5

3. Steps to add custom tableviewcell to a TableViewController

3.1 The inital setup of Story Board

Suppose we have set up a story board like this:

The initial view controller is a NavigationViewController, which would add navigation bar to our view controllers.

The second view controller is a normal view controller which contains a button for test.

The third view controller is a TableViewController.

3.2 Create custom TableViewCell

To display custom cell in TableViewController, we must create our own custom TableViewCell class and xib file to tell the device how to layout it.

3.2.1 Create TableViewCell class and xib file

Click File –> New –> File …

Choose cocoa touch class

Please make sure you have checked the ‘Also create XIB file’ option, we create xib file to create custom layout for our cell, but what is a XIB file?

A xib file usually specifies one view controller or menu bar. A storyboard specifies a set of view controllers and segues between those controllers. Unlike a xib, a storyboard can contain many view controllers and the transitions between them

Using isolated xibs (a xib per view controller) is better than storyboards by several reasons: They help to avoid git merge conflicts. You will continue to have merge conflicts if you are working in the same view controller as the other developer, but that is far less common than working in the same storyboard

3.2.2 Create custom layout for our custom cell

Now click the xib file in the project, and create our layout like this:

3.2.3 Set our custom table cell identifiers

Click the xib file , and set the class of it in the identifier inspector like this:

And also set the identifier in the attributes inspector like this:

What is a identifier of the cell?

Reuse identifiers facilitate the creation and recycling of your table’s cells. A reuse identifier is a string that you assign to each prototype cell of your table. In your storyboard, select your prototype cell and assign a nonempty value to its identifier attribute. Each cell in a table view must have a unique reuse identifier.

3.2.4 Create custom class for TableViewController

In order to use custom table view cell in table view controller, we should create a custom TableViewController class to do some customizations on it.

Click File –> New –> File …

Choose cocoa touch class

Then set the custom class of our original TableViewController in the story board like this:

3.2.5 Now configure to use custom cell in custom table view controller

Now select the newly created MyTableViewController.swift in the left panel, open the code editor, and program like this:

override func viewDidLoad() {
        super.viewDidLoad()
  
        tableView.register(UINib.init(nibName: "MyTableViewCell", bundle: nil), forCellReuseIdentifier: "mycell")
    }

In the above code, we bind the custom cell to the custom xib file.

Then set up the cell reuse in the ‘cellForRowAt’ function :

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "mycell", for: indexPath) as! MyTableViewCell
        return cell
    }

3.2.6 Now run the test app

Run the app, we got this in the simuator:

But when we test in real iphone device, we get this:

The custom cell is not showing in real device, just show a blank table view. Why this happens? How to solve this problem?

4. Solution

4.1 Method #1: Restart your xcode and iphone

click Product –> Clean Build Folder , and remove the test app in your phone, and restart xcode and iphone.

4.2 Method #2: Create a brand new custom cell

If the first method doest work, you can try to delete your old cell class and xib files, then create a new custom TableViewCell and XIB file again. Just repeat the steps and test again.

Now it works!

4. Summary

In this post, I demonstrated how to solve the blank-showing problem when testing custom table view cell in real device.