How to Customize UIKeyboard by Adding Subviews

So, you want to get your personal touch into the apparently unreachable iPhone keyboard, something along the line of the image below maybe. Read on.

You have two possible approaches.

Approach 1: Adding the custom view on top of UIKeyboard view

You can create the custom view you want, position it above the UIKeyboard and animate it the same way UIKeyboard is. This means your code will be constantly listening to the UIKeyboardWillShow and UIKeyboadWillHide notifications in order to show and hide the custom view along with the keyboard. Also you have the hassle of having to write all the animation code for the custom view to mimic the keyboard going up and down.

This approach will work in most situations but my experience tells me that in certain situations when alternating between text fields of a form, the UIKeyboardWillHide and UIKeyboardWillShow notifications are sent so quickly that the UIkeyboard doesn’t go down. Though, our custom view goes down and comes up very quickly. If you, reading this, have any idea how to prevent this behavior, leave it in the comments.

Approach 2: Adding the custom view to the UIKeyboard view itself

Apple keeps its keyboard implementation private for some reason. So, you know, you shouldn’t be modifying UIKeyboard’s inner subviews. Anyway, you shouldn’t doesn’t mean you can’t.

You start with the same custom view you had in the first approach, but you will be adding it to the UIKeyboard subviews instead. This will save you from all the hassle of animating the custom view so that it has a similar behavior to the UIKeyboard’s.

The following block of code describes how to had your custom view to the UIKeyboard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/*!
 As of iPhone SDK 2.2.1:
 Keyboard view is in a separated window from our application main window.
 We're digging through the unknown here, but if for some wacky reason this
 code is broke, the only side effect will be that the keyboard dismiss 
 button will not be shown.
 */
- (void)modifyKeyboard:(NSNotification *)notification 
{
    NSValue *v = [[notification userInfo] valueForKey:UIKeyboardBoundsUserInfoKey];
    CGRect kbBounds = [v CGRectValue];
 
    for (UIWindow *keyboardWindow in [[UIApplication sharedApplication] windows]) {
 
        // Now iterating over each subview of the available windows
        for (UIView *keyboard in [keyboardWindow subviews]) {
 
            // Check to see if the description of the view we have referenced is UIKeyboard.
            // If so then we found the keyboard view that we were looking for.
            if([[keyboard description] hasPrefix:@"<UIKeyboard"] == YES) {
 
 
                // Your view specific code for the custom view goes here
                //
                UIView *customView = [self viewForDismissKeyboard:kbBounds];
                //
                // End of custom view code
 
                // Set a tag so that if you want to remove the view later, it is a lot easier.
                [customView setTag:666]; 
 
                // Add the desired subview to the keyboard.
                [keyboard addSubview:customView];
 
                // Unregister as observer if you don't want to change the keyboard again
                // and leave the custom view across the whole application.
                [[NSNotificationCenter defaultCenter] removeObserver:self];
            }
        }
    }
}

Where do you add this code?

Since my application shares the same keyboard type across the whole app, I put this code in application delegate so that the code runs only the first time the keyborad is requested—note that I’m removing the observer in line 36. Be sure to add the following line of code at the end of application delegate applicationDidFinishLaunching:.

1
2
3
4

    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(modifyKeyboard:) 
                                                 name:UIKeyboardWillShowNotification
                                               object:nil];

But if your application uses, let’s say a numeric and a text keyboard, and you want to add a decimal point just to the numeric keyboard, you will want to put this code in the view controller or view that holds the numeric text field. Then, after leaving the view, you shall make sure that you remove the view (controller) as an observer for the UIKeyboardWillShow and UIKeyboardWillHide notifications so that it does not affect other keyboard types. I suggest you to see UIViewController viewWillAppear and viewWillDisappear methods add/remove the custom view and unregister for UIKeyboardWillShow and UIKeyboardWillHide notifications.

If you need further help adapting this code to your application, be at will to contact me.