Thursday 2 February 2012

Animating Views with iPhone Keyboard


Keyboards on iPhone can be a headache with their half screen size, especially when you have many input fields on a single view. Animating the view in an elegant way so that the input fields are always visible to the user  requires to slide up or down with the keyboard synchronously.
Following is a very simple view based project, that will demonstrate animating view with keyboard slide up/down.
But first, let’s see the problem. If you don’t change your view positioning when the keyboard becomes visible, basically you are likely to get something like this:
To fix that, what should be done is to listen the keyboard slide up/down notifications through the NSNotificationCenter, which viewWillAppear is a good place to start listening these two notifications.
-(void)viewWillAppear:(BOOL)animated
{
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(slideUpView:) name:UIKeyboardWillShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(slideDownView:) name:UIKeyboardWillHideNotification object:nil];
}
Second step is to change the positioning of the components according to the animation of the keyboard. The following methods are called when there is a notification from the keyboard:
-(void)slideDownView:(NSNotification*)notification
{
 [[[notification userInfo] objectForKey:UIKeyboardAnimationCurveUserInfoKey] getValue:&animationCurve];
    [[[notification userInfo] objectForKey:UIKeyboardAnimationDurationUserInfoKey] getValue:&animationDuration];
    [[[notification userInfo] objectForKey:UIKeyboardBoundsUserInfoKey] getValue:&keyboardFrame];

 [UIView animateWithDuration:animationDuration
    delay:0.0
    options:animationCurve
    animations:^{
     self.view.frame = CGRectMake(0, 0, 320, 480);
    }
    completion:^(BOOL finished){
     NSLog(@"Slide down Done..!");
    }];
}

-(void)slideUpView:(NSNotification*)notification
{
    [[[notification userInfo] objectForKey:UIKeyboardAnimationCurveUserInfoKey] getValue:&animationCurve];
    [[[notification userInfo] objectForKey:UIKeyboardAnimationDurationUserInfoKey] getValue:&animationDuration];
    [[[notification userInfo] objectForKey:UIKeyboardBoundsUserInfoKey] getValue:&keyboardFrame];
 //
 [UIView animateWithDuration:animationDuration
    delay:0.0
    options:animationCurve
    animations:^{
     self.view.frame = CGRectMake(0, -keyboardFrame.size.height + 70, 320, 416);
    }
    completion:^(BOOL finished){
     NSLog(@"Slide up Done..!");
    }];
}
Don’t forget to add .h file the following declarations:
// in controller's .h file
NSTimeInterval animationDuration;
UIViewAnimationCurve animationCurve;
CGRect keyboardFrame;
The final result is something like this
note 1: Feel free to download the source code (link). It also includes the slide down via the button.
note 2: The licence to this peace of code is Beerware, In short, “Should the user of the product meet the author and consider the software useful, he is encouraged to buy the author a beer ‘in return’ (or, in some variations, drink a beer in the author’s honor).”

0 comments:

Post a Comment

 

Copyright @ 2013 PakTechClub.