Customizing Table View iOS Tutorial

Multiple attributes of a Table View can be customised. In this tutorial we will change the background color of the Table View and the Table View Cells. We will also change the color of the separator and remove the separator of empty cells. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSCustomizeTableViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard . Remove the View Controller from the Storyboard and drag a Navigation Controller to the empty canvas. This will embed the Table View Controller.

Since we have deleted the original View Controller, we have no initial start point anymore. Select the Navigation Controller, go to the Attribute Inspector and Select the " Is Initial View Controlle r" checkbox.

We need a reference to the cells of the Table View later, so select the Table View Cell, go to the Attribute Inspector and give the Cell Identifier a title of "Cell"

The ViewController.swift file isn't needed anymore, because we have deleted the View Controller in our Storyboard. Next, add another file to the project. Choose iOS->Source->Cocoa Touch Class. Name the class NumberViewController and make it a subclass of UITableViewController.

Inside the class of the NumberViewController.swift file add the following property.

var numbers = ["One","Two","Three","Four","Five"]

When the Table View class was created, Xcode has already created the delegate methods. Change the following methods

override func numberOfSections(in tableView: UITableView) -> Int {
    // return the number of sections
    return 1
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // return the number of rows
    return numbers.count
}

    
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) 

    cell.textLabel?.text = numbers[indexPath.row]

    return cell
}

The cells are populated with the items of the numbers array. We need to connect the NumberViewController class with the Table View Controller. Go to the Storyboard and select the Table View Controller. Go to the Identity Inspector and enter the NumberViewController at the Class field

Build and Runthe project, the Table View is  displayed with the numbers included.

Now it is time to customize the Table View. We can change the background to a gray color. Add the following line in viewDidLoad

tableView.backgroundColor = UIColor.gray

Build and Run, the background color has changed to gray.

The cells containing the numbers still has the default background color. We can give them a clear color so the background color of the Table View will "shine through" the cells. Add the following line right after the "cell.textLabel.text = ..." line in tableView:cellForRowAtIndex method

cell.backgroundColor = UIColor.clear

Build and Runagain, the background color of the cells are equal to the background color of the Table VIew

The separators of the empty cells are still visible. Let's remove them. Add the following line at the end of viewDidLoad

tableView.tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: 0))

Build and Run,the separators are not visible any more.

Finally we can change the background color of the separators. Add the following line at the end of viewDidLoad

tableView.separatorColor = UIColor.yellow

Build and Run, the separator color has changed to yellow

You can download the source code of the IOSCustomizeTableViewTutorial at the ioscreator repository on  Github .