In our last lesson, we created a custom cell for our table view. There was nothing inherently wrong with the steps we took to do it, but there are times when there are better ways. However, the fundamentals of what we learned in Lesson 013 are very important in order for us to move forward.
In order to get started, I’m just going to copy the finished project from Lesson 013 over into a new folder and rename it for Lesson 014. You can make a copy if you’ve been following along, or you can head over to our GitHub repo and pull down the code for Lesson 013 and begin there.
What’s the Issue?
Last time, we defined our custom cell right within our UITableView, which was within a very specific storyboard, Main.storyboard.
The issue here is that if we want to ever use the custom cell in other UITableViews, we would have to make a new prototype cell on that other UITableView and have to design the cell again. Now, the code portion is safe for reuse. Remember, we defined that in a completely separate file called NinjaCell.swift. In order to make this custom cell completely reusable in other storyboards and even other projects, we need to set up the cell another way.
Remove the Old Prototype
For step one, we are going to select the UITableView on the screen and change the number of prototype cells from 1 to 0 as shown here.
Create the New Prototype
Now, we need to right click on our project folder in the Project Navigator and select New File. Choose iOS -> User Interface -> Empty and click Next.
Name the file NinjaCell.xib and click Create.
Now, go into the Object Library and drag a UITableViewCell onto the canvas.
Drag an ImageView and a Label onto the cell and lay it out like we did for the previous custom cell in Lesson 013. All of the next few steps should be identical to what I did to lay out the cell in Lesson 013. If you are having any trouble, go back and watch that video for more detailed instructions.
Select the ImageView and then add the correct constraints.
Now select the Label and add its correct constraints.
Next, make sure the UITableViewCell is selected and then set its custom class to NinjaCell.
Wire up the outlets.
The Sum Total of Code Changes
Go into the ViewController.swift file and add this code to the bottom of the viewDidLoad method, after the array populations.
let nib = UINib(nibName: "NinjaCell", bundle: nil)
tableView.registerNib(nib, forCellReuseIdentifier: "ninja")
That code just creates an instance of the nib we just created (I know the extension is .xib, it is some UIKit weirdness) and then it registers that nib with the tableview with the reuse identifier that we had previously declared on the storyboard. And that is all there is to it. Since we registered the custom cell and gave it the same reuse identifier, we literally don’t have to change any more code. And when we run the project, we can see that it is functional.
Declaring your custom cells like we did in this lesson is a far more extensible and portable way than how we did in Lesson 013. However, if you are defining a cell that you will only ever use in one place, there is no problem with just declaring it alongside the UITableView right there in the storyboard. Remember that the code for these lessons is on GitHub and if you have any questions, please leave them in the comments below.