Outline

• iPhone Multiview Applications

Remembering Multiview App So Far

• Recall we were building an iPhone app starting from a Window-based only template that has two views: a Blue screen with a button and a Yellow Screen with a button.
• Pressing the button puts up an alert message for the given colored screen.
• At the bottom on the screen there is a tab bar that let's us switch between the two views.
• We had created all the main files of the Multiview app: SwitchViewController: .h .m, BlueViewController: .h .m, YellowViewController: .h .m, BlueView.xib, YellowView.xib.
• We then modified the App Delegate to have a SwitchViewController property and had the applicationDidFinishLaunching method add this as a subview of window.
• The last thing we did was modify the SwitchViewController.h and add properties for yellowViewController, blueViewController, as well as an IBAction switchViews.

Modifying MainWindow.xib

• The next thing we want to do is add a SwitchViewController to MainWindow.xib
• To do this open Interface Builder, select a View Controller from Library and drag it to the nib's main window.
• To make the View Controller a SwitchViewController, select Tools > Identity Inspector. In the class bar at the top of the resulting left pane, select as the class SwitchViewController.
• Next add a new view from the library to the switch controller middle pane in IB.
• To this view add a tool bar, and rename the button on the toolbar switch views.
• Finally, connect the action of the button to the switchViews function. (Open the connection inspector and drag switchViews to the button.)

SwitchViewController Implementation

#import "SwitchViewController.h"
#import "BlueViewController.h"
#import "YellowViewController.h"

@implementation SwitchViewController

@synthesize blueViewController;
@synthesize yellowViewController;


- (void)viewDidLoad {
        // set up blue controller
	BlueViewController *blueController = [[BlueViewController alloc] 
           initWithNibName:@"BlueView" bundle:nil];
	self.blueViewController = blueController;
        // initial use blue view
	[self.view insertSubview:blueController.view atIndex: 0]; 
             //index 0 behind everything
	[blueController release];
}

- (void) switchViews:(id)sender
{
	// load Yellow nib first time button is pressed
	if(self.yellowViewController == nil)
	{
		YellowViewController *yellowController =
		   [[YellowViewController alloc] 
                   initWithNibName:@"YellowView" bundle:nil];
		self.yellowViewController = yellowController;
		[yellowController release];
	}
        
        //check if not Blue View
	if(self.blueViewController.view.superview == nil)
	{
		[yellowViewController.view removeFromSuperview];
		[self.view insertSubview:blueViewController.view atIndex:0];
	}
	else
	{
		[blueViewController.view removeFromSuperview];
		[self.view insertSubview:yellowViewController.view atIndex:0];
	}
	
}
//... rest of boilerplate code unchanged

- (void)dealloc {
    [blueViewController release];	
    [yellowViewController release];
    [super dealloc];
	
}

@end

Quiz

Implementing Content Views

• First, we modify the BlueViewController.h and YellowViewController.h
• This is essentially the same in both cases, so I am only showing the blue case:

  #import <UIKit/UIKit.h>
  
  
  @interface BlueViewController : UIViewController {
  }
  -(IBAction) blueButtonPressed: (id) sender;
  
  @end
  
  

• Next we want to open the BlueView.xib file and click on File's Owner, then open the Identity Inspector. We want to choose this to be BlueViewController.
• At this point, we can click on the button in our view in the middle pane of IB, open up the connection inspector and drag the Touch Up Inside event over to the File's Owner and select blueButtonPressed.
• We can do the equivalent thing for the YellowView.xib.

BlueViewController Implementation

• The implementation of the YellowViewController is about the same so we omit it.

  #import "BlueViewController.h"
  
  
  @implementation BlueViewController
  
  -(IBAction) blueButtonPressed:(id) sender
  {
  	UIAlertView *alert = [[UIAlertView alloc]
  		initWithTitle:@"Blue View Button Pressed" 
  		message:@"You pressed the button on the blue view" 
  		delegate:nil 
  	    cancelButtonTitle:@"Yep, I did" 
  		otherButtonTitles:nil];
  	[alert show];
  	[alert release];
  }
  //... unchanged boiler plate
  
  @end
  

Animating the Transition

• To animate the transition we can modify switchViews in the following way:

  - (void) switchViews:(id)sender
  {
  	// load Yellow nib first time button is pressed
  	if(self.yellowViewController == nil)
  	{
  		YellowViewController *yellowController =
  		   [[YellowViewController alloc] 
                       initWithNibName:@"YellowView" bundle:nil];
  		self.yellowViewController = yellowController;
  		[yellowController release];
  	}
  	
  	[UIView beginAnimations:@"View Flip" context:nil];
  	[UIView setAnimationDuration:1.25];
  	// next control speed at begin and end of animation
  	[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
  	
  	UIViewController *coming = nil;
  	UIViewController *going = nil;
  	UIViewAnimationTransition transition;
  	
  	if(self.blueViewController.view.superview == nil)
  	{
  		coming = blueViewController;
  		going = yellowViewController;
  		transition = UIViewAnimationTransitionFlipFromLeft;
  		/*
  		   Other possibilities:
  		   UIViewAnimationTransitionFlipFromRight
  		   UIViewAnimationTransitionCurlUp
  		   UIViewAnimationTransitionCurlDown		 
  		*/
  	}
  	else
  	{
  		coming = yellowViewController;
  		going = blueViewController;
  		transition = UIViewAnimationTransitionFlipFromRight;
  	}
  	
  	//cache makes an image of view in cache and 
          //then animate image rather than redraw view
  	[UIView setAnimationTransition:transition forView:self.view cache: YES];
  	[coming viewWillAppear:YES];
  	[going viewWillDisappear:YES];
  	[going.view removeFromSuperview];
  	[self.view insertSubview:coming.view atIndex:0];
  	[going viewDidDisappear:YES];
  	[coming viewDidAppear:YES];
  	[UIView commitAnimations];
  	
  }