Custom Keyboard Extensions | App Extensions

Introduction

Custom Keyboard Extensions allow developers to create replacement keyboards for iOS devices. These keyboards can provide unique input methods and functionalities not available in the standard keyboard. This tutorial will guide you through the process of creating a custom keyboard extension from start to finish.

Setting Up the Project

To get started, open Xcode and create a new project. Select App under the iOS tab and click Next.

Enter a name for your project, select Swift as the language, and Storyboard as the User Interface. Click Next and save the project to your desired location.

Create a new target for the custom keyboard extension:

Go to File > New > Target.
Select Custom Keyboard Extension under the iOS tab and click Next.
Provide a name for your extension (e.g., MyCustomKeyboard) and ensure that the language is set to Swift.
Click Finish.

Designing the Keyboard

Open the KeyboardViewController.swift file in your new target. This is where you will design and implement your custom keyboard.

First, let's add a simple label to the keyboard to verify that it appears correctly:

class KeyboardViewController: UIInputViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.text = "Hello, world!"
        label.sizeToFit()
        label.center = view.center
        
        view.addSubview(label)
    }
}

Run the app to see your custom keyboard in action. You should see the label centered on the keyboard.

Adding Keys

Next, we will add keys to the keyboard. Create a custom view for the keys:

import UIKit

class KeyButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }

    private func setup() {
        self.backgroundColor = .lightGray
        self.setTitleColor(.black, for: .normal)
        self.layer.cornerRadius = 5
    }
}

Now, modify the KeyboardViewController to add key buttons to the keyboard:

class KeyboardViewController: UIInputViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let keyTitles = ["A", "B", "C"]
        let buttonWidth: CGFloat = 50
        let buttonHeight: CGFloat = 50
        let spacing: CGFloat = 10

        for (index, title) in keyTitles.enumerated() {
            let button = KeyButton(type: .system)
            button.setTitle(title, for: .normal)
            button.frame = CGRect(x: CGFloat(index) * (buttonWidth + spacing), y: 100, width: buttonWidth, height: buttonHeight)
            button.addTarget(self, action: #selector(keyPressed(_:)), for: .touchUpInside)
            view.addSubview(button)
        }
    }

    @objc func keyPressed(_ sender: UIButton) {
        if let title = sender.currentTitle {
            (textDocumentProxy as UITextDocumentProxy).insertText(title)
        }
    }
}

This code adds three buttons labeled "A", "B", and "C" to the keyboard. When a button is pressed, the corresponding letter is inserted into the text input field.

Advanced Features

You can further enhance your custom keyboard by adding features such as autocorrect, predictive text, and custom layouts. Here is an example of adding a backspace key:

let backspaceButton = KeyButton(type: .system)
backspaceButton.setTitle("⌫", for: .normal)
backspaceButton.frame = CGRect(x: CGFloat(keyTitles.count) * (buttonWidth + spacing), y: 100, width: buttonWidth, height: buttonHeight)
backspaceButton.addTarget(self, action: #selector(backspacePressed), for: .touchUpInside)
view.addSubview(backspaceButton)

@objc func backspacePressed() {
    (textDocumentProxy as UITextDocumentProxy).deleteBackward()
}

With this code, a backspace button labeled "⌫" is added to the keyboard. Pressing this button deletes the character before the cursor.

Testing and Deployment

To test your custom keyboard, you need to enable it in the device settings:

Go to Settings > General > Keyboard > Keyboards > Add New Keyboard.
Select your custom keyboard from the list.
Ensure that Allow Full Access is enabled if your keyboard requires network access.

After enabling the keyboard, you can switch to it using the globe icon on the standard keyboard.

Conclusion

Creating a custom keyboard extension for iOS can significantly enhance the user experience by providing unique and specialized input methods. This tutorial covered the basics of setting up a project, designing the keyboard, adding keys, and testing the extension. With these fundamentals, you can now explore more advanced features and create powerful custom keyboards for your apps.