This article is part of a collection of articles about Swift Basics, where I try to explain different parts of Swift development in a more understandable way.

In most iOS applications, you will probably need to use a UITableView at some point. In this short guide, you will find out how to create a UITableView, and populate it with your own data.

UITableView

As Apple say in the documentation, “A table view displays a list of items in a single column.”.

Basically, it’s a list of cells, that you can take complete control over.

With a UITableView object, there are two ways in which you can control them. They are the UITableViewDelegate, and the UITableViewDataSource. The delegate is what manages the interactions on the table cells, such as selecting and reordering. The UITableViewDataSource is as you may of guessed, what controls the data that populates the table, and also configures the cells in the Table View.

However in this guide, we will just be focussing on the DataSource, as this is all we need to populate a TableView with data.

Styles

There are various ways in which you can customise the style of the TableView manually, but there are two main styles that you can choose from in the InterfaceBuilder, “Grouped” or “Plain”. There aren’t many differences, but in the “Plain” style, each cell fills the Table, and the relevant header/footer float above the cells. However in the “Grouped” style, the sections are visually separated into groups, with the addition of a background colour.

Creating the Project

We’ll start with a new Xcode project. So create a new iOS project, and select the “Single View Application” template. Then you can give it a name, for this example I’m using “TableViewExample”.

Just make sure the Language is Swift, and the other options aren’t needed for this example.

This will create all the necessary files, such as “AppDelegate.swift”, “ViewController.swift”, and “Main.storyboard”.

Putting a UITableView on the Screen

Click on the “Main.storyboard” file, and from the object library on the right, drag a Table View onto the view (There should only be the one).

Then to make sure it works on all iOS devices and screen sizes, we’ll set up the layout. Just drag the corners of the TableView so that it fills the view, but keeps the top status bar visible, it should automatically align.

Select the Table View, and then open up the “Add New Constraints” view from the bottom right corner. It is the icon with a square, which has a vertical line either side.

Once you constraint view appears, select the four lines around the square at the top, while making sure each value is 0. This will simply make it fit to the edges on any screen size.

Configuring the UITableView

Now we need to configure the Table View so that we can manage it later on. So select the Table View, and then click to show the “Attributes Inspector” from the right sidebar.

The only values you need to change are:

Content – Dynamic Prototypes

Prototype Cells – 1

Style – Grouped

All we are doing with these settings, is making the cells in the table dynamic, so that we can update them with live data later on. Then we set the style to grouped, so we can see each section better visually.

UITableViewCell

As we also want to populate the cells with some data later on, we will make use of the dynamic prototyping in Interface Builder, to design the cells.

Firstly we will set a “Reuse Identifier” for the cell, this is so that we can reuse the same cell prototype when loading the TableView. To do this, just select the cell (it may be easier to do this in the Document Outline to the left”, and while still showing the “Attributes Inspector”, set the Reuse Identifier to “PlainCell”.

Linking the UITableView to the ViewController

We will manage the Table View from the initial View Controller, so the next step is to set it as the DataSource of the Table. You can do this programatically, but for this example we will do it using Interface Builder.

To do this, select the Table View, and then choose the “Connections Inspector” in the right sidebar.

From there, just click and drag from the open circle to the right of “delegate” and “dataSource” to the View Controller icon at the top of the view.

Then in the “ViewController.swift” file, we will need to set the class to be the DataSource.

Just replace the current class definition:

class ViewController: UIViewController {

To the following:

class ViewController: UIViewController, UITableViewDataSource {

It will show some errors right now, but that is just because we haven’t implemented the required functions yet.

Populating the Table View

We have the Table View set up in Interface Builder, and it’s linked to the View Controller, so now it’s time to populate it with real data.

At the top of the View Controller class, just below the code you’ve just written, copy the below code:

Number of Rows

Very similar to the method above, but this time we have slightly more complexity in how we return the value of the number of rows. As this method is for every section, we first need to check which section it is for, and then return the count value of the relevant array.

Configure the Cell

The last part of populating the Table View, is to load the data into the cell.

We do this by first creating a UITableViewCell object, by making use of the dequeueReusableCell(withIdentifier:) function. This uses the Reuse Identifier we set earlier, to dynamically reuse one of the cells that have already been created. Then depending on the section that the cell is in, we set the text of the text label of the cell, to the value from the relevant array. After this, the cell is returned, and it is displayed.

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)