Tuesday, 6 December 2011

Custom Number pad on iPad

Hello all , recently in one project I had to build a number pad keyboard which will allow user to enter just the number and that's it . On iPad unlike iPhone the UIKeyboardTypeNumberPad does not work . Even if you use this , it brings up the default keyboard . On iPad there is a pretty amount of space , so Apple might not have considered this UIKeyboardTypeNumberPad keyboard as the requirement on iPad . Well second thing about the default keyboard is that it is too big , cause I just want to enter numbers nothing else . So here we go and create our custom number pad to enter the numbers in a text field. To get an idea how it will look , just check out the image below.

Note : This number pad is very specific to iPad , as we will be using UIPopOverController designed for iPad only.


Two things we are going to do here .
1) We don't want the default keyboard to pop up when user hits the text field .
2) We want our number pad not to pop up from the bottom of the screen but just right below the text field in a popover .

Lets start with it . Create an iPad project , you can select the view based Application , then next select the iPad from the device list. Name it "CustomNumericKeyboard" . You should see below files in your project .

Drag and drop the below files in the project . You will find these in the sample code attached at the bottom.
1) NumericKBViewController.h
1) NumericKBViewController.m
1) NumericKBViewController.xib

Now your resources pane should look like this .

Next import the "NumericKBViewController.h" at the top of your "CustomNumericKeyboardViewController.h" . Now your class file should look like below .
#import <UIKit/UIKit.h>
#import "NumericKBViewController.h"

@interface CustomNumericKeyboardViewController : UIViewController

@property(nonatomic,retain) IBOutlet MTextField * textField;


Note down that I have created a custom UITextField class for this purpose , so I am creating an outlet with MTextField object instead of UITextField. MTextField class resides in the "NumericKBViewController.h" that we have added just now to our project. I will shortly highlight why I did this. Next add a text field on the xib file . At this moment don't try to connect the outlet that we have created . Before that you have to set the class for the text field as "MTextField" . How to do that ? check the screen shot below .

Select the text field , go to the right detail pane on the right side . In the third tab ( Identity inspector ) , it will show you the class name as UITextField . Just make it as MTextField . Once you set that , you can connect the IBOutlet that we have created in the class header with this text field on the xib.

In the viewDidLoad method of the view controller , add the below lines of code.

- (void)viewDidLoad
    [super viewDidLoad];
    [self.textField addTarget:self action:@selector(textFieldTouched:) forControlEvents:UIControlEventTouchDown];

Next add a method just after this

- (void)textFieldTouched:(id)sender {
    MPopOverController * popOver = [MPopOverController kbPopOverControllerForTextField:self.textField];
    [popOver presentPopoverFromRect:textField.frame inView:self.view permittedArrowDirections:UIPopoverArrowDirectionUp animated:YES];

And thats it , build and run your project , you should see a nice text field . Click on it and it will bring up the custom number pad which is far much easier and friendlier to enter the number compared to the default keyboard .

Download the Project Code here .

Try to understand the code , its actually quite easy. If you don't, let me explain that to you.

Below are some classes used.

text field and few more views have the property called as inputView . This view is nothing but actually the keyboard view in case of the text field . So the thing we did is we are overriding the -(UIView*)inputView getter for the property inputView. Here we return a transparent empty UIView object. Now if users taps the textfield , a transparent view will popup from the bottom instead of the keyboard . Id you want to test this go to this method and try changing the backgroundColor of the view that we return over here and you will see what happens.

Its a view controller which actually displays our number pad . It actually holds the reference of the text field for which we are displaying this view controller . For more info , you can check out the IBOutlets and IBActions on how it manages the number entry part .

Well Its simply a UIPopOverController subclass customized to suit our need . I will be using this custom number pad at lots of places in my project , so just wanted to make it a concrete independent utility that I can use with few lines of code at any place . And thats how even the demo project attached above uses it.

Well thats all for now . I hope this post will help you understand How to create Custom Keyboard , PopOverController to make things easy and really beautiful on iPad Apps . Keep checking for more posts soon . For any queries feel free to main me on bharat.jagtap@bitcode.in … Thank You !!