iOS8 custom input method tutorial: How to create a third-party input method

iOS8 brings a lot of cool features, one of which is the addition of third-party input methods as application extensions. We should pay attention to this moment because application extensions open up a whole new category of applications and payment operations. With millions of applications in the App Store, developers and users will usher in a brand new day.

In this post, I will show you how to create a third-party input method for your application that can perform system-wide input method operations.

This tutorial will be done in Swift. This is my first real project in Swift and I love it. Now, let's jump right into how to create a third-party input method.

First, let me show you the final effect of the input method we are going to build. The input method will be able to enter text in a text box, delete text, and implement other basic functions. More advanced functions such as context prediction and dictionary are beyond the scope of this tutorial.

Create an Xcode Project

Open Xcode 6 and create a new project. File->New->Project

Name the project CustomKeyboardSample and save it in a suitable location. This is our main project, but we also need to add extensions.

Now, let's add a Text Field to the project. Open the Main.Storyboard file and drag and drop a UITextField control on the view controller on the screen.

This is where we'll test our input. Now it's time to add the extension.

Click File-> New -> Target, select Custom Keyboard in the iOS/Application Extension list. Name the extension CustomKeyboard and select Swift programming language.

Add extensions

You should now have a new target folder called CustomKeyboard, with a file called KeyboardViewController.swift. Xcode has added some initial code for us and the keyboard should be functional (although not functional).

Now you can try running CustomKeyboardSample and try out the new input method.

When you click on the text box, the system keyboard will appear. We can use the globe icon at the bottom row to switch input methods, but this icon will not appear until we install our new keyboard.

Go to the Home screen (tap the menu bar, Hardware->Home). Open Settings and go to General->Keyboard->Keyboards. Tap "Add New Keyboard" and select CustomKeyboard. Turn on the switch to enable it and agree to the warning message.

Click Done and you’re ready to get started!

If you run the app again on the simulator, you can switch input methods. Click the globe icon until you see a keyboard with only the "Next Keyboard" button.

Now it's time to start adding input method buttons.

Open the file KeyboardViewController.h. In this file, you will see a class KeyboardViewController that inherits from UIInputViewController. This is the keyboard class that manages the view. We can add buttons to the containing view and it will be displayed in the keyboard.

Add a function called createButton

 func createButtonWithTitle(title: String) -> UIButton {
    let button = UIButton.buttonWithType(.System) as UIButton
    button.frame = CGRectMake( 0 , 0 , 20 , 20 )
    button.setTitle(title, forState: .Normal)
 button.sizeToFit()
    button.titleLabel.font = UIFont.systemFontOfSize( 15 )
    button.setTranslatesAutoresizingMaskIntoConstraints( false )
    button.backgroundColor = UIColor(white: 1.0 , alpha: 1.0 )
    button.setTitleColor(UIColor.darkGrayColor(), forState: .Normal)
    button.addTarget(self, action: "didTapButton:" , forControlEvents: .TouchUpInside)
 return button
 }

In the above code, we add a button programmatically and set its properties. We can do this with a nib file, but we will have to manage so many buttons. Therefore this is a better option.

This code calls a method called didTapButton in response to a button being pressed. Now let's add a method.

 func didTapButton(sender: AnyObject?) {
    let button = sender as UIButton
    let title = button.titleForState(.Normal)
    var proxy = textDocumentProxy as UITextDocumentProxy 
  
 proxy.insertText(title)
 }

In the above method, we use Swift to process a button event. The AnyObject type is like an object with an ID in Objective-C. We place a transmitter on the UIButton and then get the title text of the button, which is the text we want to enter in the text box.

To enter text using the input method, we use the textDocumentProxy object and call the insertText method.

The next step is to add a button to our keyboard view. Add two lines of code below the viewDidLoad method. You can delete the automatically generated code in the viewDidLoad and textDidChange methods.

override func viewDidLoad() {

super.viewDidLoad()

let button = createButtonWithTitle("A")

self.view.addSubview(button)

}

Added a button titled "A" to the input method. This is our key.

Now, run the app and tap the text field, and you should see the "A" key on your keyboard. (You may need to switch keyboards.)

Click this button and see what happens... Look! We already have the text A!

Ok, let's add some more buttons to make this thing look like a real input method.

Let's modify the code we added in the viewDidLoad method.

 override func viewDidLoad() {
 super .viewDidLoad() 
  
   let buttonTitles = [ "Q" , "W" , "E" , "R" , "T" , "Y" , "U" , "I" , "O" , "P" ]
 var buttons = UIButton[]()
   var keyboardRowView = UIView(frame: CGRectMake( 0 , 0 , 320 , 50 )) 
  
 for buttonTitle in buttonTitles{
       let button = createButtonWithTitle(buttonTitle)
 buttons.append(button)
       keyboardRowView.addSubview(button)
 } 
  
   self.view.addSubview(keyboardRowView)
Now with this new code, we create an array that contains the button titles, and we also create a list that contains these buttons. Each button is added to an array and a UIView, which will be our first row of buttons. Then add this view to the main keyboard image.
If you run this app, you may only see the P button because all the buttons are in the same position. We need to add some constraints programmatically so that they can align in a row.
Therefore, we will create a new function to create constraints.

func addIndividualButtonConstraints(buttons: UIButton[], mainView: UIView){
 for (index, button) in enumerate(buttons) { 
  
    var topConstraint = NSLayoutConstraint(item: button, attribute: .Top, relatedBy: .Equal, toItem: mainView, attribute: .Top, multiplier: 1.0 , constant: 1 ) 
  
    var bottomConstraint = NSLayoutConstraint(item: button, attribute: .Bottom, relatedBy: .Equal, toItem: mainView, attribute: .Bottom, multiplier: 1.0 , constant: - 1 ) 
  
    var rightConstraint : NSLayoutConstraint! 
  
 if index == buttons.count - 1 { 
  
        rightConstraint = NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .Equal, toItem: mainView, attribute: .Right, multiplier: 1.0 , constant: - 1 ) 
  
 } else { 
  
    let nextButton = buttons[index+ 1 ]
    rightConstraint = NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .Equal, toItem: nextButton, attribute: .Left, multiplier: 1.0 , constant: - 1 )
 } 
  
    var leftConstraint : NSLayoutConstraint! 
  
 if index == 0 { 
  
        leftConstraint = NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .Equal, toItem: mainView, attribute: .Left, multiplier: 1.0 , constant: 1 ) 
  
 } else { 
  
        let prevtButton = buttons[index- 1 ]
        leftConstraint = NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .Equal, toItem: prevtButton, attribute: .Right, multiplier: 1.0 , constant: 1 ) 
  
        let firstButton = buttons[ 0 ]
        var widthConstraint = NSLayoutConstraint(item: firstButton, attribute: .Width, relatedBy: .Equal, toItem: button, attribute: .Width, multiplier: 1.0 , constant: 0 ) 
  
        mainView.addConstraint(widthConstraint)
 } 
  
    mainView.addConstraints([topConstraint, bottomConstraint, rightConstraint, leftConstraint])
 }
 }

That's a long code, isn't it? With AutoLayout, you can't really set it up and you need to add all the constraints at once, otherwise it won't work. The main thing the code above does is add constraints with a margin of 1px to the top and bottom of each key. It also adds left and right margins of 1px to the left and right of the adjacent key (or to the row view if it's the first or last key in the row).

If we add a call to the above function in viewDidLoad, we should see the new row buttons appear.

Now this looks more like an input method. The next step is to add the other rows of the input method. To do this, let's do some quick refactoring. Create and implement new methods for adding each row of keys.

 func createRowOfButtons(buttonTitles: NSString[]) -> UIView { 
  
    var buttons = UIButton[]()
    var keyboardRowView = UIView(frame: CGRectMake( 0 , 0 , 320 , 50 )) 
  
 for buttonTitle in buttonTitles{
        let button = createButtonWithTitle(buttonTitle)
        buttons.append(button)
        keyboardRowView.addSubview(button)
 } 
  
    addIndividualButtonConstraints(buttons, mainView: keyboardRowView) 
  
 return keyboardRowView
 }

We have basically extracted the code from viewDidLoad into its own method. This new method stores the title text in an array and returns a view containing all the buttons for that row. Now we can call this code from anywhere we want to add code.

So our new vieDidLoad method looks like this:

 override func viewDidLoad() {
 super .viewDidLoad() 
  
    let buttonTitles1 = [ "Q" , "W" , "E" , "R" , "T" , "Y" , "U" , "I" , "O" , "P" ]
    let buttonTitles2 = [ "A" , "S" , "D" , "F" , "G" , "H" , "J" , "K" , "L" ]
    let buttonTitles3 = [ "CP" , "Z" , "X" , "C" , "V" , "B" , "N" , "M" , "BP" ]
    let buttonTitles4 = [ "CHG" , "SPACE" , "RETURN" ] 
  
    var row1 = createRowOfButtons(buttonTitles1)
    var row2 = createRowOfButtons(buttonTitles2)
    var row3 = createRowOfButtons(buttonTitles3)
    var row4 = createRowOfButtons(buttonTitles4) 
  
    self.view.addSubview(row1)
    self.view.addSubview(row2)
    self.view.addSubview(row3)
    self.view.addSubview(row4) 
  
 }

In the above code, we have added 4 rows of keys and then added these buttons, which in turn are added to the rows in the main view.

We can run the code now, but you will only see the last row because they are all in the same position. We need to add some auto layout constraints.

 func addConstraintsToInputView(inputView: UIView, rowViews: UIView[]){ 
  
 for (index, rowView) in enumerate(rowViews) {
        var rightSideConstraint = NSLayoutConstraint(item: rowView, attribute: .Right, relatedBy: .Equal, toItem: inputView, attribute: .Right, multiplier: 1.0 , constant: - 1 ) 
  
        var leftConstraint = NSLayoutConstraint(item: rowView, attribute: .Left, relatedBy: .Equal, toItem: inputView, attribute: .Left, multiplier: 1.0 , constant: 1 ) 
  
        inputView.addConstraints([leftConstraint, rightSideConstraint]) 
  
        var topConstraint: NSLayoutConstraint 
  
 if index == 0 {
            topConstraint = NSLayoutConstraint(item: rowView, attribute: .Top, relatedBy: .Equal, toItem: inputView, attribute: .Top, multiplier: 1.0 , constant: 0 ) 
  
 } else { 
  
            let prevRow = rowViews[index- 1 ]
            topConstraint = NSLayoutConstraint(item: rowView, attribute: .Top, relatedBy: .Equal, toItem: prevRow, attribute: .Bottom, multiplier: 1.0 , constant: 0 ) 
  
            let firstRow = rowViews[ 0 ]
            var heightConstraint = NSLayoutConstraint(item: firstRow, attribute: .Height, relatedBy: .Equal, toItem: rowView, attribute: .Height, multiplier: 1.0 , constant: 0 ) 
  
            inputView.addConstraint(heightConstraint)
 }
    inputView.addConstraint(topConstraint) 
  
    var bottomConstraint: NSLayoutConstraint 
  
 if index == rowViews.count - 1 {
        bottomConstraint = NSLayoutConstraint(item: rowView, attribute: .Bottom, relatedBy: .Equal, toItem: inputView, attribute: .Bottom, multiplier: 1.0 , constant: 0 ) 
  
 } else { 
  
        let nextRow = rowViews[index+ 1 ]
        bottomConstraint = NSLayoutConstraint(item: rowView, attribute: .Bottom, relatedBy: .Equal, toItem: nextRow, attribute: .Top, multiplier: 1.0 , constant: 0 )
 } 
  
    inputView.addConstraint(bottomConstraint)
 }
 }

This new method does something similar, except we added the latest Auto Layout code. It adds 1px constraints to the left and right sides of the row and below it relative to the main view and adds 0px constraints between each row and the row above it.

Now, we need to call this code from our viewDidLoad method.

 override func viewDidLoad() {
 super .viewDidLoad() 
  
    let buttonTitles1 = [ "Q" , "W" , "E" , "R" , "T" , "Y" , "U" , "I" , "O" , "P" ]
    let buttonTitles2 = [ "A" , "S" , "D" , "F" , "G" , "H" , "J" , "K" , "L" ]
    let buttonTitles3 = [ "CP" , "Z" , "X" , "C" , "V" , "B" , "N" , "M" , "BP" ]
    let buttonTitles4 = [ "CHG" , "SPACE" , "RETURN" ] 
  
    var row1 = createRowOfButtons(buttonTitles1)
    var row2 = createRowOfButtons(buttonTitles2)
    var row3 = createRowOfButtons(buttonTitles3)
    var row4 = createRowOfButtons(buttonTitles4) 
  
    self.view.addSubview(row1)
    self.view.addSubview(row2)
    self.view.addSubview(row3)
    self.view.addSubview(row4) 
  
    row1.setTranslatesAutoresizingMaskIntoConstraints( false )
    row2.setTranslatesAutoresizingMaskIntoConstraints( false )
    row3.setTranslatesAutoresizingMaskIntoConstraints( false )
    row4.setTranslatesAutoresizingMaskIntoConstraints( false ) 
  
    addConstraintsToInputView(self.view, rowViews: [row1, row2, row3, row4])
 }

Here is our new viewDidLoad function. You’ll see that we set the TranslatesAutoresizingMaskIntoConstraints to false for each row. This is to ensure that the Auto Layout method is used more often than the constraints.

Now if you run the app you will see that the input methods are all laid out properly and you can click on all the buttons to see them input into the text boxes.

There is also a small issue where non-text keys don't work properly (e.g. backspace, spacebar).

To fix this, we need to change our didTapButton method to add the correct methods for responding to these keys.

 func didTapButton(sender: AnyObject?) { 
  
    let button = sender as UIButton
    let title = button.titleForState(.Normal) as String
    var proxy = textDocumentProxy as UITextDocumentProxy 
  
 proxy.insertText(title) 
  
 switch title {
 case   "BP" :
        proxy.deleteBackward()
 case   "RETURN" :
        proxy.insertText( "\n" )
 case   "SPACE" :
        proxy.insertText( " " )
 case   "CHG" :
        self.advanceToNextInputMode()
 default :
        proxy.insertText(title)
 }
 }

Here we use a switch statement to identify the pressed keys. The backspace key calls the deleteBackward method on the delegate, the spacebar inserts a space and the CHG key changes the input method to the system input method or installs the next input method.

What's next?

That's it. This tutorial gave you a rough idea of ​​how to create a basic custom keyboard. Your homework is to refine this further and see if you can add more advanced features like adding uppercase letters using the Caps Lock key, switching to a number/symbol keyboard scheme, etc.

Link to this article: http://www.cocoachina.com/ios/20140922/9706.html