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.
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:
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:
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.
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’.
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:
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:
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:
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:
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.
