Introducción

00_custom_keyboardUna de las novedades de iOS 8 son las extensiones, unos módulos que amplían la funcionalidad de las aplicaciones: teclados personalizados, widgets en la vista “Hoy”, elementos que permiten almacenar en la nube sin usar iCloud, editar fotografías o compartir contenido… En la segunda entrega de “Swift a base de ejemplos” vamos a crear un teclado personalizado para indicar nuestro estado de ánimo con dos teclas: una para la flamenca y otra para la caca con ojos. El ejemplo está hecho en Xcode 6 beta 5 y el código final está disponible en nuestro repo de GitHub.

Creando la app

Apple no permite extensiones independientes: deben estar incrustadas dentro de una app, así que el primer paso es crear una app nueva, a la que añadiremos el teclado y, ya de paso, lo probaremos. Para ello, creamos un nuevo proyecto de tipo iOS > Application > Single View Application, ponemos como nombre swift_custom_keyboard, elegimos Swift como lenguaje e iPhone como dispositivo.

Como necesitamos probar el teclado, lo más sencillo es añadir un Text Field a Main.Stoyboard. 02_text_fieldPara centrarlo y que quede bonito, en el inspector de atributos del View Controller, cambiamos los campos “Size” y “Orientation” a “iPhone 3.5-inch” y “Portrait” respectivamente y centramos el Text Field a ojo, o bien no tocamos estos campos y añadimos unas constraints al campo de texto.

01_simulated_metrics

El teclado: primeros pasos

Con esto ya tenemos la aplicación. Ahora vamos a crear el teclado. Hay que definir un nuevo target, de tipo Custom Keyboard. La ruta para crearlo es File > New > Target > iOS > Application Extension > Custom Keyboard03_target

Como Product Name indicamos FlamencacaKeyboard, como lenguaje, Swift y tanto en Project como en Embed in Application elegimos swift_custom_keyboard. Aparecerá una alerta preguntándonos  si queremos activar el esquema, le decimos que sí, y ya tenemos listo el esqueleto del teclado: un UIInputViewController al que añadir una vista.

El siguiente paso es crear una vista donde añadir las teclas: en el navegador de Xcode, dentro de la carpeta FlamencacaKeyboard, creamos un nuevo fichero de tipo View (File > New > File > iOS > User Interface > View) y lo llamamos KeyboardView.

Añadimos la vista al controlador. Para ello, en KeyboardViewController.swift, localizamos la función viewDidLoad() y justo a continuación de super.viewDidLoad() añadimos las siguientes líneas:

var views = NSBundle.mainBundle().loadNibNamed("KeyboardInterface", owner: self, options: nil)
var keyboardView = views[0] as UIView
self.view.addSubview(keyboardView)

Instalación del teclado en el dispositivo

En este punto ya podemos comprobar que nuestro teclado funciona: seleccionamos como target “swift_custom_keyboard”, ejecutamos la app en el emulador o en el dispositivo, y salimos al Springboard. Allí seguimos la ruta Settings > General > Keyboard > Keyboards > Add New Keyboard… En el bloque “Third-party extensions” debería aparecer un teclado llamado “swift_custom_keyboard”.

08_keyboard_selector

Lo seleccionamos, volvemos a la aplicación y ya podemos utilizar nuestro teclado. De momento, lo único que aparece es el botón “Next Keyboard”, que es un botón que añade automáticamente Xcode y sin el cual no aprobarán la app.
04_first_versionEsta primera versión no es muy espectacular, pero al menos tenemos las vistas creadas y enlazadas. Vamos a seguir mejorando.

El teclado: ¡Ahora con más teclas!

Dentro de “KeyboardInterface.xib” redimensionamos la vista: de nuevo, podemos cambiar los campos “Size” y “Orientation” a “iPhone 3.5-inch” y “Portrait” o los dejamos como están y ponemos constraints a los botones. Creamos cuatro UIButtons: uno para la flamenca, otro para la caca, otro para borrar y otro para mejorar el aspecto del botón “Next Keyboard”

Además, en Placeholders > File’s Owner, abrimos el inspector de identidad e indicamos que la clase es de tipo KeyboardViewController. Así luego podremos asignar las acciones más cómodamente.
06_custom_classSi ejecutamos de nuevo la app, veremos que los botones ya aparecen. Antes de definir la interacción vamos a limpiar el código: borramos las funciones didReceiveMemoryWarning, textDidChange y textWillChange, la definición de nextKeyboardButton y todo el ladrillo de código que aparece en viewDidLoad() desde “// Perform custom UI setup here” hasta el final de la función.

Añadimos las funciones asociadas a cada botón (en un nada práctico pantallazo, ya que WP+ SyntaxHighlighter Evolved se lían con los emojis)

07_button_codeY desde el KeyboardInterface.xib, creamos las conexiones de la manera tradicional, es decir, manteniendo pulsada la tecla ctrl, arrastramos desde el botón a la @IBAction correspondiente en KeyboardViewController.swift. El código es realmente sencillo: o bien vamos directamente al siguiente teclado utilizando una función proporcionada por Apple, o recogemos un proxy del texto e insertamos o borramos caracteres.

Últimos ajustes

Una vez que tenemos el teclado funcionando, podemos afinarlo un poco más. Por ejemplo, podemos ajustar la altura de la vista del teclado. Lamentablemente, hay un bug en la beta 5 y el ajuste no funciona. Esperemos que en la próxima revisión lo hayan arreglado. Lo que sí podemos hacer es mejorar los textos que acompañan al selector de teclado. Para ello, editamos el fichero de propiedades swift_custom_keyboard > Supporting Files > Info.plist y añadimos la siguiente entrada:

09_plist

En el selector de teclados, Flamencaca aparecerá ahora como

10_keyboard_selector

Por ir terminando, que es tarde ya y estos señores se querrán ir a casa

  • iOS ofrece las funciones necesarias para pasar al siguiente teclado, insertar y borrar texto, pero no hay API para las mayúsculas automáticas, autocorrección, dictado… si las queremos ofrecer, las tendremos que programar de cero.
  • Un teclado personalizado no admite copiar, cortar ni pegar. Tampoco se pueden utilizar para escribir contraseñas: el sistema cambiará a un teclado estándar.
  • Si creamos un teclado personalizado, Apple nos obliga a incluir en él el botón “Next keyboard”. En otro caso, nos rechazarán la app.
  • Una aplicación puede impedir el uso de los teclados personalizados.
  • Los teclados personalizados usan un sandbox restrictivo para evitar el uso malicioso por parte de los desarrolladores. Se puede optar por uno más amplio, pero para ello hay que ceñirse a las App Store Review Guidelines.
  • El debug de las extensiones ha pasado de no funcionar en absoluto a funcionar mal. Hay que activarlo a mano y no ofrece todas las funcionalidades del debug de una app. Disponéis de más información al respecto aquí.

Bibliografía consultada