Transitions in iPhone

Introduction

In this article I will create a Single View application. Here I will implement a transition view using two buttons, two image views and one view. Here we use a tool bar to make it interactive.

To understand it we use the following.

Step 1

Open XCode by double-clicking on it.

Step 2

Create a New XCode Project by clicking on it.

Step 3

Now select Single View Application and click on Next.

Step 4

Now provide your Product Name and Company Identifier.

Step 5

Select the location where you want to save your project and click on Create.

Step 6

Now for the code.

ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (nonatomic, retain) UIView *containerView;
@property (nonatomic, retain) UIImageView *mainView;
@property (nonatomic, retain) UIImageView *flipToView;
- (IBAction)curlAction:(id)sender;
- (IBAction)flipAction:(id)sender;
@end

ViewController.m

#import "ViewController.h"
@interface ViewController ()
@end
#define kImageHeight 200.0
#define kImageWidth 250.0
#define kTransitionDuration 0.75
#define kTopPlacement 80.0 // y coord for the images
@implementation ViewController
@synthesize containerView, mainView, flipToView;
- (void)dealloc
{
[mainView release];
[flipToView release];
[containerView release];
[super dealloc];
}
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = NSLocalizedString(@"TransitionsTitle", @"");
// create the container view which we will use for transition animation (centered horizontally)
CGRect frame = CGRectMake(round((self.view.bounds.size.width - kImageWidth) / 2.0),
kTopPlacement, kImageWidth, kImageHeight);
self.containerView = [[[UIView alloc] initWithFrame:frame] autorelease];
[self.view addSubview:self.containerView];
// The container view can represent the images for accessibility.
[self.containerView setIsAccessibilityElement:YES];
[self.containerView setAccessibilityLabel:NSLocalizedString(@"ImagesTitle", @"")];
// create the initial image view
frame = CGRectMake(0.0, 0.0, kImageWidth, kImageHeight);
self.mainView = [[[UIImageView alloc] initWithFrame:frame] autorelease];
self.mainView.image = [UIImage imageNamed:@"scene1.jpg"];
[self.containerView addSubview:self.mainView];
// create the alternate image view (to transition between)
CGRect imageFrame = CGRectMake(0.0, 0.0, kImageWidth, kImageHeight);
self.flipToView = [[[UIImageView alloc] initWithFrame:imageFrame] autorelease];
self.flipToView.image = [UIImage imageNamed:@"scene2.jpg"];
}
- (void)viewDidUnload
{
[super viewDidUnload];
self.containerView = nil;
self.flipToView = nil;
self.mainView = nil;}
- (IBAction)curlAction:(id)sender
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:kTransitionDuration];
[UIView setAnimationTransition:([self.mainView superview] ?
UIViewAnimationTransitionCurlUp : UIViewAnimationTransitionCurlDown)
forView:self.containerView cache:YES];
if ([self.flipToView superview])
{
[self.flipToView removeFromSuperview];
[self.containerView addSubview:self.mainView];
}
else
{
[self.mainView removeFromSuperview];
[self.containerView addSubview:self.flipToView];
}
[UIView commitAnimations];
}
- (IBAction)flipAction:(id)sender
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:kTransitionDuration];
UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight)
forView:self.containerView cache:YES];
if ([flipToView superview])
{
[self.flipToView removeFromSuperview];
[self.containerView addSubview:mainView];
}
else
{
[self.mainView removeFromSuperview];
[self.containerView addSubview:flipToView];
}
[UIView commitAnimations];
}
- (void)viewWillDisappear:(BOOL)animated
{
// restore the nav bar and status bar color to default
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault;
}
// called after this controller's view will appear
- (void)viewWillAppear:(BOOL)animated
{
// for aesthetic reasons (the background is black), make the nav bar black for this particular page
self.navigationController.navigationBar.barStyle = UIBarStyleBlackOpaque;
// match the status bar with the nav bar
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleBlackOpaque;
}
@end

ViewController.Xib

Step 7

Finally we click on the run button to show the output.

Step 8

Output 1 in iPhone:

Output 2 in iPhone:

Output 3 in iPhone: