DPS923 notes – Mon Feb 10

Hands-on. Table view introduction. Using a table view for selection. Introduction to Core Data. Leftover time can be used for Lab 3 work.

.

Table view introduction

“A table view presents data in a scrolling single-column list of multiple rows.”
(iOS Human Interface Guidelines)

The UIKit User Interface Catalog has more table viewcontent.

In our apps, we will use table views for these purposes:

  1. Presenting data in a list format, for selection
  2. Presenting data, enabling hierarchical navigation
  3. Presenting workflow operations, enabling hierarchical processing
  4. Any combination of the above

.

Today, we will study the first purpose listed above, “selection”.

.

Table view, modal, single-select

Recently, you have learned about two interface controls that enable a user to make a single selection among a number of choices:

  • Segmented control
  • Picker view

The segmented control is suitable for between three and five choices, which can be clearly identified in a few characters.

A picker view benefit is that it presents the choices in a fixed-size area. However, it can be clumsy to use if there are many choices.

As an alternative, a table view offers the ability to present choices on a full-screen list. It is often more comfortable to use when there are many choices, and/or when the choices are very descriptive or detailed.

Like the picker view, a table view needs a data source, which is an array. The controller adopts the UITableViewDataSource and UITableViewDelegate protocols, and at runtime, the table is rendered in a manner that’s similar to the table view.

.

Creating a modal view that has a single-select table view

The how-to procedure aligns with the previous coverage of modal views. There are a small number of differences.

The most notable is that the table view is usually “embedded” in a navigation controller. The nav controller offers us a “navigation bar” area to display a title, as well as user interface controls. (There are other benefits, which you will learn about later.) The combined table-view-in-a-navigation-controller is offered as a UITableViewController, which you should use.

When a user taps a table view row, the runtime calls this method in the controller:
tableView:didSelectRowAtIndexPath:

When used in a single-select scenario, we can write code in this method that will package the selected data, and call its delegate method, passing along the data package.

Study the “TVS Single” code example.

.

Table view, modal, multi-select

The how-to procedure aligns with the single-select procedure above. There are a small number of differences.

For each row selected by the user, you can visually indicate the selection by using a check mark “accessory”. The backing store must have a property that stores the selection state.

In the tableView:didSelectRowAtIndexPath: method, toggle the selection state of the row, for both the check mark accessory and in the backing store. Do NOT package the data and call the delegate method.

Instead, you should add a control (e.g. a button) to the nav bar, and create an action method for that control. When the user is done selecting all the desired rows, the user will tap that button.

In the button’s action method, you can use the table view’s indexPathsForSelectedRows method to enable you to gather and package the data that will be sent to the delegate method.

Study the “TVS Multi” code example.

.

.

.

.

.

.

.

.

.

.

.

.

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: