Organising skills might be one of the most important skills on the top of 10 self-management skills that needed to be cultivated properly. Simply because it makes life so much easier and more productive.
In this tutorial, we will be setting up a tableView on a ViewController and add the data to each cell in a pro-grammatical way.
In swift, we use UITableView object to display a list of items. Or, in an other words, UITableView will help us to organise the displaying on the screen for a list of items in a better way.
The table that we deal with in swift will not have Rows + Columns like the ones that we see in SpreadSheet. This table will only have Row(s). On the top of that, there will be a cell for each of the row to organise the items/data displaying. So, cell is equivalent to view. Sometimes, to help the users spot the relevant information quickly, we often introduce Section(s) on the table so that the list of items are grouped together in their respective section.
Let’s get started:
Here are three steps that we need to take to have a tableView on the screen, and display a list of items.
- Create a tableViewController
- Create cell for tableView Row
- Add data for cell to display
Step 1 Create a new single view project in swift. Delete the StoryBoard. In terms of how to work with SceneDelegate without StoryBoard, i have another blog posted here.
Step 2 In ViewController.swift, change the parent class to be UITableViewController. With only viewDidLoad function
class ViewController: UITableViewController { override func viewDidLoad() { super.viewDidLoad() }
}
Try run the app, a plain tableView should appear on the screen
That should be easy enough, as with very little input, the screen has provided a tableView on screen already.
Now, how about add a label in the tableView Cell.
Step 3 Luckily, Xcode has made this easy for us to create a tableViewCell. In above step, to create a UITableView class, we created a subclass -ViewController of UITableViewController. Similarly, the same thing happens when creates tableViewCell. The following screenshot shows you the DetailCell.swift that i created as an example. Notice this class is created as a subclass of UITableViewCell object.
There are two things that I highlighted in the screenshot.
The property cellId is cellIdentifier. A UITableViewCell must have a unique cellIdentifier.
Second arrow is pointing to contentView in setupView func. To be able to add extra UI Objects, like, UILabel in this case, we need to add them into contentView .
Step 4 We have a UILabel in the DetailCell. It is the time to make the cell displaying something. UITableView has DataSource and Delegate protocol for tasks delegation.
There is one row needed, we tell tableView to return one row by doing
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {return 1}
We want to display a TEST MESSAGE in the first row of the tableView.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {let cell = tableView.dequeueReusableCell(withIdentifier: "detail", for: indexPath) as! DetailCellcell.detailLabel.text = "TEST MESSAGE"return cell}
If you go ahead and run the app now, the app will crash and the error message is
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'unable to dequeue a cell with identifier detail - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'Do not be sad, we did missed one important thing, which is register tableView Cell in the ViewController.
Step 5 Register DetailCell. Add the following line in `func viewDidLoad()` in ViewController.swift.
self.tableView.register(DetailCell.self, forCellReuseIdentifier: "detail")Try to run the app now. Voila.The tableView on the screen is showing TEST MESSAGE at the first row.
Completed !!
Thank you for checking this article up. And don’t forget to give it some claps! 👏🏼👏🏼👏🏼 if you found it helpful.💡