Adding custom buttons to iOS keyboard

This would be very small and simple tutorial.

Let’s define our goal. We need to attach custom buttons to standard iOS keyboard. For example, we want to add some symbols, so user won’t switch from letters to numbers too often. And this is very simple to accomplish.

UITextField and UITextView controls have inputAccessoryView property. This view is what we’re looking for. When we set it to any view, that view will appear above standard keyboard.

So, let’s use it to add more buttons.

UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0f, 
                                                                 0.0f,
                                                                 self.view.window.frame.size.width, 
                                                                 44.0f)];
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
    toolBar.tintColor = [UIColor colorWithRed:0.6f 
                                        green:0.6f 
                                         blue:0.64f 
                                        alpha:1.0f];
}
else
{
    toolBar.tintColor = [UIColor colorWithRed:0.56f 
                                        green:0.59f 
                                         blue:0.63f 
                                        alpha:1.0f];
}
toolBar.translucent = NO;
toolBar.items =   @[ [[UIBarButtonItem alloc] initWithTitle:@"!"
                                                      style:UIBarButtonItemStyleBordered
                                                     target:self
                                                     action:@selector(barButtonAddText:)],
                     [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                   target:nil
                                                                   action:nil],
                     // some more items could be added
                   ];
self.textField.inputAccessoryView = toolBar;

Here we’re creating UIToolbar, adding items to it and setting it as inputAccessoryView of UITextField. We’re also using tintColor property of UIToolbar to match background of toolbar with background of keyboard. Note, that keyboards on iPhone and iPad have different background colors.

On iPad our toolbar will be shown even if user splits the keyboard. This has one side effect – keyboard will not be actually split. Try example on iPad (or at least, iOS Simulator) to see how it looks.

This view will slide up with keyboard when user taps on UITextField and it will slide down when keyboard is dismissed.

Keyboard with Alert Appearance set looks slightly different. Therefore, we need to adjust color of toolbar.

alertToolBar.tintColor = [UIColor colorWithRed:0.15f 
                                         green:0.15f 
                                          blue:0.15f 
                                         alpha:1.0f];
alertToolBar.translucent = YES;

This is not ideal, but looks okay to me.

Here is one more code snippet. Here is how we insert text when user taps on our additional keys.

-(IBAction)barButtonAddText:(UIBarButtonItem*)sender
{
    if (self.textField.isFirstResponder)
    {
        [self.textField insertText:sender.title];
    }
    else if (self.alertTextField.isFirstResponder)
    {
        [self.alertTextField insertText:sender.title];
    }
}

UITextField implements -insertText: method of UIKeyInput protocol. This allows us to avoid handling cursor position and selection when adding new text.

Of course, you can use any other views instead of UIToolbar and style it in a way you want.

By the way, using this toolbar you can add buttons for symbols which you can’t enter with standard iOS keyboard, like, “NUMERO SIGN” – № (radar submitted).

Source code for this tutorial is available on GitHub. Use it freely under terms of MIT license.