MobileList Apps in iOS - Learn How to Use UITableView

List Apps in iOS – Learn How to Use UITableView

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

You’ve used the UITableView control in just about every iOS app, but probably didn’t realize it!  It’s the standard iOS way of presenting lists of selectable data. You can see an example of it in Figure 1, where the built-in iOS Contacts app uses it.

Figure 1. The Contacts App uses a UITableView.
Figure 1. The Contacts App uses a UITableView.

In this article, you’ll build on the previous ones in this series, where you learned how to build your first app, handle properties, methods and events, as well as navigation between views. You’ll build a simple list app that renders a list of data. See if you can use what you learned in the previous articles to have the selection on the list navigate the user to another view!

Getting Started.

First, create a new single-view app with Xcode, and call it ‘tablenav’. Check the previous articles in this series if you’re stuck with any of the terms we use here. The IDE creates an AppDelegate and a ViewController for you. You’re going to create your table in ViewController.

Step 1. Create the Table

First, open ViewController.m, and find the viewDidLoad function. This fires whenever the view loads, and is the ideal place to put our UITableView declaration.

Edit the viewDidLoad so that it looks like this:

Example Code

This will create a new UITableView called ‘myTable’, and render it full screen. Run the app, and you’ll see that you have a full screen, empty, table.

Step 2. Configure the Delegates

The TableView is constructed using callbacks and delegates. In order to prevent warnings in your code, it’s a good idea to tell the ViewController that you are going to do this. This is achieved in the header file, and you simply specify them by putting them in angle brackets after the interface declaration, like this:

Example Code

You’ve now told Objective-c to look in ViewController.m for the delegated callbacks, as well as for the data for the UITableView.

At this point you’ll see compiler warnings that methods in the protocol haven’t been implemented – don’t worry about that yet, they’ll be done in subsequent steps.

Step 3. Configure the Data for the Table

There are many ways that data can be loaded into the table. You’ll typically pull it from the web, or from a local database. In both those cases, you’ll load your data into an in-memory array, and build the table from that array. So, in order to keep things simple, I’ll just hard-code an array and use that to build the data for the table. So, back in ViewController.m, make a declaration for an NSMutableArray at the top, and call it ‘countriesList’.

Then, add some strings to this array.

Example Code

You now have some data that can be rendered in the table.

Step 4. Configure Data Source and Delegate

In step 2 you told the ViewController that it would be the data source and the delegate for a UITableView controller. Now that you’ve created a UITableView called ‘myTable’, you should set its datasource and delegate properties to tell it where it will get its data, and where it will process its callbacks. They’ll both be in this module, so you set them to ‘self’.

Example Code

Step 5. Load the Data into the Table

Now that you have the data, and you’ve told the compiler that your view controller is the data source, there are a number of functions that you’ll need to implement, that will be called back to when the table is set up. This is a little different from programming in other languages, such as C# where you set the contents as a property of the table. In Objective-C for iOS, you will create the table, and then, at run-time, if the module is the data source, the operating system will look for various functions in that module in order to add data to the table.

Step 5.1 Setting the Number of Sections in the Table

The first thing to consider is the number of sections in the table. Sections are subdivisions of the table, where you could have multiple selections. Think about the options screen on your iPhone, and you’ll see a subdivided table. You configure this with the numberOfSectionsInTableView: callback, like this:

Example Code

Here I’m just returning 1, as I only want 1 section.

Step 5.2 Setting the Number of Rows Per Section

The next thing is to configure the number of rows that you want in each section. This is achieved using the numberOfRowsInSection: callback. As I only have one section, I’m just going to return the length of my countriesList. If I had more than one section, I’d need a case statement here to set the number of rows per section based on the data for that section:

Example Code

Step 5.3 Configuring the Cells

You load the data into the table cell by cell. Now that the OS knows the number of sections, and the number of rows per section, it will call the cellForRowAtIndexPath: callback for each of these. You use this function to define the contents of that cell, and therefore load your data into the table.

The process of doing this is to first see if the cell is already on the table. This is done using a CellIdentifier string. If it isn’t there, you’ll create a new UITableViewCell, otherwise you’ll edit the one that’s already on the table.

When you return the UITableViewCell to the caller, it will be added to the table.

Here’s the code:

Example Code

Step 5.4. Handling List Selection

When the user touches on a cell, the function didSelectRowAtIndexPath: will be called. This gives you the indexPath of the cell in question. You can access the index of the cell with the ‘row’ property of indexPath.

Here’s an example where I’m logging out the name of the country for the cell that was selected:

Example Code

And that’s it! You’ve now seen a step-by-step of how to quickly create a simple list view in iOS using the UITableView control. You saw how to populate it, and how to handle user selection. See if you can take this to the next step, and use the selection to navigate to new views.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories