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.