iPhone Programming: Displaying Data with the Table View : Page 2

Populating Table View Rows

To populate the Table View with rows, you need to implement a couple of methods in the RootViewController.m file. Add the statements shown in Listing 1, which create a mutable array of states in the U.S.

Next, implement the tableView:numberOfRowsInSection: method, which controls how many rows you want the table view to display. The following code sets it to the number of items in the listOfStates array, to specify how many rows you want to populate in the Table View:

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView 
numberOfRowsInSection:(NSInteger)section {
   return [listOfStates count];
}

Next, implement the tableView:cellForRowAtIndexPath: method, which inserts a cell in a particular location of the Table View. This event fires once for each row of the Table View; however, the method is not called continuously from start to finish. For example, if there are 100 rows to be displayed, it will be fired continuously for the visible rows. Then, when the user scrolls down the table view, the tableView:cellForRowAtIndexPath: method gets called for the next set of visible rows. The following code retrieves an individual item from the listOfStates array and inserts it into the table view.

- (UITableViewCell *)tableView:(UITableView *)tableView 
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    
UITableViewCell *cell = [tableView 
    dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] 
            initWithStyle:UITableViewCellStyleDefault 
            reuseIdentifier:CellIdentifier] 
            autorelease];
    }
    
    NSString *cellValue = [listOfStates objectAtIndex:indexPath.row];
    cell.textLabel.text = cellValue;
    
    return cell;
}

Figure 5. Populated Table View: Here's the sample application running in the iPhone simulator, showing the rows inserted in the Table View.

Specifically, you use the dequeueReusableCellWithIdentifier: method of the UITableView class to obtain an instance of the UITableViewCell class. The dequeueReusableCellWithIdentifier: method returns a reusable table view cell object. This is important because if you have a large table, with perhaps 10,000 rows, creating a single UITableViewCell object for each row would carry a huge performance and memory penalty. And because a Table View will display only a fixed number of rows at any one time, it would make sense to reuse the cells that have been scrolled out of view. This is exactly what the dequeueReusableCellWithIdentifier: method does.

For example, if there are 10 visible rows in the table view, only 10 UITableViewCell objects are ever created—those 10 get reused as the user scrolls through the table view.

That's enough to get started. Press Command-R to test the application on the iPhone Simulator. Figure 5 shows the populated Table View displayed in the iPhone Simulator.

Adding a Header and Footer

You can display a header and footer for the table view by simply implementing the following two methods in the RootViewController.m file:

- (NSString *)tableView:(UITableView *)tableView 
titleForHeaderInSection:(NSInteger)section{
return @"States";
}
- (NSString *)tableView:(UITableView *)tableView
titleForFooterInSection:(NSInteger)section {
return @"USA";
}

Figure 6. Header and Footer: Here's the Table View displaying a header and footer.

When you re-run the application, you'll see a header and footer as shown in Figure 6.

Adding an Image

In addition to displaying text, you can also display an image in a Table View cell. Drag-and-drop the image named USA.jpeg (you'll find it in the downloadable code for this article) to the Resources folder in Xcode. When prompted, ensure that you save a copy of the image in your project. Figure 7 shows the image added to the project.

Figure 7. New Image: After adding the USA.jpeg image to the Resources folder of the project, you can view it in Xcode.

To display the image next to the cell text in the Table View, insert the following statements in the tableView:cellForRowAtIndexPath: method:

- (UITableViewCell *)tableView:(UITableView *)tableView 
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView 
       dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] 
            initWithStyle:UITableViewCellStyleDefault 
            reuseIdentifier:CellIdentifier] 
            autorelease];
    }

Figure 8. Added Images: Note that each Table View cell now displays an image as well as text in each row.

    NSString *cellValue = [listOfStates objectAtIndex:indexPath.row];
    cell.textLabel.text = cellValue;
    
    UIImage *image = [[UIImage imageNamed:@"USA.jpeg"] 
        _imageScaledToSize:CGSizeMake(30.0f, 32.0f)
        interpolationQuality:1];
    cell.imageView.image = image;
    
    return cell;
}

You may have noticed in the preceding code that the UITableViewCell object already has an ImageView.image property. All you need to do is to create an instance of the UIImage class and load the image from the Resources folder of your project. To scale the image, you can use an undocumented property of the UIImage class: imageScaledToSize:, which will trigger a warning in Xcode (which you can ignore).

Press Command-R to test the application and you'll see the flag image displayed next to each row (see Figure 8).