iOS Dev Notes

iOS Development From The Frontlines

Building an iPhone keyboard toolbar

with 4 comments

There are several reasons why you might want to have a UIToolbar above the keyboard in an iPhone app.

One is if you have a multi-line editable UITextView.  If you want the user to be able to press “Return” in the keyboard to place a newline in the text, then you’ll need some other way to dismiss the keyboard.  A common way to do this is to have a toolbar above the keyboard, containing “Done” button.  Note that you don’t always need to have a way to explicitly dismiss the keyboard.  Often there will be some kind of “submit” action already in place inside the navigation bar, just such as the “Send” button when you compose a new email.  However, there are times when it can be useful.

Another place you’ll see toolbars above the keyboard are in chat style apps.  For example, the iPhone Messages app:

The mobile Safari app uses a keyboard with a toolbar for switching between form fields and autofilling, as well as dismissing the keyboard:

Although there isn’t a built-in option for adding a UIToolbar above the keyboard, you can replicate it fairly easily.

What I like to do is have the toolbar offscreen, and then animate up right above the keyboard. I think this looks more seamless for users. So, I’ll add a UIToolbar to the view controller, and place right below the bottom of the screen. In a normal portrait oriented iPhone app with a status bar, the Y value will be at 460. I also like to make the toolbar partially transparent (an alpha of around 0.60), so that users can see “beneath” the toolbar.

When the view controller appears, we want to be notified of keyboard events so that we can show the toolbar in response to the keyboard appearing and disappearing:

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
 
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}
 
- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
 
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillHideNotification object:nil];
}

In response to the keyboard appearing, we can animate the toolbar up from the bottom of the screen:

- (void)keyboardWillShow:(NSNotification *)notification {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3];
 
    CGRect frame = self.keyboardToolbar.frame;
    frame.origin.y = self.view.frame.size.height - 260.0;
    self.keyboardToolbar.frame = frame;
 
    [UIView commitAnimations];
}

I’ve found that 0.3 seconds matches the amount of time the keyboard takes to appear pretty well. The height of a keyboard on an iPhone is 260 points, so we subtract that from the height of the view and animate the toolbar to that position.

When the keyboard is dismissed, we do just the opposite:

- (void)keyboardWillHide:(NSNotification *)notification {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3];
 
    CGRect frame = self.keyboardToolbar.frame;
    frame.origin.y = self.view.frame.size.height;
    self.keyboardToolbar.frame = frame;
 
    [UIView commitAnimations];
}

In the case where the toolbar contains a “done” button, we can have an action that calls “resignFirstResponder” on the appropriate UITextView.

I’ve created a very simple app that contains an example of this on my github account: https://github.com/cwalcott/UIToolbar-Keyboard-Example. The app has a single UIViewController which contains a multi-line UITextView that takes up the whole window. Tapping inside the textview makes the keyboard appear, along with a translucent toolbar containing a “Done” button. The user can press “return” on the keyboard to move down inside the text view, and a “done” button inside the toolbar to dismiss the keyboard. Feel free to use this code as a starting point for your own keyboard toolbars.


Looking to add push notifications to your iOS app? Check out PushLayer, a service from the authors of iOSDevNotes.

Bookmark and Share

Subscribe for updates

Fill out the form below to join my newsletter. I'll also send you a bonus copy of my ebook, "5 Steps To Becoming a Better iOS Developer".

Written by cwalcott

February 16th, 2011 at 10:41 pm

Posted in UI

Tagged with , , , ,

4 Responses to 'Building an iPhone keyboard toolbar'

Subscribe to comments with RSS or TrackBack to 'Building an iPhone keyboard toolbar'.

  1. Hi,
    Thanks for the tutorial.
    I am trying to expand this tutorial and use UIDatePicker as input types the next button work great. Once I display the UIDatePicker and do a Previous Button that still works great.
    When I do a next now I land into no man’s land.
    The keyboard does not display.

    Please any help will be appreciated.
    Thanks,

    Bharati Adkar

    16 Feb 12 at 1:23 pm

  2. Or, you could use:

    myTextfield.inputAccessoryView = self.keyboardToolbar;

    On iOS 3.2 and above, that will automatically attach the toolbar to the top of the keyboard for myTextfield

    Dave

    6 Apr 12 at 1:09 pm

  3. [...] Walcott has a great write up on how you can add your own keyboard over at http://www.iosdevnotes.com. Her article is a little dated since the inputAccessoryView property [...]

  4. [...] Walcott has a great write up on how you can add your own keyboard over at http://www.iosdevnotes.com. Her article is a little dated since the inputAccessoryView property [...]

Leave a Reply