Sometimes you’d like to make a colorful table.  Here’s a technique to do that when configuring a table view cell. It uses the HSB UIColor methods, so if you are not familiar with them, check out my post on HSB color here.

Make a Project

Make a new project in Xcode. In the template chooser, we’ll choose a Single View template.  Name the project SwiftColorfulTableView. Use Swift for the language and the device can be Universal. We are going to use what I find is the easier way of making table views than the template. When the project loads, go to the storyboard.  Select the view controller and delete it. From the object library, drag a table view controller onto the blank storyboard. Select the table view controller and in the attribute inspector turn on the check box for Is initial controller. In the drop down menus, select Editor>Embed in> Navigation Controller.

Open up the document outline. In the outline select the Table View Cell. In the attributes inspector set the style to Basic and Reuse Identifier to cell.

Press Command-N and make a new Cocoa Touch Class TableViewController as a UIViewController (Not a table view controller). Remove everything in the class and replace with this:

class TableViewController: UITableViewController {
    var maxrows = 10
    var maxSections = 8
}

Go back to the storyboard. Select the table view controller’s icon. In the identity inspector change the custom class to TableViewController. We have now set up the storyboard.

Set Up the Table

First we will set up our data sources. Go to the TableViewController.swift code.  Add the following two methods:

//MARK: Table Data Sources
    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return maxSections
    }
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return maxRows
    }

This sets the maximum number of sections and rows for the table to the variables we assigned earlier. Now to make a cell, add the following method under the first two:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
cell.textLabel?.text = String(format: "Section %i, Row %i",indexPath.section,indexPath.row)
return cell

}

This makes a cell with the row and column as a text label.  You have enough to run the application. Build and run. And you should get this:

Adding Color

The way we add color is to find a range of values in Hue saturation and brightness.  Add the following method:

//MARK: Instance Methods
func cellColorForIndex(indexPath:NSIndexPath) -> UIColor{
//cast row and section to CGFloat
let row = CGFloat(indexPath.row)
let section = CGFloat(indexPath.section)
//compute row as hue and section as saturation
let saturation  = 1.0 - row / CGFloat(maxRows)
let hue =  section / CGFloat(maxSections)
return UIColor(hue: hue, saturation: saturation, brightness: 1.0, alpha: 1.0)
}

Line 4 and 5 change the row and section into UIColor's parameter type CGFloat.  Lines 7 and 8 take that value and divide it by the maximum number of values. This gives a number between 0 and 1, which are the ranges that the UIColor initializer accepts.  We use the row for a saturation and the section for the hue. I like going from bold to faint white colors so I subtracted one to reverse the order of the values from 1 to 0.

Now add this to the cellforRowAtIndexpath, just above return cell

cell.backgroundColor = cellColorForIndex(indexPath) 

Build and run. You will have colorful cells.

By changing which of the four parameters you use in the UIColor(hue:saturation:brightness:alpha) function, you can have many different effects.

The Whole Code

You can download sourcecode here: SwiftColorfulTableView Sources

//
//  TableViewController.swift
//  SwiftColorfulTableView
//
//  Created by Steven Lipton on 4/7/15.
//  Copyright (c) 2015 MakeAppPie.Com. All rights reserved.
//

import UIKit

class TableViewController: UITableViewController {

var maxRows = 10
var maxSections = 8

//MARK: Table Data Sources
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return maxSections
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return maxRows
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
    cell.textLabel?.text = String(format: "Section %i, Row %i",indexPath.section,indexPath.row)
    cell.backgroundColor = cellColorForIndex(indexPath)
return cell

}

//MARK: Instance Methods
func cellColorForIndex(indexPath:NSIndexPath) -> UIColor{
//cast row and section to CGFloat
let row = CGFloat(indexPath.row)
let section = CGFloat(indexPath.section)
//compute row as hue and section as saturation
let saturation  = 1.0 - row / CGFloat(maxRows)
let hue =  section / CGFloat(maxSections)

return UIColor(hue: hue, saturation: saturation, brightness: 1.0, alpha: 1.0)
}
}