How to create a custom keyboard

Question

How do I go about creating a custom keyboard/keypad that will show up when some one taps on a UITextField? I would like to display a keypad with a, b, c, 1, 2, 3 and an enter button, nothing else. The keypad should work and behave like the standard keyboard does (in behavior) but it will definitely look different.

I can't find any example and the best I've found is to filter characters with existing keyboard which is an unacceptable solution.

Solution 1

I think you're looking for the "Text, Web, and Editing Programming Guide for iOS"

The UIKit framework includes support for custom input views and input accessory views. Your application can substitute its own input view for the system keyboard when users edit text or other forms of data in a view. For example, an application could use a custom input view to enter characters from a runic alphabet. You may also attach an input accessory view to the system keyboard or to a custom input view; this accessory view runs along the top of the main input view and can contain, for example, controls that affect the text in some way or labels that display some information about the text.

To get this feature if your application is using UITextView and UITextField objects for text editing, simply assign custom views to the inputView and inputAccessoryView properties. Those custom views are shown when the text object becomes first responder...

---

This might serve as a good introduction: customizing the iOS keyboard

Solution 2

You can use Custom-iOS-Keyboards library on Github.

Solution 3

First of all create a view (I did it in a separate nib file and loaded it this way):

    NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"ReducedNumericKeyboardView"
                                                   owner:self
                                                 options:nil];
    keyBView = (ReducedNumericKeyboardView*)[views objectAtIndex:0];

After it, I set it as input view for the text field where i want to use it (and actually, this is the short answer to your question ;) ):

    [self.propertyEditor setInputView:keyBView];  

When clicking into the field i do scroll the view pup (if necessary) to not cover the field:

CGRect textFieldRect = [self.tableViewController.view.window convertRect:propertyEditor.bounds fromView:propertyEditor];
CGRect viewRect = [self.tableViewController.view.window convertRect:self.tableViewController.view.bounds fromView:self.tableViewController.view];
CGFloat midLine = textFieldRect.origin.y+.5*textFieldRect.size.height;

CGFloat numerator = midLine - viewRect.origin.y - MINIMUM_SCROLL_FRACTION*viewRect.size.height;
CGFloat denominator = (MAXIMUM_SCROLL_FRACTION - MINIMUM_SCROLL_FRACTION)*viewRect.size.height;
CGFloat heightFraction = MIN(1, MAX(0, numerator/denominator));

animateDistance = floor(PORTRAIT_USER_INPUT_VIEW_HEIGHT*heightFraction);

CGRect viewFrame = self.tableViewController.view.frame;
viewFrame.origin.y -= animateDistance;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:USER_INPUT_ANIMATION_DURATION];
[self.tableViewController.view setFrame:viewFrame];
[UIView commitAnimations];

When editing is finished, I do scroll the view down:

        CGRect viewFrame = self.tableViewController.view.frame;
        viewFrame.origin.y += animateDistance;
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationBeginsFromCurrentState:YES];
        [UIView setAnimationDuration:USER_INPUT_ANIMATION_DURATION];
        [self.tableViewController.view setFrame:viewFrame];
        [UIView commitAnimations];

The constraints I use are set as follows:

static const CGFloat USER_INPUT_ANIMATION_DURATION = 0.3;
static const CGFloat PORTRAIT_USER_INPUT_VIEW_HEIGHT = 180;

static const CGFloat MINIMUM_SCROLL_FRACTION = 0.1;
static const CGFloat MAXIMUM_SCROLL_FRACTION = 0.2;

Solution 4

Unfortunately, the "Text, Web, and Editing Programming Guide for iOS" referenced above doesn't give any information on what to do with the character once you press a key. This is by far the hard part when implementing a keyboard in iOS.

I have created a full working example of a hex numberpad which can easily be customized with like you need.

Specific details are at my other answer on this subject: https://stackoverflow.com/a/13351686/937822

Solution 5

You want to set the value for

inputView

on your UITextField. You will need to fully implement a new keyboard or input mechanism in the view you provide.

Alternately,

inputAccessoryView 

can be used to add a small amount of functionality. The view will be placed above the system keyboard and will arrive and be dismissed with it.

View more solutions