There are some situations in iOS applications like animating bottom tool bar with the keyboard. That is, we need to animate the tool bar on top of keyboard when showing and hiding the keyboard. This can be done by using keyboard notifications in iOS. In this tutorial I will explain how to present the key board with tool bar on top of it with curve animations. For this we need to have some background knowledge in iOS local notifications.
Create a new project in Xcode using single view application template and name it as ToolbarAnimation. Now open ViewController.xib file, add UILable, UITextfield and UIToolbar outlets and also connect them with the associated objects in ViewController class. .xib file look like this
Build and run the code you will see the following screens.
Observe that, tool bar is at the bottom of the screen. Once you tapped on text field we need the tool bar to be animated with the keyboard. Here second screenshot is not showing the desired result. For this we need to register the controller with two keyboard notifications UIKeyboardWillShowNotification, UIKeyboardWillHideNotification. Before continue with notifications, we need to learn some basic things about NSNotificationCenter. As per the documentation, an NSNotificationCenter object (or simply, notification center) provides a mechanism for broadcasting information within a program. An NSNotificationCenter object is essentially a notification dispatch table. To register an object with a notification center to receive notifications we need to call addObserver:selector:name:object method. Open viewDidLoad method of ViewController.m file and register the notifications as follows.
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
For selector parameter we have given two selector names as keyboardWillShow: and keyboardWillHide: these selectors specifies the message the receiver sends notificationObserver to notify it of the notification posting. Hence we need to implement these two selectors such that they can perform a particular task when a notification is posted. Here when keyboard will show notification is posted, we want the tool bar to be animated on top of keyboard. This can be achieved by adding following code.
{
UIViewAnimationCurve animationCurve = [[[notification userInfo] valueForKey: UIKeyboardAnimationCurveUserInfoKey] intValue];
NSTimeInterval animationDuration = [[[notification userInfo] valueForKey: UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardBounds = [(NSValue *)[[notification userInfo] objectForKey: UIKeyboardFrameBeginUserInfoKey] CGRectValue];
[UIView beginAnimations:nil context: nil];
[UIView setAnimationCurve:animationCurve];
[UIView setAnimationDuration:animationDuration];
[aToolBar setFrame:CGRectMake(0.0f, self.view.frame.size.height – keyboardBounds.size.height – aToolBar.frame.size.height, aToolBar.frame.size.width, aToolBar.frame.size.height)];
[UIView commitAnimations];
}
The above code establishes the synchronization between keyboard and tool bar. We can write the same code to implement the keyboardWillHide method except tool bar frame. i,e Copy the same code with the following tool bar frame.
Now add the following action method at the end of .m file and connect it with dismiss button placed in tool bar item.
{
[aTextField resignFirstResponder];
}
Now build and run the code you will see the tool bar animation along with the keyboard. If you tap on dismiss button then tool bar will again animate along with keyboard hide animation.
