How To Create UITableView In Swift

UITableView is one of the most common iOS controller developer uses.

UITableView is used for letting user select the Items from the list, Navigating to different ViewControllers as per user selection, Displaying the List of Items etc. This control is very commonly used, iOS itself uses it in its Setting app.

I have much things to write about UITableView but lets not waste the precious time and get started with UITableView.

Here is the step by step tutorial for UITableView using Swift.

Create a Single View Project

Open XCode, Select Create a new project >> Single view application

Fill in the following options and simply proceed.

  • Product Name : SimpleTable – This will be the name of our app.
  • Organization Name : AppTuitions – you can use your own name or just as of now use mine.
  • Organization Identifier : com.apptuitions – This is used to create unique app identifier for your app. Its just the domain name written in the other way around.
  • Bundle Identifier : com.apptuitions.SimpleTable – As i said above this is the unique identifier for your app.
  • Language : Swift – We will be using swift as programming language for this tutorial.
  • Device : iPhone – Choose iPhone as off now. We will look into other options in later tutorials.
  • Use Core Data : Unchecked – Keep it Uncheck as of now we don’t need it. We will also  have a separate tutorial on this later on.

SimpleTable

 

Press Next and Xcode will ask for the location where you want to save your app, choose the appropriate destination and press Create.

Next, you will find you project in Single view application template.

Now select main.storyboard, Form right panel (utility area) Uncheck the Use Auto Layout and Use Size Classes(We will have a separate tutorial for this later on.), when you uncheck these buttons system will prompt the message asking if you want to use size classes for auto layout, select Disable Size Class.

AppTuitions-SimpleTableView-Swift-2                                  AppTuitions-SimpleTableView-Swift-1

 

Now we have done  the required settings, Lets get it started.

Drag and drop Table view from utility area onto your ViewController Scene in your main.storyboard.

AppTuitions-SimpleTable-Swift-3

Press Control and drag and drop from TableView from ViewController Scene to your ViewController.swift class as shown in the figure.

AppTuitions-SimpleTable-Swift-4

 

When prompted name it as tableView (or what ever you like – In this tutorial we will use tableView) and press  connect.

next thing you will see an outlet connected to tableView as below:

1
@IBOutlet var tableView: UITableView!

Add Delegate and dataSource

Add  UITableViewDelegate and UITableViewDataSource next to class declaration as shown below.

1
2
3
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
...
}

 

Now possibly you will notice an error Type ‘ViewController’ does not conform to protocol ‘UITableViewDataSource’.

This is because we confirms to the protocol for UITableViewDelegate and UITableViewDataSource but still we have not add the required methods yet.

Add following two functions below viewDidLoad()

1
2
3
4
5
6
7
8
9
10
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
...
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 0
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
return UITableViewCell()
}
}

 

Now connect the tableView in ViewController Scene to File owner’s(ViewController’s) Delegate and Datasource.

Press Control key and perform drag and drop to file owner and select Delegate, do same thing for datasource too.

AppTuitions-SimpleTable-Swift-5  AppTuitions-SimpleTable-Swift-6

In  viewDid add  registerClass(_:forCellReuseIdentifier:) to register the UITableViewCell class.

1
2
3
4
5
6
7
8
9
10
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
...
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
}
...
}
}

 

Add Data To Table View

Create a property called tableData as an Array of Strings and add some strings to it

1
2
3
4
5
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
...
var tableData: [String] = ["Christ Redeemer", "Great Wall of China", "Machu Picchu","Petra","Pyramid at Chichén Itzá","Roman Colosseum","Taj Mahal"]
...
}

Set Number of Rows For tableView

1
2
3
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.tableData.count;
}

Create and configure tableView Cell

1
2
3
4
5
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell
cell.textLabel?.text = self.tableData[indexPath.row]
return cell
}

 

Thats It,

Go ahead and run your app.

Here is what it should look like

AppTuitions-SimpleTable-Swift-10

 

 

you can download full source code Here