Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


iPhone Programming Fundamentals: Understanding View Controllers : Page 3

Find out how to use view controllers to handle switching views, animating transitions between views, and passing data between views.




Application Security Testing: An Integral Part of DevOps

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.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date