UIKit The Series: EP.1 How to custom the UI Table View Cell

Waranchit Chaiwong

5 min readApr 6, 2022

Nibs or Xibs

a nib, also called a xib, is very much like a storyboard expect that it only contain the design for a single item.
NIBs and XIBs are files that describe user interfaces, and are built using interface Builder.
A xib file is compiled into a nib file that is put into your application bundle.

Create custom table view cell on nibs

1. Add a nibs inside your project

add new file in to your project. Choose Empty from User Interface category

Click Next and Create the new file with the name you want.

2. create the view inside nibs

Step 1 : add view object by click the button library(+ button that on the right top) or also you can Press Command-shift-L for open object library as well.

and after that, drag a new Table View Cell on to the canvas.

Step 2 : Drag an image view and labels into the cell so that the cell now loogs like this:

Position the Image View at X: 20, Y: 16, Width: 60, Height: 60
Set The Label Text of the first label to Name, Font to System 18, X: 88, Y: 15, Width: 48, Height: 22
Set The Label Text of the second label to Category name, Font to System 14, X: 88, Y: 45, Width: 99, Height: 17
The Table View Cell itself needs to have a reuse identifier. You can set this in the Attributes inspector to any text that you want but in this article i’m gonna set to CustomCell

Note: Please make sure you already click on the Table View Cell

Use custom table view cell from nib in your code

1. Register nib file

In HomeTableViewController.swift, add these lines to the end of viewDidLoad() :

The UINib class is used to load nibs. Here, you tell it to load the nib you just created. nibname: is receive nib file name, in this article my our nibs file name is CustomCell . so you can put this name into nibsname: "CustomCell" Without specify the xib file extension.

2. Create subclass for connect each ui object in nib to this

Step 1 : add new file in to your project. Choose CoCoa Touch Class from Source category

Click Next. Name it CustomTableViewCell and make it a subclass of UITableViewCell and also create XIB file should be unchecked.

Click Next and Create.

Step 2: add outlet properties to CustomTableViewCell.swift

Open CustomCell.xib and select the Table View Cell and after that In the Identity inspector, change it’s class from UITableViewCell to CustomTableViewCell

Hook these outlets up to the respective label and image view in the nibs

Not that this is all set up, you can tell the HomeTableViewController to use these new CustomTableViewCell.

3. Use it

In HomeTableViewController.swift, change cellForRowAt to:

Run the app

everything is fine, but if you scroll up to our design. above display is not the same as our design. Why ?

Set up Auto Layout Constraints

The table view cell will resize to accommodate those larger screens, but ui object inside the cell won’t to do this. You should have to add some Auto Layout Constraints to make the ui object’s.

Open CustomCell.xib and add constraints to each ui object inside cell