Navigation-based app style introduction

We have recently learned about the iOS tab bar style app. Now, we will introduce the other important app style, navigation-based.

.

You have learned that a tab bar style is suitable for presenting different modes of, or tasks for, the app.

In comparison, a navigation-based app 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.

To get started with the navigation-based app style, we will create a hierarchy of five views (with their view controllers). We’ll create an artificial hierarchical relationship between the view + view controllers.

.

Organization of a navigation-based app

A navigation-based application uses a Navigation Controller object to manage a stack of view controllers. (Each view controller is matched with a view.) The stack is implemented as an array, where the element at index 0 is the “root” view controller. Additional levels of view + view controllers are pushed onto the stack, in response to a user’s navigation action (e.g. selecting, tapping a button, etc.). Navigating up and down the stack is typically done one view + view controller at a time.

The first, or “root” view, is loaded when the application launches. Using Interface Builder, we configure the Navigation Controller object in the MainWindow nib document to refer to this “root” view controller.

We will need to write some code to create and manage a navigation-based app’s structure and operation. (We will also periodically refer to these apps with a shorter name, “nav-based” apps.)

See the UINavigationController Class Reference documentation

See the View Controller Programming Guide for iOS documentation

.

Example app – “Nav Views”

Our introductory navigation-based app will have five view + view controllers. Each will have simple text and an image which will describe the process of creating a simple navigation-based app. Each will also have a button, which will be the trigger to navigate to the next level.

Step 1Step 2Step 3Step 4Step 5

.

Create a new project, based on the “Window-based Application” template. Future nav-based apps may use the template designed for that purpose, but not this one.

Similar to past apps, we follow a consistent task and coding pattern to create a nav-based app. As before, the pattern will help us reliably and consistently create such apps. For a nav-based app that uses standard views (i.e. it does not use table views), we will follow this sequence of steps:

  1. Create and configure the view that will be at the “root” of the navigation hierarchy
  2. Configure the application delegate
  3. Configure the MainWindow.xib document
  4. Create the next level, by a) creating and configuring its view + view controller, and b) configuring its “parent” view controller
  5. Repeat Step 4 for as many levels as you need

.

Each step is discussed in detail below.

.

Step 1 – Create and configure the view that will be at the “root” of the navigation hierarchy

Add a new view controller (“With XIB for user interface”). In our example app, it was named “Level0”.

In the .h interface, declare a method that will handle a UIButton tap. In the .m implementation, enter the empty code block for the method’s implementation (which will be added in Step 4).

Design the user interface. All our views in this app will have a UITextView, a UIImageView, and a UIButton. The button is connected to the method that was declared in the view controller.

.

Step 2 – Configure the application delegate

In the .h interface of the application delegate, add a navigation controller property, and mark it as IBOutlet so we can see it in Interface Builder.

In the .m implementation, import the “root”-level view controller header. Note: At each “level”, we need a reference to the “next level” view controller object. That’s why we do this here.

Synthesize the property, and manage the memory.

In the application:didFinishLaunchingWithOptions: method, add this line of code:

[window addSubView:navigationController.view];

.

Step 3 – Configure the MainWindow.xib document

Open MainWindow.xib. Add a Navigation Controller object to the nib document window. Configure it as follows:

Expand the Navigation Controller object, and its hierarchy.

Select the “View Controller…”, and open the Identity Inspector. Set its class to the root view controller you just created.

Select the “Navigation Item”, and open the Attributes Inspector. Set its title to something meaningful (and short, because this title will appear in a “back” button on the navigation bar at the top of the screen). We called ours “Step 1” in the example app.

Similar to what we did with the tab bar app, select the App Delegate. On the Connections Inspector, connect the navigationController outlet to the nib document’s Navigation Controller.

At this point in time, you should build and run your app. Our view should load. We have not yet defined any code for the button, so it doesn’t yet do anything.

.

Step 4 – Create the next level

This are two tasks in this step:

  • Creating and configuring its view + view controller, and
  • Configuring its “parent” view controller

.

Before proceeding, make sure you have a clear understanding of the “next level” view controller, and the “parent” view controller.

.

Creating and configuring its view + view controller

Similar to what you did in Step 1, add a new view controller (“With XIB for user interface”). In our example app, it was named “Level1”.

If there will be another level of navigation beyond this, in the .h interface, declare a method that will handle a UIButton tap. In the .m implementation, enter the empty code block for the method’s implementation.

Design the user interface. All our views in this app will have a UITextView, a UIImageView, and perhaps a UIButton. The button is connected to the method that was declared in the view controller.

.

Configure its “parent” view controller

In the .m implementation of the “parent” view controller (e.g. the Level0 if we are adding the Level1), import the “next”-level view controller header. (Reminder: At each “level” of execution control, we need a reference to the “next level” view controller object. That’s why we do this here.)

Go to the method that handles the “navigate to next level” message. (In our app, it will be the button handler.)

Follow this pattern:

  1. Create an instance of the “next”-level view controller, and name the nib file to be used.
  2. Configure the new view controller (we will set the new view controller’s title property with “Step 1”, which will appear in the top-of-screen nav bar.
  3. Push this new instance on to the navigation controller’s stack. Then, manage the memory.

.

Step 5 – Repeat Step 4 for as many levels as you need

Yes – it’s as simple as that. Repeat Step 4 for as many levels as you need.

The last level that you create does not need a button.

.


  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: