• Delegate Methods
• Data Source Required Methods
• Table Cells
• Customizing Table Cells, Headers and Footers
• Buttons Inside Cells

Table views are one of the most commonly used iPhone UI elements. You can use a table view to display a scrollable list of information (which can include text and/or images).

There are two types of table views: plain and grouped. A plain table view consists of a single list of items. A grouped table view can have multiple sections, with customizable section headers and footers.

Plain Table View

Grouped Table View

Each table view must have a delegate and a data source. The table view delegate must implement several methods that tell the app how the table appears and how it should respond when the table is scrolled or a cell is tapped. The table view data source must implement methods that tell the app how many rows are in the table, and the actual data to display for each row.

Usually the view controller that contains the table view will serve as both the delegate and the data-source, although you can use other objects. For easiest implementation, you can create a UITableViewController subclass in XCode, which will include all of the required methods in the code template.

Delegate Methods

None of the delegate methods are actually required, however you'll need to implement tableView:didSelectRowAtIndexPath: to handle touches on a table cell:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
   
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    
    int selectedRow = indexPath.row;
    NSLog(@"touch on row %d", selectedRow);
}

Data Source Required Methods:

The following methods are required from the data source: tableView:numberOfRowsInSection: and tableView:cellForRowAtIndexPath:. If your table is a grouped table, you must also implement numberOfSectionsInTableView:.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    // If you're serving data from an array, return the length of the array:
    return [dataArray count];
}

// Customize the appearance of table view cells.
- (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];
    }
    
    // Set the data for this cell:
    
    cell.textLabel.text = [dataArray objectAtIndex:indexPath.row];
    cell.detailTextLabel.text = @"More text";
    cell.imageView.image = [UIImage imageNamed:@"flower.png"];
    
    // set the accessory view:
    cell.accessoryType =  UITableViewCellAccessoryDisclosureIndicator;
    
    return cell;
}

Anatomy of a Table Cell

The default UITableViewCell has several standard data views and subviews that can be set in the tableView:cellForRowAtIndexPath: method. The contentView contains the cell's main content, and contains three subviews: textLabel, detailTextLabel, and imageView. UITableViewCell has properties for these views so you can set them directly.

• cell.textLabel - the primary UILabel for the cell
• cell.detailTextLabel - a smaller secondary UILabel that appears below or to the side of the primary text label (all except default cell styles)
• cell.imageView - a UIImageView that appears on the left side of the cell (all except Value2 styles).

The optional accessory view may contain one of the following icons, or you can set the cell.accessoryView to your own custom UIView or UIImageView. The default accessoryType is UITableViewCellAccessoryNone.

Image   cell.accessoryType

UITableViewCellAccessoryDisclosureIndicator

UITableViewCellAccessoryDetailDisclosureButton

UITableViewCellAccessoryCheckmark

In editing mode, the cell's content view slides right to reveal an editing control, and the accessory view vanishes. If your data source implements the tableView:moveRowAtIndexPath:toIndexPath: method, then a reordering control appears on the right:

Table Cell Styles

The default UITableViewCell has several different display styles you can choose from. The layout is different for each style. Set the style when you create the cell in the tableView:cellForRowAtIndexPath: method:

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

Here's what the different styles look like. (Mouseover to view the style with imageViews set.)

UITableViewCellStyleDefault

UITableViewCellStyleValue1

UITableViewCellStyleValue2

(Doesn't show images)

UITableViewCellStyleSubtitle

• Next:
• Customizing Table Cells, Headers and Footers

Additional References

• Table View Programming Guide for iOS
• UITableView Class Reference
• UITableViewController Class Reference
• UITableViewDelegate Protocol Reference
• UITableViewDataSource Protocol Reference
• UITableViewCell Class Reference