Modal view controllers introduction

iOS apps often include modal view controllers, which cause a new view to appear on top of the currently active view. We will learn about and work with three kinds of modal view controllers.

.

This week, the theme is “more view controllers”. Up until now, we have created single-view apps. Starting today, we will create multi-view apps.

This post was most recently updated in January 2014.

.

Working with multiple view controllers

As a new iOS programmer, you have learned that the view controller is a foundational building block in an iOS app. It provides logic, and manages a view that shows a screenful of content.

In today’s lecture, we will introduce modal view controllers, and you will learn how to work with more than one view controller in an app.

Then, we will learn how to work with larger numbers of view controllers. The iOS has two special-purpose controllers that help manage a number of view controllers: Tab Bar Controller, and Navigation Controller. Both controllers manage an array of view controllers.

.

What is a modal view controller?

When a modal view controller, and its view, appears on the screen, it becomes the top view, and the first responder. In other words, the user must interact with it, before returning to the normal program flow.

A modal view may appear:

  1. as a result of a message or system event (e.g. an alert), or
  2. as a message from your app (e.g. an action sheet), or
  3. as a special-purpose full-screen of content.

When the modal view controller is dismissed, the user is able to return to and interact with the view that was covered over by the modal view.

.

Supporting documentation

Read the following chapter to get acquainted with alerts, action sheets, and modal views

iOS Human Interface Guidelines

All of this document is worthwhile, and you should plan to read it by study week.

.

Example apps

There are three example apps to support this topic:

Alert Action – shows an alert and an action sheet

Fav Photo – shows a framework- or system-provided photo picker view

To Do Add – shows a custom modal view

.

Discussion

For alerts and action sheets, we create a modal view controller in code, and present its view on screen.

For the others, we typically create another view controller (and view/screen on the storyboard), and present it on screen at the right time.

When you study the example apps, make note of another pattern that we will use from now on: using an instance variable in a view controller to hold the data it needs to display properly.

.

Preview – Tab Bar Controller

A tab bar controller manages an array of view controllers. Each element of the array – a view controller – is known and defined at design time. The app’s user has the ability to select and work with any view (with its backing view controller) at any time; there is no predefined usage sequence.

A typical tab bar app style is suitable for presenting different modes of, or tasks for, the app.

.

Preview – Navigation Controller

A navigation controller manages an array of view controllers, but as a “stack” data structure (last in, first out). The “root” element of the array – a view controller – is known and defined at design time. The app enables a user to perform an action that causes another view + view controller to become active. The new view controller is added to the navigation controller array by adhering to stack principles: It gets “pushed” onto the stack, and when the user has finished working with the view, the user taps a “back” button on the left side of the navigation bar at the top of the screen, which causes the view controller to be “popped” off the stack.

A typical navigation-based app style enables a data and/or task hierarchy to be presented. Often, you will see this implemented as “drilling down” into deeper levels of data and/or task presentation.

.

.

.

.

.

.

.

.

  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: