ViewTransition In iPhone

In this example we will see how to image changes using button pressed. This is the very simple example ,let see how it will worked.

Step 1: Create a Window base application using template. Give the application name “ViewTransitionInWindow”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add one UIViewController, select Choose New file -> Select cocoa touch classes group and then select UIViewController and corresponding xib file. Give the class name “RootViewController”.Add another three UIView class in the project. Give the name “FirstView”,”SecondView” and “ThirdView”.

Step 4: In the AppDelegate.h file we need to add UINavigationController in the file, so make the following changes in the file.


#import <uikit/UIKit.h>

@interface ViewTransitionInWindowAppDelegate : NSObject {
UIWindow *window;


@property (nonatomic, retain) IBOutlet UIWindow *window;



Step 5: Now open the AppDelegate .m file and make the following changes:


- (void)applicationDidFinishLaunching:(UIApplication *)application {

RootViewController *rootViewController;
rootViewController = [[RootViewController alloc] init];
rootViewController.view.backgroundColor = [UIColor greenColor];
localNavigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];

[window addSubview:localNavigationController.view];
// Override point for customization after application launch
[window makeKeyAndVisible];



Step 6: In the RootViewController.h file, we have added classes, define buttons and methods,so make the following changes in the file.


#import <uikit/UIKit.h>
#import "FirstView.h"
#import "SecondView.h"
#import "ThirdView.h"

@interface RootViewController : UIViewController {
FirstView *firstView;
SecondView *secondView;
ThirdView *thirdView;

IBOutlet UIButton * firstButton;
IBOutlet UIButton * secondButton;
IBOutlet UIButton * thirdButton;


@property(nonatomic,retain)IBOutlet UIButton *firstButton;
@property(nonatomic,retain)IBOutlet UIButton *secondButton;
@property(nonatomic,retain)IBOutlet UIButton *thirdButton;




Step 7: Double click the RootView.xib file and open it to the Interface Builder. Select File’s Owner icon and bring up Identity Inspector and change the class name into “RootViewController”. Drag three Round Rect button from the library and place it to the view, change the button name according to the First, Second and Third. Connect File’s Owner icon to the View icon and select view and drag from the File’s Owner icon to the Round Rect button and select firstButton. Select the firstButton and bring up Connection Inspector, drag from the TouchUpInside to the File’s Owner icon and select firstPressed: action. Do the same procedure for next two button and select secondPressed and thirdPressed action . Now save the .xib file, close it and go back to the Xcode.

Step 8: Open the RootViewController.m file, and make the following changes in the file:


self.navigationItem.leftBarButtonItem =
[[[UIBarButtonItem alloc]
initWithTitle:@"Back" style:UIBarButtonItemStyleDone
target:self action:@selector(removeView)] autorelease];


[self setNavigationBackButton];

firstView = [[FirstView alloc]
firstView.label = [[UILabel alloc] initWithFrame:
CGRectMake(0,50, 320,40)];
[firstView.label setBackgroundColor:[UIColor clearColor]];
[firstView addSubview:firstView.label];
[firstView.label setText:@"First View"];
[firstView.label setTextAlignment:UITextAlignmentCenter];
firstView.backgroundColor = [UIColor grayColor];
[self.view addSubview:firstView];

[self setNavigationBackButton];

secondView = [[SecondView alloc]
secondView.label = [[UILabel alloc] initWithFrame:
CGRectMake(0,50, 320,40)];
[secondView.label setBackgroundColor:[UIColor clearColor]];
[secondView.label setText:@"Second View"];
[secondView.label setTextAlignment:UITextAlignmentCenter];
secondView.backgroundColor = [UIColor blueColor];

[secondView addSubview:secondView.label];
[self.view addSubview:secondView];

[self setNavigationBackButton];

thirdView = [[ThirdView alloc]
thirdView.label = [[UILabel alloc] initWithFrame:
CGRectMake(0,50, 320,40)];
[thirdView.label setBackgroundColor:[UIColor clearColor]];
[thirdView.label setText:@"Third View"];
[thirdView.label setTextAlignment:UITextAlignmentCenter];
thirdView.backgroundColor = [UIColor orangeColor];

[thirdView addSubview:thirdView.label];
[self.view addSubview:thirdView];


self.navigationItem.leftBarButtonItem = nil;
[firstView removeFromSuperview];
[secondView removeFromSuperview];
[thirdView removeFromSuperview];



Step 9: Now compile and run the application in the Simulator.

You can Download SourceCode from here ViewTransitionInWindow

Leave a Comment: