56

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.

tobiasbayer
  • 10,269
  • 4
  • 46
  • 64
HM1
  • 1,684
  • 2
  • 18
  • 25
  • I answered a very similar question (linked to in my answer below: http://stackoverflow.com/a/13351686/937822) which creates a custom keyboard. I made it open source and put it on Github for all to use, and recently added an example with a hex keypad. If you only want a-c and 1-3, you would simply need to delete the extra buttons! – lnafziger Feb 19 '13 at 04:39

5 Answers5

38

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

Community
  • 1
  • 1
Jonah
  • 17,918
  • 1
  • 43
  • 70
  • 1
    This link is half-helpful. It tells you all about how possible it is to create a custom keyboard and what categories your text-accepting class must conform to in order to accept input from a custom keyboard... but tells you almost nothing about how to go about building the custom keyboard itself. A link to some example code would be very useful. – Robert Atkins Dec 22 '11 at 12:43
  • @Robert, you're right. I failed to find an answer and gave up. Let me know if you find a solution. – HM1 Feb 14 '12 at 02:43
  • 2
    I put together a basic example of implementing a couple of cases where you might want to customize input views, hopefully that's of some help. See updated answer. – Jonah Mar 13 '12 at 06:23
  • Jonah's examples are really awesome. From looking at these I was able to determine that you can simply instantiate a UIView object and assign it to your UITextField instance's inputView property - as in myTextField.inputView = [[UIView alloc] ...]; to override the keyboard – Nate Flink Mar 19 '12 at 21:06
  • 2
    this is a completely useless link – Bogdan Alexandru Aug 27 '13 at 12:51
5

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

Meet Doshi
  • 4,241
  • 10
  • 40
  • 81
Muhammad Towfique Imam
  • 1,351
  • 10
  • 16
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;
GeT
  • 550
  • 3
  • 12
  • Guys any improvement on this question,since some of you have done some research(and might have found a solution),please post if you have found something useful…. – Suraj K Thomas Dec 30 '13 at 11:48
2

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

Community
  • 1
  • 1
lnafziger
  • 25,760
  • 8
  • 60
  • 101
2

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.

bshirley
  • 8,217
  • 1
  • 37
  • 43