iPhone Programming Fundamentals: Understanding View Controllers : Page 2

Adding a New View Controller

You've seen how easy it is to get started using the View-based Application template. All you need to do is to add some views to the View window of an XIB file and voila, everything works. Now, here's how to modify the application so that when a user presses the Button view, the application switches to another view that displays several other views. Showing different views depending on what the user selects is a very common action. You can use this example to gain a deeper understanding of how view controllers work.

Using the same project, add a new view controller class to the project. In Xcode, right-click on the Classes group and elect to add a new file. Choose the Cocoa Touch Classes group and then select the UIViewController subclass template (see Figure 9).

Figure 9. Cocoa Touch Classes: Select the UIViewController subclass to add a new view controller.

Name the view controller SecondViewController.m.

Next, add a new view XIB file so that you can create the UI with Interface Builder. Right-click on the Resources group in Xcode and add a new file. Choose the User Interfaces group and then select the View XIB template (see Figure 10). Name the file SecondView.xib.

Figure 10. Add a XIB File: From the User Interfaces group, select the View XIB file type to add a new View to your project.

Figure 11. New Files: The figure shows newly added files in the project.

Figure 12. Setting the Class: Set the File’s Owner item to the SecondViewController class.

Xcode should now display the files you just added (see Figure 11).

Double-click on the SecondView.xib file to edit it in Interface Builder. In the SecondView.xib window, select the File's Owner item, and view its Identity Inspector window (see Figure 12). Set its Class to SecondViewController.

Connect the File's Owner item to the View item by control-clicking it and then dragging it over the View item (see Figure 13).

Figure 13. Connect View: Connect the File's Owner item to the View item.

Figure 14. Second View: Change the background color of the View to orange, and add a Button view.

Double-click on the View item and change its background color to orange, and then add a Button view (see Figure 14).

In Xcode, add the following line to the SecondViewController.h file:

#import <UIKit/UIKit.h>
@interface SecondViewController : UIViewController {
}
//---action for the Return button---
-(IBAction) btnReturn:(id) sender;
@end

Back in Interface Builder, connect the Return button to the File's Owner item, and select btnReturn:.

Switching the Views

So far, you've added a new view controller class and connected it to a XIB file. You need to modify it so that pressing the “Display SecondView” button in the first view causes the second view to load.

In the VCExampleViewController.m file, when a user clicks the button, the following bold code lines add the view represented by the second view controller to the current view, thereby making the second view appear:

#import "VCExampleViewController.h"
//---import the header file for the view controller---
#import "SecondViewController.h"
 
@implementation VCExampleViewController
SecondViewController *secondViewController;
//---add the view of the second view controller to the current view---
-(IBAction) displayView:(id) sender{
    secondViewController = [[SecondViewController alloc] 
                                    initWithNibName:@"SecondView" 
                                    bundle:nil];
    [self.view addSubview:secondViewController.view];
}
- (void)dealloc {
    //---release the memory used by the view controller---
    [secondViewController release];
    [super dealloc];
} 
@end

In the SecondViewController.m file, code the btnReturn: action so that it removes the second view, making it disappear, and revealing the previous view:

#import "SecondViewController.h"
@implementation SecondViewController
-(IBAction) btnReturn:(id) sender {
    [self.view removeFromSuperview];
}

That's it. Press Command-r to test the application. Now, clicking the “Display SecondView” button, displays the second view (see Figure 15).

Figure 15. Changing Views: The buttons now let you switch smoothly back and forth between the two views.

Similarly, when you press the Return button, the second view disappears.