Swift basic UITableView Tutorial
In this post we will look at implementing a basic UITableView in swift.
This tutorial is also on youtube at:
First of all we create a blank single view project in XCode.
In the left hand pane we select ViewController.swift. Under class ViewController add the following IBOutlet:
@IBOutlet var tableView: UITableView!
This is used later on to connect our tableview in the interface builder to our ViewController.
Now select Main.storyboard to open the interface builder, here we will add the tableview to our view controller and connect it up to to our view controller class.
Drag tableview from the object library onto our storyboard.
Now that you have your tableview on your view controller you need to connect it up. To do this hold down the control key on the tableview. Drag this up to view controller.
From the drop downs select delegate and do the same for data source.
We also need to right click on view controller, under Outlets we will see a tableView. This is the IBOutlet we created at the start of the tutorial. We need to connect this to our tableview by hovering the mouse over the circle, you will see a plus sign. Drag that onto our tableview in the storyboard
Now go back to the ViewController.swift, it is time to put in our code to make the table view work.
At the top, for class we need to add UITableViewDelegate and UITableViewDataSource as follows
// Before class ViewController: UIViewController { // After class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
Under the class add the following code to setup an array of strings. This will be the source of data to show in our tableview.
var tableData: [String] = ["Hello", "My", "Table"]
Now under viewDidLoad we need to register the cell for our tableview. A cell is basically a container for each row that holds the information. It can hold text, pictures, buttons and many other things. Add the following code under here:
self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
From here we need to add three methods for the tableview to display the data in our tableData array. The first one is numberOfRowsInSection. This basically lets the tableview know how many items we need to display. As there are 3 items in tableData we simply return the count of the three items in it’s array as follows:
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return self.tableData.count }
Next we need to add cellForRowAtIndexPath. This returns each row we want to display to the tableview.
At first we setup our cell with the var cell:….. Then we set the text content of the cell and finally return that cell to then tableview.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell: UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: "cell")! as UITableViewCell cell.textLabel?.text = self.tableData[indexPath.row] return cell }
Finally we need to add didSelectRowAtIndexPath. This code runs whenever a cell is clicked in the tableview. So we just have it set to print to the console what number line was pressed.
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { print("Row \(indexPath.row) selected") }
Now if you run your project and you should see your tableview as follows: