iPhone Programming: Displaying Data with the Table View

ne of the most commonly used views in iPhone applications is the Table View, which you use to display lists of items. Users can select a visible item, or tap to display more information. Figure 1 shows a Table View in action in the Settings application.

Figure 1. iPhone Settings: The iPhone displays items in the Settings application in a Table View.

This article shows how you can use the Table View in the iPhone SDK to display rows of data. In particular, you will learn the events you need to handle to populate the Table View with items and let users select items; how to display text and images in Table View rows, and how to add "disclosure buttons" to rows in a Table View, which are iconic buttons that let users know more information is available.

A Simple Table View

Figure 2. New Navigation-Based Project: To create a new Navigation-based Application project, select the project icon in Xcode.

To begin building a sample Table View application, open Xcode, and select the Navigation-based Application project (see Figure 2), which includes a Table View. Click the Choose button, and name the new project TableViewExample.

The new project contains a file named RootViewController.xib located in the Resources folder. Double-click on the RootViewController.xib file to open it in Interface Builder. Figure 3 shows the RootViewController.xib window together with the contents of the Table View item.

Figure 3. RootViewController.xib File: Here's the contents of the RootViewController.xib file shown in Interface Builder.

Figure 4. Table View Connections: Right-clicking on the Table View in Interface Builder shows you all its connections.

Unlike a View-based Application project, a Navigation-based Application project uses a default Table View rather than a View item, because a Table View is often used together with a Navigation controller.

Right-click on the Table View item in the RootViewController.xib window to view its connections (see Figure 4). Observe that the two Outlets labeled dataSource and delegate are both connected to the File's Owner item, which in turn points to the RootViewController class (implemented by the RootViewController.h and RootViewController.m files).

The two outlets serve the following functions:

• The dataSource outlet indicates what item should provide the implementation for the various methods that populate the Table View with rows. In this case, the connection indicates that the RootViewController class (File's Owner) should do that.
• The delegate outlet indicates what item should implement the various methods that allow users to select rows in the Table View. In this case, the connection also indicates that the RootViewController class (File's Owner) should do that.