About Table Views

Table views are a common user-interface object in iPhone OS applications. Because of their versatility, applications can adopt them for many purposes. This chapter discusses the parts, characteristics, and styles of table views from both functional and programmatic perspectives, illustrating along the way some of the situations in which table views are used.

Characteristics of Table Views

A table view displays a scrollable list of items. it has only one column—hence, it’s essentially a list—and it allows vertical scrolling only. Your application can use table views in many ways, including:

• To let users navigate through hierarchically structured data

• To present a selectable list of options

• To present an indexed list of items

• To display detail information and controls in visually distinct groupings

A table view consists of rows in sections. Each section may have a header and a footer that displays text or an image. However, many table views have only one section with no visible header or footer. Programmatically, UIKit identifies rows and sections through their index number: Sections are numbered 0 through n-1 from the top of a table view to the bottom; rows are numbered 0 through n-1 within a section. A table view can have its own header and footer, distinct from any section; the table header appears before the first row of the first section, and the table footer appears after the last row of the last section.

The visible rows of a table view are composed of cells, which display text, images, or other kinds of content. Cells can also have accessory views, which often function as controls. There are three standard kinds of accessory views (shown with their accessory-type constant):

Instead of the standard accessory-view types, you may specify a control object (for example, a switch) or a custom view as the accessory view.

Table views can enter an editing mode wherein the user can insert or delete rows, or relocate them within the table. In editing mode, rows that are marked for insertion or deletion display a green plus sign (insertion) or a red minus sign (deletion) near the left edge of the row. If the user touches a deletion control or, in some table views, swipes across a row, a red Delete button appears to prompt the user for deletion of that row. Rows that can be relocated display near their right edge an image consisting of several horizontal lines. When the table view leaves editing mode, the insertion, deletion, and reordering controls disappear.

Table View Styles

There are two major styles of table views: plain and grouped. A table view in the plain (or regular) style displays rows that stretch across the screen and have a white background (see Figure 1-1). The table view can have one or more sections, sections can have one or more rows, and each section can have its own header or footer title. (A header or footer may also have a custom view, for instance one containing an image). When the user scrolls through a section with many rows, the header of the section floats to the top of the table view and the footer of the section floats to the bottom.

Figure 1-1  A table view in the plain style (no section header or footer)

A variation of plain-style table views associates an index with sections for quick navigation; Figure 1-2 shows an example of this kind of table view, which is called an indexed list. The index runs down the right edge of the table view with entries in the index corresponding to section header titles. Touching an item in the index scrolls the table view to the associated section. For example, the section headings could be two-letter state abbreviations and the rows for a section could be the cities in that state; touching at a certain spot in the index displays the cities for the selected state. The rows in indexed section lists should not have disclosure indicators or detail disclosure buttons, because these interfere with the index.

Figure 1-2  A table view configured as an section index

The simplest kind of table view is a selection (or radio) list (see Figure 1-3). A selection list is a plain-style table view that presents a menu of options that users can select. It can limit the selection to one row or allow multiple selections. A selection list marks a selected row with a checkmark (see Figure 1-3).

Figure 1-3  A table view configured as an selection list

A grouped table view also displays a list of information, but it groups related rows in visually distinct sections. As shown in Figure 1-4, each section has rounded corners and appears against a bluish-gray background. Each section may have text or an image for its header or footer to provide some context or summary for the section. A grouped table works especially well for displaying the most detailed information in a data hierarchy. It allows you to separate details into conceptual groups and provide contextual information to help users understand it quickly. For example, the information about a contact in the contacts list is grouped into phone information, email addresses, street addresses, and other sections.

Figure 1-4  A table view in the grouped style

The headers and footers of sections in a grouped table view have relative locations and sizes as indicated in Figure 1-5.

Figure 1-5  Header and footer of a section

Standard Styles for Table-View Cells

In addition to the two styles of table views, UIKit defines four styles for the cells that a table view uses to draw its rows. You may create custom table-view cells with different appearances if you wish, but these four predefined cell styles are suitable for most purposes. The techniques for creating table-view cells in a predefined style and for creating custom cells are described in “A Closer Look at Table-View Cells.”

The default style for table-view rows uses a simple cell style that has a single title and permits an image (Figure 1-6). This style is associated with the UITableViewCellStyleDefault constant.

Figure 1-6  Default table row style (no subtitle)

The cell style for the rows in Figure 1-7 left-aligns the main title and puts a gray subtitle right under it. It also permits an image in the default image location. This style is used in the iPod application and is associated with the UITableViewCellStyleSubtitle constant.

Figure 1-7  Table row style with subtitle under title

The cell style for the rows in Figure 1-8 left-aligns the main title and puts the subtitle in blue text and right-aligns it on the right side of the row. Images are not permitted. This style is used in the Settings application, where the subtitle indicates the current setting for a preference. It is associated with the UITableViewCellStyleValue1 constant.

Figure 1-8  Table row style with right-aligned subtitle

The cell style for the rows in Figure 1-9 puts the main title in blue and right-aligns it at a point that’s indented from the left side of the row. The subtitle is left-aligned at a short distance to the right of this point. This style does not allow images. It is used in the Contacts part of the Phone application and is associated with the UITableViewCellStyleValue2 constant.

Figure 1-9  Table row style in Contacts format