Start with a new Single View Application project. Go straight to the storyboard and add a table view to the view controller. On top of the table view, add a table view cell. Select the view controller. Under the Identity Inspector make sure the Class is set to ViewController. Select the table view cell. Under the Attributes Inspector change Style to Subtitle and the Identifier to MyCellReuseIdentifier. You are done with the storyboard configuration now, and it should look like this:
Now go to the ViewController file. Let’s conform to the UITableViewDataSource protocol so we can use some of its methods. The ViewController class signature needs to look like this:
class ViewController: UIViewController, UITableViewDataSource {You will immediately notice an error message:
Type 'ViewController' does not conform to protocol 'UITableViewDataSource'
This is because the protocol we want to conform to has at least two methods that we are forced to implement. Delete everything inside ViewController, and add a new array with a few cities as values:
let array = ["Chicago", "New York", "San Francisco"]Now add the two methods that the UITableViewDataSource protocol needs implemented:
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return array.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("MyCellReuseIdentifier") as! UITableViewCell
cell.textLabel?.text = array[indexPath.row]
cell.detailTextLabel?.text = "One of the largest IT job markets in US."
return cell
}In the first method, the only notable thing is how the number of rows is returned - as the size of our array. In the second method, we first create our cell as a UITableViewCell type and identified by the string “MyCellReuseIdentifier” which we set in the storyboard at the beginning. What happens next is interesting: each cell’s title will be one value from our array, while the cell’s subtitle will be always the same string because we set it this way. Now save your work and run the project. It should look like this:
Wasn’t it great to be able set up a functional app that handles data in table view cells, in just a couple of minutes? Suggestions for a more advanced project:
- move the array in a Model class so we can use a proper MVC design pattern
- set a bigger cell height so it can fit more content
- add labels and images to your cell for a richer content
- create a custom table view cell class and move all the cell details into it
- then dequeue a reusable cell as your new cell type instead of UITableViewCell
Until next time!