Create keyboard extension in IOS 8 SDK – (Part 2 – Keyboard Implementation)

/ IOS 8, Keyboard extension / By

IOS8 extensions

In IOS 8 Extensions are added  and it’s a wonderful feature that IOS user are waiting from long time. In last post we covered basics of creating keyboard extension in IOS 8 SDK, you can read it from Here

Now we have to create our keyboard and we are not using auto layout for this, we will create xib file and load our keyboard from it. Create a new xib file by clicking on File -> New -> File -> a dialogue will open up -> select User Interface under IOS -> select View -> Next -> Give your file a name, we are giving it MYKeyboardView -> Done/Finish

File selection interface Xcode
File selection interface Xcode

Open, MYKeyboardView.xib file and select view

Select view in xib file

Now on right side pane set Size property to Freeform

Set size to Freeform

Set view size to 320*216 standard size of iPhone keyboard

Drag three buttons on the view and set there tittle to A, B, C

Drag button to view in xib


 Now, open KeyboardViewController.h file and create an IBAction name tapOnButton.

#import
@interface KeyboardViewController : UIInputViewController


{

  
}
-(IBAction)tapOnButton:(id)sender;
@end

Open KeyboardViewController.m file and write down implementation for our IBAction Created by us. Wait a minute now question arises how would IOS system knows that what we want to type in the fields.For this we have textDocumentProxy property UIInputViewController class and our KeyboardViewController is inherited from UIInputViewController.

 Here our IBAction implementation looks like

-(IBAction)tapOnButton🙁id)sender
{
    UIButton *button = (UIButton *)sender;
    
    if ([button.titleLabel.text isEqualToString:@“A”])


    {
       [self.textDocumentProxy insertText:@”A”];
    }
    else if (titleLa[button.bel.text isEqualToString:@“B”])


    {

              [self.textDocumentProxy insertText:@”B”];

    }
    else if (titleLa[button.bel.text isEqualToString:@“C”])


    {

       [self.textDocumentProxy insertText:@”C”];
    }
}

Open MYKeyboardView.xib and give our IBAction to three buttons that we dragged to our view earlier. Before doing this we have to set class name or owner name of our .xib file. Select File owner and set class name to KeyboardViewController.

Set name of class to File Owner


 Add IBAction to three buttons.

Add IBAction to buttons

Now we have to load our view when keyboard loads, open KeyboardViewController.m and comment all code from ViewDidLoad method. Add below code to it, this will add our view when keyboard appears

    UIView *customKeyBoardview = [[[NSBundle mainBundle]loadNibNamed:@”MYKeyboardView” owner:self options:nil] objectAtIndex:0];
    [self.view addSubview:customKeyBoardview];

Run your app, you will see your keyboard with three buttons, if not then check your settings app may be you forgot to enable it. If keyboard does not appear in simulator then try reset it. Image shown below of CustomKeyboard running on simulator

Simulator running keyboard created from xib


 Wait we forgot to add globe button, if your app does not contain globe button Apple will reject your app. So we add a button to xib and create an IBOutlet in KeyboardViewController.h file.

 IBOutlet UIButton *globeButton;

Open KeyboardViewController.m and in viewDidLoad add below line of code

    [globeButton addTarget:self action:@selector(advanceToNextInputMode) forControlEvents:UIControlEventTouchUpInside];

Complete code will look like this

– (void)viewDidLoad
 {
    [super viewDidLoad];
    UIView *customKeyBoardview = [[[NSBundle mainBundle]loadNibNamed:@”MYKeyboardView” owner:self options:nil] objectAtIndex:0];
    [self.view addSubview:customKeyBoardview];
    [globeButton addTarget:self action:@selector(advanceToNextInputMode) forControlEvents:UIControlEventTouchUpInside];
}
Run your app now, and tap on globe button, it will change keyboard to next keyboard i.e. default keyboard.

Simulator running custom keyboard with globe button



Hope you enjoyed the post. Comments are welcomed 🙂