You’re always trying to show tables of something to people. Always.
The UITableView & UITableViewController classes, help you specifically with that.
In this blog, we’ll discover how to use them.
The UITableView class of the iOS API, is quite robust and powers millions of tables on iOS across the world.
UITableView is a view component that can be used to display a list of items in a table, and can be embedded into a view. If you’re simply looking to implement a quick hassle-free and a straight forward table, the UITableViewController object is the way to go.
UITableViewController = UITableView + UIViewController
The UITableViewController is a subclass of UIViewController that manages a table view, and can be used independantly.
Now that we have an idea about how tables are used, let’s look at how to implement them.
The UITableView requires two things to function:
The Datasource provides all things content, or the data for the table, and other information that the table needs to construct the table.
The Delegate manages the table configuration, selection, editing, and other interactions.
Usually the view controller that manages the tableview acts as the Datasource and Delegate for the corresponding table. This is accompolished by making the View Controller adopt the following protocols:
UITableViewDataSource: for the datasource methods
UITableViewDelegate: for the delegate methods
I have personally only used IB and AutoLayout to create my UIs so far, but to move away from this practice and to start writing UIs programmatically, I’m going to stick to creating UIs programmatically in these posts that I write in the hope that I learn along the way. If you need help setting up XCode without storyboards, give this article a quick read.
Prepare Items & Table view
In ViewController.swift, intialize two variables — one that holds a new UITableView object and the other that holds the items that you’re going to display in the table.
Before adding our tableview to our view, there are three things that we need to take care of:
- The Table View’s Frame in the view
- The Table View’s Datasource and Delegate
- The Table View’s Cell Reuse Identifier
In your viewWillAppear() method:
- Setup Frame:
There are two things happening here:
- We’re obtaining the screen’s width and height using the bounds property of our UIScreen — UIScreen.main.bounds
- Setting our Table View’s frame using the frame property on our table view — tableview.frame
- Set Table View’s Datasource and Delegate
After setting the tableview’s frame, we may now set the tableview’s datasource and delegate to our own class that implements the tableview. In this case, *self *points to our *ViewController *class.
After setting the tableview’s datasource and delegate, its important we implement the datasource and delegate methods.
- Set Reuse Identifier
Set the reuse identifier that you would like to use for the cell, so the cell instance can be reused during run time.
Implement Datasource & Delegate Methods
What’s happening here?
I like to use extensions to keep things clean and modular —
We first create an extension to our class, and make the class adopt to the UITableViewDataSource protocol.
The tableview requests its datasource for information regarding the structure of the table to build it.
Within the extension, there are three methods that have been implemented:
This specifies the number of sections that the table is going to have.
This returns the total number of rows the table will have. Ideally we return the count of our datasource (in our case an array of items) — items.count
This returns an instance of the tableview cell for an index path. This is where the data binding usually happens.
- A tableview cell is dequeued for the correspoding indexpath
- The cell’s textLabel property holds the text from our array
- The Cell is returned
Adding Table View to the View
Now that our Table View has been setup, all that’s left is adding it to our view.
In your *viewDidLoad() *method:
Now when you Build and Run, you should see your table populated with the data from the items array.
That’s how a simple table is created, a complex one builds over the same concepts and a cell could be designed to hold text, images, and even videos.
I hope that was useful.