iOS Development by David Casserly

From the Blog

Mar
13

iPhone: Number Pad with a decimal point (OS 3.0, OS 4.0) using public API

Posted by admin on March 13th, 2010 at 6:05 pm

UPDATE: iOS 4.1 Now has this behaviour built into the SDK. You can set your keyboard type to be UIKeyboardTypeDecimalPad ! Finally !

Of the various keyboards you can choose when developing iPhone apps, the number pad doesn’t come with a decimal point. There is a blank button in the bottom left corner that doesn’t do anything, so I’m going to show you how to put a decimal point button there to look like this:
Screen shot 2010-03-13 at 17.40.13 Screen shot 2010-03-13 at 17.40.19

There are a few other tutorial around that show you how to do this, but i believe mine is better….because the code is simpler to use, its more flexible, and the UI colors and button states are perfectly matched to the rest of the keyboard (unlike some of the other tutorials) The code you use to implement this will look like this:

@interface DecimalPointNumberPadViewController : UIViewController <UITextFieldDelegate> {
	NumberKeypadDecimalPoint *numberKeyPad;
}
@end

@implementation DecimalPointNumberPadViewController
- (void) textFieldDidBeginEditing:(UITextField *)textField {
	numberKeyPad = [[NumberKeypadDecimalPoint keypadForTextField:textField] retain];
}
- (void)textFieldDidEndEditing:(UITextField *)textField {
	[numberKeyPad release];
}
@end
  • it works on any number of UITextFields that are displayed on your view controller.
  • It will only add one decimal point per text field.

To achieve this, here are the basic steps of what i do:

  1. Create a custom UIButton with clear background and dark grey text.
  2. For the highlighted state i change the background image of the button and the text color to be white
  3. I find the UIKeyboard in the application window and add the custom button at the required location
  4. I add a delegate to the button to listen for click events and pass the event to a handler which adds a decimal point to the current UITextField

Update 5th June 2010: OS4 compatible and using only public API

As using private API’s is against the SDK agreement, I’ve updated the code to remove references to any private API. It is also now compatible with OS 4.0.

Update 20th July 2010: This code was part of the app I’m working on and was accepted by apple.

A copy of my XCode project is here:

xcodeProjectDecimalPointNumberPad-v4

Thanks

Leave a Reply

101 Responses to iPhone: Number Pad with a decimal point (OS 3.0, OS 4.0) using public API

  1.  

    |

    2. ← Older Comments

  2. Bob1601 |

    July 29, 2010 at 9:04 am

    Hi,

    I’ve been working with this code and it seems to be working as in I’m not getting any errors but the decimal button just isn’t showing up. What am I missing? Has anyone else experienced something like this? I thought it might have something to do with the fact that I have 2 view controllers, but it still shouldnt really be causing that.

    If anyone can help it would be great. I’m pretty confused at this stage.

    Bob

  3. Ivan |

    July 30, 2010 at 6:59 pm

    I’m sure you are aware that you can receive notifications for when the keyboard appears. Why not use the UIKeyboardDidShowNotification instead of the timer to trigger the adding of the button? I guess it might be harder to animate it in in that case. The fact that the implementation uses a timer makes me uncomfortable though, but otherwise, great work.

  4. Ralf |

    August 2, 2010 at 7:44 pm

    Hi Bob1601,

    the code should also work with a flip view. You should be adding your delegate in Interface Builder. Just right click on the “files owner” and connect your input fields.

    Ralf

  5. James |

    August 4, 2010 at 11:08 pm

    Hi, i put your example in my code, but when the keypad dissapear, the button still in the view and is in nfornt of my tab bar, for hese reason my first tab button of my tab bar cant be use and when i clicked i activate the button. eny solution please?

  7. Ryan |

    August 6, 2010 at 2:41 am

    Wow..just what I’ve been looking for! You’re awesome.

    Although I’m having troubles getting it to work with my project. I’m using it in a TabBarController based app. I’ve included the NumberKeypadDecimalPoint.h and .m files and copy pasted the rest of the code, but no go. Is there a trick to using this with a TabBar app?

  8. Janice |

    August 6, 2010 at 5:29 pm

    Good work on this, however, I have 3 views using a UITabBarController and this works only on the last view. The other two views don’t show the decimal point at all. Has anyone gotten this error?

  16. Pingback: iPhone – Add the Return Key for UIKeyboardTypeNumberPad in iPhone SDK 4 « Eureka!

  17. admin |

    September 11, 2010 at 11:53 am

    UPDATE: iOS 4.1 Now has this behaviour built into the SDK. You can set your keyboard type to be UIKeyboardTypeDecimalPad ! Finally !

  18. Mawa |

    September 18, 2010 at 4:41 pm

    Hi,
    I got the SDK 4.1 and I cannot set the keyboard type to be UIKeyboardTypeDecimalPad, at least I do not see the option in Interface Builder.
    Where in code can I add this?
    thank you.

  19. Pingback: How to add a decimal point or a done button to the iphone number pad | Software Promotion + SEO

  20. pierre |

    September 26, 2010 at 8:21 pm

    hi,
    i’m a new developer on iphone.

    i tried to add your code to my project, but it doesn’t work: i added “NumberKeypadDecimalPoint.h”, “NumberKeypadDecimalPoint.m” and the image to the project (the are in the project folder).

    in the myproject.h i added:
    - #import “NumberKeypadDecimalPoint.h” at the beginning of the file (after the UIKit)
    - NumberKeypadDecimalPoint *numberKeyPad; in the interface
    - the property before the @end

    in the .m file i added:
    -@synthesize of my labels, my fields and “numberKeyPad”
    - i did “copy and past” of textFieldShouldBeginEditing, textFieldDidBeginEditing and textFieldDidEndEditing.

    when i tap on my text fileds, appear the normal number pad.

    i’m sure that the label are connected with the class: i can use their contents to calculate and display the result.

    can you help me to implement your code?

    thanks a lot!
    pierre

  22. Abhi |

    October 13, 2010 at 8:14 am

    Hi,

    I am adding this button to the keyboard when the phone is in Landscape orientation. No event i fired when I click on left part of the button. But if I click on right side or center it works. Anyone know why this is so???

    - Abhi

  23. Abhi |

    October 13, 2010 at 9:36 am

    Sorry,

    This issue is not for this particular button but it is applied to all the buttons in the left pane of the keyboard. Does anyone know about this?

    - Abhi

  24. admin |

    October 26, 2010 at 2:05 pm

    @Mawa

    There is a bug in XCode/Interface builder and it doesn’t show UIKeyboardTypeDecimalPad as an option. You can set it in your code in viewDidLoad() or somewhere else suitable.

  25. StatCoder |

    October 31, 2010 at 7:08 pm

    What happens if the device is using an OS less than 4.1? Will it just show a numeric keypad without the decimal? Also, this still isn’t the ideal numeric keypad. It still is arrange in the telephone keypad order with “1″ in the top left rather than the traditional calculator or keyboard numeric keypad with the “1″ in the lower left. It also has the letters from the telephone keypad.

  26. Anthony D |

    January 5, 2011 at 2:53 am

    Hey, just wanted to say thanks for posting your work to show guys like me how to solve this problem. Thanks!!!

  28. Ann |

    February 9, 2011 at 4:59 pm

    Thank you for your decimal point code. I modified it to enter a negative sign. It operates perfectly, but for some reason the button background image doesn’t change. Any ideas?

    Thanks again.

  30. Deryck |

    March 2, 2011 at 9:58 am

    Thanks for the very helpful post.
    I believe that you can update to use -(void)setNeedsDisplay;

    - (void)drawRect:(CGRect)rect {
    //[super drawRect:rect];
    [super setNeedsDisplayInRect:rect];

    ….
    }

    cheers

  32. Ernest |

    March 12, 2011 at 9:45 pm

    First off, thanks for posting this great code. One problem is when the keyboard pops up, the view no longer shifts up (via the keyboardWillShow notifications). Is there something that needs to be changed to react to this ‘new’ number pad?

    Thanks again.

  34. Pingback: Actualización a iOS SDK 4.1 | Carlos Faria

  36. Pingback: Add the Return Key for UIKeyboardTypeNumberPad in iPhone SDK 4 | Iphone Dev Center

  40. Rad |

    July 14, 2011 at 6:44 pm

    cool idea, but …
    #1 what about the landscape mode ? the dot is not visible.

    #2 for me, the dot also shows up in other types of input fields that are in the same view (ie Numbers and Punctuations).

    cheers

  42. BizAffinchece |

    November 10, 2011 at 3:15 pm

    Today I found differences in the Internet unburden of ads – Boardfreeads.com. Enormous design, amiably intellect usability. And most importantly, at liberty ads and articles on all the topics that worth you. It should be added, the situation offers international.

    Who knows everywhere these [url=http://boardfreeads.com/]free ads[/url]?

  43. Nilesh |

    November 24, 2011 at 5:29 am

    I have used the code to show a DONE button on the numeric keypad. It works perfectly fine till iOS 4.3. However, I am facing a strange problem using this code in iOS 5.0. For any textfield having a numeric keypad, if there are any validations done and if we get an Alertview. Then once the focus goes back to the same text field the Keypad comes up without the DONE button (i.e. DONE button disappears) and strangely this happens in iOS 5.0 only. Could you please provide some inputs on this ? It would be of great help.

  44. Livegix |

    January 7, 2012 at 4:54 pm

    Just figured out, that there is a bug since iOS4.3. if Emoji Keyboard is enabled. If you use Emoji keyboard in i.e. messages and leave it (don`t change it back to normal), the Emoji Keyboard appears as well in the App where the NumberKeyPad usually should appear. Has somebody maybe already a fix for that? Thank´s in advance, Best regards, Jens

  45. Pingback: home cellulite treatment

  46. smartphone tips |

    April 5, 2012 at 9:21 am

    I just like the valuable information you provide for your articles. I’ll bookmark your weblog and test again right here regularly. I’m somewhat certain I’ll be told many new stuff right here! Best of luck for the following!

  47. Pingback: copic markers cheap ebay

  48. Pingback: copic markers in canada

    51. ← Older Comments