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;

@end

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.


MTextField
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.


NumbericKBViewController
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 .


MPopOverController
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 !!