iphone Curl Image

In this tutorial will learn how to change the image on button click in curl format, this is done by coding. This application will be developed on View Based Application and the coding will be done only in View Controller file.

iphone Curl Image

In this tutorial will learn how to change the image on button click in curl format, this is done by coding. This application will be based on View Based Application and the coding will be done only in View Controller file, Here am not taking the Image View through the Interface Builder, we are doing it through the code. We use Interface Builder only to add toolbar and the Bar Button to the Toolbar and to keep the button in center i have used the space (Flexible Space) on both the side of button so that the button on Bar will be on center.

Final Image will look like this:

My project name is CurlImage and is Based on View based Application. Here i am taking two Image View to add the Image on Image View and also the view so the the image View can be placed on that and when the button is clicked Image will change in curl format, So to do this we have to write the action for the button and will declare the action for the button in .h file and will write the method in .m file and also write the property for the Image View and the View.

Add this to View Controller.h file:

UIView *containerView;

UIImageView *mainView;

UIImageView *flipToView;

@property (nonatomic, retain) UIView *containerView;

@property (nonatomic, retain) UIImageView *mainView;

@property (nonatomic, retain) UIImageView *flipToView;

- (IBAction)curlAction:(id)sender;

After declaring the variable for the Image View and the View, will define some of the constant variable and then will synthesize the variable in .m file. After doing this will add the view and also the image view into the view Did Load method, there will create view and after creating will add it to the Subview and after adding will create the frame for the Image View and also will set the image on it similarly will do for another Image View(Image on Image View is set by using UIImage imageNamed ).
After adding the view and the Image view to the subview will write the action for the button so that when the button is clicked the image will be changed for that we use if condition and through that the image is changed on bar button click.

Add this to View Controller.m file:

@synthesize containerView, mainView, flipToView;

- (void)viewDidLoad

{

[super viewDidLoad];

self.title = NSLocalizedString(@"TransitionsTitle", @"");

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];

frame = CGRectMake(0.0, 0.0, kImageWidth, kImageHeight);

self.mainView = [[[UIImageView alloc] initWithFrame:frame] autorelease];

self.mainView.image = [UIImage imageNamed:@"Wonder.jpg"];

[self.containerView addSubview:self.mainView];

CGRect imageFrame = CGRectMake(0.0, 0.0, kImageWidth, kImageHeight);

self.flipToView = [[[UIImageView alloc] initWithFrame:imageFrame] autorelease];

self.flipToView.image = [UIImage imageNamed:@"Screen1.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];

}

After creating all the variable and also writing the action for the bar button will have to make the connection with Interface Builder and after making the connection will set the color of the tool bar as shown and then will save the changes in Interface Builder and to make the bar button center will use flexible space on both the side of the bar button. You can find the flexible space in library and drop it on both side of bar button.

Make connection in Interface Builder as shown:

Finally press Build And Go button

Download Here

Ads