Channels ▼
RSS

Embedded Systems

Displaying Tabular Data on iPhones


One of the great challenges facing developers of business apps that run on mobile handsets is the presentation of tabular data in an area slightly larger than a business card. Presenting sufficient data at a size that is conveniently readable is a difficult task, which must be done correctly. Flub this aspect and no one will use the app, regardless of how good its other properties might be.

Fortunately Cocoa Touch, the object-oriented framework used in programming for Apple devices such as the iPhone, iPod Touch, and iPad, provides classes that display data in a compact, tabular format. One of the classes, UITableView, helps arrange such data into a hierarchic structure of lists, with each list presented as a table on the screen. Other supporting classes and methods enable a user to navigate easily through these tables (screens) of information. The user can then quickly drill down through a complex data set to reach the desired information.

Because UITableView is good at managing and displaying information, it often serves as the workhorse in data-centric applications. Unfortunately, the information on using UITableView is scattered throughout volumes of documentation in the Apple iOS SDK. This article consolidates this information and introduces you to UITableView and its related classes. In addition, I demonstrate how to use these classes through two example iOS apps.

Table Terminology and Types

In the abstract, table data is presented as rows of content, and the rows can be formatted in a specific style. Exactly what constitutes a row and a column though is a looser concept on mobile devices that it is on the desktop. An iOS table row is a horizontal strip of content drawn across the width of the screen. Rows are often referred to as cells, from the UITableViewCell class that implements them. The content of a row can be a mix of text or graphics, and you can specify the row's height in points. However, because a row spans the width of the screen, a table displays only one column of information.

Rows of related content can be grouped into sections. Sections are delineated by distinctive header strip that appears at the top of each group and contains a title. An optional footer can appear below each group; it also has a title. The titles can consist of strings or graphics. Like the cells, you can specify the height of headers and footers. The entire table can also have its own optional header and footer.

iOS tables come in two styles: plain and grouped. For the plain style, a table consists of section headers, followed by rows of content displayed as lists. For example, the Mailboxes screen of the iOS Mail app demonstrates this style. For the grouped style, the sections occupy distinct screen regions, with the header and footer content appearing above and below them. The Settings app is an example of this style.

Figure 1 shows these two table styles, and indicates the sections, headers, and footers. Note that while the plain style does support footers, they are often not used.

[Click image to view at full size]
Figure 1: Comparing plain and group-style tables in iOS.

When you first create a table, you specify its style, either directly in the code or in Interface Builder. Once set, a table's style cannot be changed.

Table rows (cells) have four predefined styles: default, style1, style2, and subtitle. These styles vary slightly in the number of built-in text fields they offer and whether an optional image is displayed. Different cell styles can appear in a table, and a cell's style can change on the fly, as driven by user actions.

Cells can also be customized to present additional text labels or images, or present controls such as sliders, buttons, and switches. For example, in Figure 1 the grouped table (right) has cells that contain a switch and a segment control.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video