Manage navigation between several views: UINavigationController [iPhone Tutorial]

A majority of iPhone applications offer navigate through data channels. For example, in the application "Contacts" on the screen above shows the list of groups, click on a group to see the contacts who compose it, etc.. This way of putting things, title to top the "Back" button and terribly effective transitions accompanying change of view is managed by a core component of the programming CocoaTouch: theUINavigationController . This tutorial allows you to create a very simple application with two views are linked according to this principle.

Start the project

Create a new project in XCode. You will probably be tempted to use the type of project "Navigation-based Application" which automatically creates the UINavigationController and a list of data. However, there are in this template a bit too much: we'll settle for "Window-based Application" that will allow us to understand the elements in place.

I called this project "TutoNavigation" I suggest you do the same. If you compile right away, it has a nice white screen: a first window (window) that is created for us by XCode.

Add UINavigationController

Open the file in TutoNavigationAppDelegate.h and declare a new object interface UINavigationController , we call NavController.

@interface TutoNavigationAppDelegate : NSObject <UIApplicationDelegate> {
 UIWindow *window;
 UINavigationController *navController;
}

Let's implement immediately the necessary code. To do this, open the file and locate the TutoNavigationAppDelegate.m method application: didFinishLaunchingWithOptions: This method, as its name indicates, is called as soon as the iPhone has completed all the routines that must be running at application launch . Add memory allocation and initialization of our NavController.

-  ( BOOL ) application of : ( UIApplication * ) application of didFinishLaunchingWithOptions : ( NSDictionary  * ) launchOptions { 
    NavController =  [ [ UINavigationController alloc ] init ] ;
     [ self.window addSubview : navController.view ] ;
     / / Override the point for customization Effective implementation launch. 
    [ self.window makeKeyAndVisible ] ;
     return  YES ;
 }

We added two instructions:

• The first (alloc-init) is the standard procedure to allocate memory and initialize our object
• The second adds a view from our window: this view is that of NavController.

Compile this first version. You will find a large title bar appeared on the simulator screen.

First sight

We will now add the first sight, one that will be displayed when launching the application. It will contain a button "Read more ..." which appear subsequently a second view details.

Add a class in our project to describe the first sight. To do this, choose "File"> "New"> "New File ..." and create an UIViewController subclass . Choose the automatic creation of associated XIB.

Call this new class FirstViewController.m and also create. associated h. Three files have been added to your project:

• FirstViewController.h
• FirstViewController.m
• FirstViewController.xib

Add our button in this view. Open the. H and add the declaration of a new method that we call seeDetails:

-  ( IBAction ) seeDetails :  ( id ) sender;

Open the. M, add a first implementation of this method:

-  ( IBAction ) seeDetails :  ( id ) sender { 
 NSLog ( @ "Button pushed" ) ;
 }

Finally open the file. Xib, add a RoundedRectButton , label it "Read more ..." by double-clicking on them.

Finally connect its action "TouchUp Inside" the method "seeDetails" that we just created:

• Right-click the button created;
• Click and drag the circle in front of the action "Touch Up Inside" to the object "File's Owner";
• In the small window that opens, choose the method seeDetails we just created.

It remains to integrate our view (FirstViewController) in the NavigationController that we created earlier. To do this, open the file "TutoNavigationAppDelegate.m" .

In the upper part of the file, add the line:

# Import "FirstViewController.h"

In the method application: DidFinishLaunchingWithOptions: we'll push our first view into the navigationController as follows:

-  ( BOOL ) application of : ( UIApplication * ) application of didFinishLaunchingWithOptions : ( NSDictionary  * ) launchOptions {    
  
 NavController =  [ [ UINavigationController alloc ] init ] ;
  [ self.window addSubview : navController.view ] ; 
 
 FirstViewController * firstVC =  [ [ FirstViewController alloc ] initWithNibName : @ "FirstViewController" bundle : nil ] ;
  [ NavController pushViewController : animated firstVC : NO ] ;
  [ firstVC release ] ; / / Override the point for customization Effective implementation launch. [ self.window makeKeyAndVisible ] ; return YES ;
 }
 
    
    
 
  

Note the following:

• For the first view of the application, we do not display with animation. It does not change anything anyway, but Apple recommends not animate first sight. This is a pattern of non-validation of application, no need to tempt fate.
• We release one of our object firstVC just after pushing the NavigationController. Indeed, it is a retain on each view which is pushed.

Small interlude: the UINavigationController, its title bar, battery views.

What a funny name "  pushViewController  "to display a view, why not call this method" displayViewController "or" show "? In fact, this name was not chosen at random. UINavigationController , in addition to displaying a beautiful blue bar is responsible for maintaining a stack of different views that we are going to pass. When we use pushViewController, the UINavigationController place at the top of the stack and displays views (with or without animation). All previous views (if they exist) are held in memory and retained by UINavigationController. Thus, when the current view is no longer useful (click the back button, for example), it is removed from the stack and hidden, it is the view that was just below will be displayed. The method for removing a view of the stack is called: "popViewController" . Push / Pop too easy!

And the title in the blue bar in? Well, UINavigationController will ask the view that is on top of the pile her name to display its name in the status bar. Thus, it is the view that decides the name to display in the title bar! To change this title, open the file "FirstViewController.m" in the method "initWithNibName" created by XCode add in the body of the method, the line:

/ / Custom initialization 
self.title =  @ "Home" ;

Push a second view

The same way as above, create a new class for our second detail view:

• File> New> New File ... and choose UIViewController sublass, do not forget to create. Xib same time;
• Name this class DetailViewController ;
• Open the file and add a UILabel DetailViewController.xib that you customize to your taste;
• Add him a title in the initWithNibName method, eg "Read more ...".

Return to our file FirstViewController.m to change the method seeDetails we coded earlier. We will, in this method to push an instance of the UINavigationController DetailViewController.

Start by adding a reference to the new class. Top of the file, add:

# Import "DetailViewController.h"

Then change the method seeDetails so that it becomes:

-  ( IBAction ) seeDetails :  ( id ) sender { 
 DetailViewController * detailVC =  [ [ DetailViewController alloc ] initWithNibName : @ "DetailViewController" bundle : nil ] ;
  [ self.navigationController pushViewController : animated detailVC : YES ] ;
  [ detailVC release ] ;
 }

Once again, please note that:

• When you add a view in a UINavigationController, the two objects to know and can access their property with UINavigationController self.navigationController
• As it is a second view, we clarified animated: YES
• Again, we do a release of the view that we have created, because the UINavigationController does aretain .

Third step ... There is no third step

And that's it! Compile and run your application, it works! UINavigationController takes care of everything else. I mentioned earlier the method of "pop" to remove a view of the stack, but supports UINavigationController, of itself, create the back button he called with the title of the view below in the stack.

So it's almost too short, but this is the 5th end of this tutorial dedicated to iPhone development. If you have followed until the end and you have in front of you an application with two views chained together, congratulations, this is a first step and we still put the good hands dirty this time! CocoaTouch classes are certainly a lot of work, but the important thing here is to understand how these classes are arranged and how they interact.

This tutorial would not exist without the excellent courses CS193P Stanford University and the famous pushAndPop presented by Evan Doll which is (loosely) based.

If you have any questions or if you encounter any difficulties, please do not hesitate to use the comments.Finally, and as always, if you liked this work, do not hesitate to make it known around!