Customizing Table View Tutorial in iOS8 with Swift

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 built for iOS8.1 with Xcode 6.1

Open Xcode and create a new Single View Application. For product name, use iOS8CustomizingTableViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure iPhone is selected in Devices.

Go to the Storyboard. Remove the View Controller from the Storyboard and drag a Table View Controller to the empty canvas.

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 Controller" 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 numberOfSectionsInTableView(tableView: UITableView) -> Int {     
  return 1

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return numbers.count
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! UITableViewCell
  cell.textLabel?.text = numbers[indexPath.row] 
  cell.bacgroundColor = UIColor.clearColor()
  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 Run the 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.grayColor()

Build and Run, the background color has changed to 

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.clearColor()

Build an Run again, 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:CGRectZero)

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.yellowColor()

Build and Run, the separator color has changed to yellow

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