iPhone Programming Fundamentals: Understanding View Controllers : Page 3

Animating the Transitions

You've seen how to create a transition from one view to another using buttons. However, the transitioning happens very quickly, and isn't particularly exciting, visually. To live up to iPhone users' high expectations, you will need to add some animations to the transition. Fortunately, this is very easy using the APIs provided in the SDK.

In the VCExampleViewController.m file, add the following lines of code in bold:

-(IBAction) displayView:(id) sender{
   secondViewController = [[SecondViewController alloc] 
                           initWithNibName:@"SecondView" 
                           bundle:nil];
    
    [UIView beginAnimations:@"flipping view" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown 
          forView:self.view cache:YES];
    
    [self.view addSubview:secondViewController.view];
    [UIView commitAnimations];
}

Basically, the preceding code adds some animation during the transitioning process, setting the following parameters:

Figure 16. Smooth Animation: The transition between views is now a smooth page-turn animation.

• Animation duration to one second
• Animation curve to UIViewAnimationCurveEaseInOut (other available animation types are UIViewAnimationCurveEaseIn, UIViewAnimationCurveEaseOut, and UIViewAnimationCurveLinear)
• Animation transition type to UIViewAnimationTransitionCurlDown (other available animation transitioning types are UIViewAnimationTransitionFlipFromLeft, UIViewAnimationTransitionFlipFromRight, and UIViewAnimationTransitionCurlUp)

Press Command-r to test the application again. This time, watch what happens when you press the Display SecondView button (see Figure 16).

Of course, you want the animation to work both ways, so back in Xcode, add the following lines to the SecondViewController.m file:

-(IBAction) btnReturn:(id) sender {
    [UIView beginAnimations:@"flipping view" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    [UIView setAnimationTransition: UIViewAnimationTransitionCurlUp
       forView:self.view.superview cache:YES];
    
    [self.view removeFromSuperview];
    [UIView commitAnimations];
}

Figure 17. Flipping Back: The figure shows the flipping animation in action on the second view.

Press Command-r to test the application. When you press the Return button in the second view, the second view now has the page-flip transition as well (see Figure 17).

Passing Data Between Views

Sometimes you need to pass data from one view to another. The easiest way is to create a property on the target view and set (or retrieve) that property from the calling view.

Here's an example. Double-click the VCExampleViewController.xib file and add a DatePicker view to the View window (see Figure 18).

Figure 18. Enhancing the View: Add a DatePicker view to the first View.

In the VCExampleViewController.h file, create an outlet for this DatePicker view and then expose it as a property:

#import <UIKit/UIKit.h>
@interface VCExampleViewController : UIViewController {
    //---outlet for the DatePicker view---
    IBOutlet UIDatePicker *datePicker;
}
//---expose this outlet as a property---
@property (nonatomic, retain) UIDatePicker *datePicker;

-(IBAction) displayView:(id) sender;

@end

In the VCExampleViewController.xib window, control-click and drag the File's Owner Item to the DatePicker view and then select datePicker.

In the SecondViewController.h, create an object of type UIDatePicker and then expose it as a property:

#import <UIKit/UIKit.h>
@interface SecondViewController : UIViewController {
    //---object of type UIDatePicker---
    UIDatePicker *selectedDatePicker;
}
//---expose the object as a property---
@property (nonatomic, retain) UIDatePicker *selectedDatePicker;

-(IBAction) btnReturn:(id) sender;

@end

In the SecondViewController.m file, add the following lines (in bold) to the viewDidLoad method:

#import "SecondViewController.h"
@implementation SecondViewController
@synthesize selectedDatePicker;
- (void)viewDidLoad {
    //---display the date and time selected in the previous view---
    NSDateFormatter *formatter = [[[NSDateFormatter alloc] init] autorelease];
    [formatter setDateFormat:@"MMM dd, yyyy HH:mm"];
    
    UIAlertView *alert = [[UIAlertView alloc] 
                             initWithTitle:@"Date and time selected" 
                             message:[formatter stringFromDate:selectedDatePicker.date] 
                             delegate:self 
                             cancelButtonTitle:@"OK" 
                             otherButtonTitles:nil];
    [alert show];
    [alert release];    
    [super viewDidLoad];
}
- (void)dealloc {
    //---release the memory used by the property---
    [selectedDatePicker release];
    [super dealloc];
}

Finally, in the VCExampleViewController.m file, add the line shown in bold:

#import "VCExampleViewController.h"
#import "SecondViewController.h"
 
@implementation VCExampleViewController
SecondViewController *secondViewController;
@synthesize datePicker;
-(IBAction) displayView:(id) sender{
secondViewController = [[SecondViewController alloc] 
                                initWithNibName:@"SecondView" 
                                bundle:nil];
    //---set the property of the second view with the DatePicker view in the current view---
    secondViewController.selectedDatePicker = datePicker;

Figure 19. Passing Values Between Views: The second view now displays the date and time selected from the DatePicker in the first view.

     [UIView beginAnimations:@"flipping view" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:
          UIViewAnimationTransitionCurlDown 
          forView:self.view cache:YES];
    
    [self.view addSubview:secondViewController.view];
    [UIView commitAnimations];    
}

Press Command-r to test the application. Select a date and time in the DatePicker view and press the Display SecondView button. The second view will now display the date and time selected in the first view (see Figure 19).

You've seen how view controllers work, and how to add a new view controller to your iPhone application. You have also seen how to switch between two views and how to animate the transitioning process. Finally, you explored how to pass values between two views. As these operations form the basics of iPhone programming, you should be well on your way to creating your own iPhone applications.