Introduction to a navigation-based app with a table view

A very common kind of iOS app uses a navigation-based usage pattern, and table views to enable the user to “drill down” to deeper levels of task operation and/or data detail. We introduce the pattern in this post.

.

The “Nav Colors” example app

The “Nav Colors” example app is our first navigation-based app that uses a table view. It has only two levels of navigation – the root view, which contains the table view, and one additional level, which is a standard view.

We first saw an app with a table view two weeks ago. Check it out again, to refresh your memory.

.

The root view displays a list of colours. (I will use both spellings in this post. In Canada, we typically use the “colour” form, but the SDK objects use the “color” form.)

When a user taps on a colour name in the table view, the next-level view controller slides in. It uses the selected colour value to change its view’s background colour to match. In the example below, “Blue” was tapped.

Nav Colors root view controller's viewNav Colors next-level view controller

.

The data for the list of colours is stored in an array. The array is in the app bundle, as ColorsArray.plist.

Each array element is a dictionary, with two key-value pairs:

  1. The first is the name of the colour (which appears in the table view)
  2. The second is the Cocoa “UIColor” object that represents its specific colour (stored, incidentally as an NSData object, which is allowed in a dictionary)

.

The model, as viewed in Xcode or the Property List Editor, is shown below:

ColorsArray.plist - the model for the "Nav Colors" app

.

You can download “Nav Colors” from the “programming examples” list, linked at the right.

.

Selecting the right Xcode app template

When we introduced the navigation-based app style, we used the Xcode “Window-based Application” template. That was appropriate for the situation, because you needed to learn about navigation as an atomic topic, before moving on to more complicated scenarios.

From now on, we will prefer to use the “Navigation-based Application” template. This template includes a root view controller, with a table view. All of the components are configured to work right away. When using the navigation-based app template, the coding pattern is simplified – there are only three tasks:

  1. Configure the “root” view controller
  2. Create the next level, by a) creating and configuring its view controller (and optionally its view), and b) configuring its “parent” view controller
  3. Repeat Step 2 for as many levels as you need

.

“Table views 101”

Adapted from the Table View Programming Guide, and the UITableView Class Reference:

A table view presents a scrollable list of items that may be divided into sections. Table views are versatile user-interface objects frequently found in iOS-based applications, particularly productivity applications. They have many purposes:

  • To let users navigate through hierarchically structured data
  • To present an indexed list of items
  • To display detail information and controls in visually distinct groupings
  • To present a selectable list of options

.

A table view has only one column and allows vertical scrolling only. It consists of rows in sections. Each section can 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, a table view is an instance of UITableView in one of two basic styles, plain or grouped. A plain-style table view is an unbroken list; a grouped table view has visually distinct sections. A table view has a data source and might have a delegate. These objects provide the data for populating the sections and rows of the table view and customize its appearance and behaviour.

.

Design principles and coding patterns

A table view requires a data source. As you have learned, the data can be provided in a number of ways.

In our example, we are using an array, which is located in the app bundle as a plist.

When configuring the root view controller, which has the table view, there are two approaches to providing the data it needs:

  1. Get the data during viewDidLoad, or another early-firing event
  2. In the app delegate code, configure the root view controller with the data

.

Either approach may be suitable. However, approach #2 will enable the root view controller to be portable, and taken to another app, where it may not be located at the root.

In either case, the view controller should be configured with a data-bearing property (or properties).

.

The importance of design principles and coding patterns

This kind of iOS app (nav-based, with a table view) has many “moving parts”. As a result, you need to follow some design principles and coding patterns. Doing so will enable you to reliably and consistently create this style of app, with a predictable amount of effort. Additionally, your app will have good quality, and its components will be modular enough to enable reuse and replication.

Beginning with today’s topics, you will learn about these design principles and coding patterns:

  • A view controller should include all its required behaviour (which is obvious), and it should also have the data it needs to do its job
  • This means you create one or more properties to bear/hold the data it needs
  • Typically, its “parent” (in the navigation controller hierarchy) should provide/set the data (by setting the property)
  • When preparing to activate the “next level” view controller (and its view), you should always follow a predictable set of three steps: 1) create the next-level view controller instance; 2) configure it;, and 3) push it onto the navigation stack

There are a few other principles, patterns, and practices that you will encounter – be on the lookout for them.

.


Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: