Créer un clavier personnalisé pour iOS en Swift

iOS 8 a introduit de nombreuse nouveauté dont la capacité de créer des extensions de tout type dont des claviers. Dans ce tutoriel nous allons créer pas à pas une application qui ajoute un clavier personnalisé que l’on pourra utiliser sur toutes nos application iOS.

Squelette de l’application

Pour commencer nous allons créer une application iOS avec Xcode (ici Xcode 7.2.1). Pour cela ouvrez Xcode et créer un nouveau projet en choisissant le modèle avec une seule vue comme dans l’image ci dessous :

Ensuite donnez comme nom ClavierPerso à votre projet et vérifiez bien que Swift est le langage sélectionné.

Maintenant dans le storyboard ajouter un UITextField et lié le à votre ViewController :

Appelez cette variable inputTextField et ajouter ceci à votre viewDidLoad :

class ViewController: UIViewController {
  @IBOutlet weak var inputTextField: UITextField!

  override func viewDidLoad() {
    super.viewDidLoad()

    inputTextField.becomeFirstResponder()
  }
}

L’extension pour le clavier

Maintenant nous allons ajouter une nouvelle cible à notre projet afin de supporter les extensions de clavier. Pour cela soit vous aller dans le menu File > New > Target ou alors dans la liste des cible de l’application cliqué sur le + comme dans la capture d’écran ci-dessous :

Ensuite allez dans le menu Application Extension, choisissez CustomKeyboard puis cliquez sur Next.

Puis nommez votre extension ClavierSwiftTuto, après sur Finish et Xcode vous demandera si vous souhaitez activer l’extension donc cliquer sur Activate.

Maintenant tout est prêt pour créer votre propre clavier. Ouvrez le fichier KeyboardViewController.swift dans le dossier ClavierSwiftTuto nouvellement créé.

Le design du clavier

Maintenant nous allons créer l’interface du clavier. Pour ce faire ajoutons un fichier nib en allant dans le menu File > New > File puis sélectionnez View dans la catégorie UserInterface.

Appelez le fichier KeyboardView.xib et vérifier bien qu’il est ajouté à la cible ClavierSwiftTuto.

Ouvrez le le fichier KeyboardView.xib et définissez KeyboardViewController comme File’s Owner.

Maintenant dans la vue nous allons créer 3 bouttons :

Un bouton intitulé « Swift » qui écrira swift quand on clique dessus.
Un bouton intitulé « Tuto » qui écrira tuto quand on clique dessus.
Un bouton « Revenir au clavier par défaut » qui est obligatoire pour retourner aux claviers standards.

Bon le design n’est pas très beau, mais ce n’est pas le but de ce tutoriel. 🙂 Une fois que vous avec fait ça il faut lier le bouton « revenir au clavier par défaut » à la propriété nextKeyboardButton de KeyboardViewController.

Et créer une action pour chacun des boutons restants du clavier swiftTouchedAction: et tutoTouchedAction:. Revenons au fichier KeyboardViewController. et remplacez l’intégralité du contenu par celui-ci :

import UIKit

class KeyboardViewController: UIInputViewController {
  @IBOutlet var nextKeyboardButton: UIButton!

  override func viewDidLoad() {
    super.viewDidLoad()

    let keyboardNib = UINib(nibName: "KeyboardView", bundle: nil)

    if let keyboardView = keyboardNib.instantiateWithOwner(self, options: nil).first as? UIView {
      view.addSubview(keyboardView)
    }

    nextKeyboardButton.addTarget(self, action: "advanceToNextInputMode", forControlEvents: .TouchUpInside)
  }

  @IBAction func swiftTouchedAction(sender: AnyObject) {
    let proxy = self.textDocumentProxy

    proxy.insertText("Swift")
  }

  @IBAction func tutoTouchedAction(sender: AnyObject) {
    let proxy = self.textDocumentProxy

    proxy.insertText("Tuto")
  }
}

Pour faire simple dans la méthode viewDidLoad on charge le fichier nib pour ajouter la vue au clavier. On enregistre aussi la méthode advanceToNextInputMode à notre bouton obligatoire.

Puis dans chacun des callbacks de nos boutons on récupère le « receveur » pour écrire le texte correspondant. Ainsi, par example, à chaque fois que le bouton « Swift » est appuyé on insert le text « Swift » dans le receveur.

Le résultat

Lancer le projet une fois sur votre iPhone ou iPad puis rendez vous dans les réglages de votre appareil. Ensuite ouvrez Général > Clavier > Claviers > Ajouter un clavier… > ClavierPerso.

Maintenant quand vous aurez besoin d’écrire du texte vous pourrez changez de clavier et voir apparaitre le votre !

Conclusion

J’espère que ce tutoriel vous a été utile. Vous pouvez retrouver le support du tutoriel sur github. Comme vous pouvez le voir c’est très simple de créer un clavier sous iOS. Si vous avez des questions n’hésitez pas.

À bientôt pour de nouvelles aventures.