Animating View

admin — Thu, 21 Jan 2010 01:55:30 +0000

Make View move upward - UITextField Begin Editing

Attached is the video - what I was trying to do, it happens that my first iPhone app has UITextField positioned where the text keypad will appear also, which will hide the current UITextField. Well I realized that I will encounter this often, so I guess it's important to have this piece of code.

in your interface builder assign the UITextField as delegate

UITextField as delegate

on your .m file declare the static constant at the top of the code.

static const CGFloat KEYBOARD_ANIMATION_DURATION = 0.3;
static const CGFloat MINIMUM_SCROLL_FRACTION = 0.2;
static const CGFloat MAXIMUM_SCROLL_FRACTION = 0.8;
static const CGFloat PORTRAIT_KEYBOARD_HEIGHT = 216;
static const CGFloat LANDSCAPE_KEYBOARD_HEIGHT = 140;

after at the @implementation put this global variable to be used for all events

 CGFloat animatedDistance;

at the textFieldDidBeginEditing event

- (void)textFieldDidBeginEditing:(UITextField *)textField {
 
	CGRect textFieldRect = [self.view.window convertRect:textField.bounds fromView:textField];
    CGRect viewRect = [self.view.window convertRect:self.view.bounds fromView:self.view];
 
    CGFloat midline = textFieldRect.origin.y + 0.5 * textFieldRect.size.height;
    CGFloat numerator =
	midline - viewRect.origin.y - MINIMUM_SCROLL_FRACTION * viewRect.size.height;
    CGFloat denominator =
	(MAXIMUM_SCROLL_FRACTION - MINIMUM_SCROLL_FRACTION) * viewRect.size.height;
    CGFloat heightFraction = numerator / denominator;
 
 
	if (heightFraction < 0.0)
    {
        heightFraction = 0.0;
    }
    else if (heightFraction > 1.0)
    {
        heightFraction = 1.0;
    }
 
	UIInterfaceOrientation orientation =
	[[UIApplication sharedApplication] statusBarOrientation];
    if (orientation == UIInterfaceOrientationPortrait ||
        orientation == UIInterfaceOrientationPortraitUpsideDown)
    {
        animatedDistance = floor(PORTRAIT_KEYBOARD_HEIGHT * heightFraction);
    }
    else
    {
        animatedDistance = floor(LANDSCAPE_KEYBOARD_HEIGHT * heightFraction);
    }
 
	CGRect viewFrame = self.view.frame;
    viewFrame.origin.y -= animatedDistance;
 
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];
 
    [self.view setFrame:viewFrame];
 
    [UIView commitAnimations];
}

at textFieldDidEndEditing event

- (void)textFieldDidEndEditing:(UITextField *)textField {
    CGRect viewFrame = self.view.frame;
    viewFrame.origin.y += animatedDistance;
 
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];
 
    [self.view setFrame:viewFrame];
 
    [UIView commitAnimations];
}

This event is textfield resign responder, once you press the return keypad it will hide the iPhone keyboard, this is important to test if the view will come back to its previous state.

-(BOOL)textFieldShouldReturn:(UITextField *) textField
{
	[textField resignFirstResponder];
	return YES;
}

Demo.

Get the Flash Player to see this player.

Download the Source

Aaron Jefferson Villanueva's Blog Site» Cocoa Touch

Animating View