Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS 8
Code

iOS 8: Crear un teclado personalizado en Swift

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

A partir de iOS 8, tus aplicaciones pueden ampliar la funcionalidad personalizada y el contenido más allá de tu aplicación, y ponerlo a disposición de los usuarios mientras utilizan otras aplicaciones o el sistema operativo. Una forma de extender el sistema operativo es creando un teclado personalizado.

En este tutorial voy a mostrarte cómo hacer tu propio teclado personalizado usando Swift y las nuevas API de extensión de aplicación. Antes de hacerlo, vamos a repasar qué puede hacer una extensión de teclado, qué no puede hacer y qué debe aprobarse para la App Store.

1. Información general

Un teclado personalizado reemplaza el teclado del sistema para los usuarios que desean capacidades, como un método de introducción de texto novedoso o la capacidad de ingresar texto en un idioma que el sistema operativo no admite.

La función esencial de un teclado personalizado es simple, responder a toques, gestos u otros eventos de entrada y proporcionar texto en forma de un objeto NSString no atribuido en el punto de inserción de texto del objeto de entrada de texto actual.

Después de que un usuario elige un teclado, permanece como el predeterminado cada vez que abre una aplicación. Por esta razón, el teclado debe permitir al usuario cambiar a otro teclado.

Hay dos elementos esenciales de desarrollo para cada teclado personalizado:
Confianza. Tu teclado personalizado le da acceso a lo que escribe un usuario, por lo que la confianza entre ti y tu usuario es esencial.
Una tecla "siguiente". La capacidad que permite a un usuario cambiar a otro teclado es parte de la interfaz de usuario de un teclado; debes proporcionar uno en tu teclado. - Guía de programación de extensión de la aplicación

Si solo necesitas agregar algunos botones al teclado del sistema, entonces debes buscar vistas personalizadas para la entrada de datos.

2. Requisitos y limitaciones

Lo que un teclado personalizado no puede hacer

Hay ciertos objetos de entrada de texto a los que tu teclado personalizado no puede escribir. Estos incluyen campos de texto seguros para ingresar contraseñas y objetos del teclado del teléfono, como los campos del número de teléfono en la aplicación Contactos.

Tu teclado personalizado no tiene acceso a la jerarquía de vista de la entrada, no puedes controlar el cursor y no puedes seleccionar texto. Además, el teclado personalizado no puede mostrar nada sobre la fila superior. El teclado del sistema no está limitado por estas restricciones. Por ejemplo, muestra una extensión cuando toca una tecla para mostrar al usuario qué tecla se tocó.

La línea roja muestra el límite superior de un teclado personalizado.

Sandboxing

De manera predeterminada, un teclado no tiene acceso a la red y no puedes compartir archivos con su aplicación que lo contiene. Para habilitar estas capacidades, establece el valor de la clave RequestsOpenAccess en el archivo Info.plist en YES. Al hacerlo, se expande la caja de arena del teclado como se describe en la Guía de programación de la extensión de la aplicación de Apple.

Si solicitas acceso abierto, tu teclado obtiene las siguientes capacidades, cada una con una responsabilidad concomitante:

  • Acceso a los servicios de localización y la base de datos de la libreta de direcciones, cada uno de los cuales requiere el permiso del usuario en el primer acceso
  • Opción para usar un contenedor compartido con la aplicación que contiene el teclado, lo que habilita características, como proporcionar una interfaz de usuario de administración de léxico personalizada en la aplicación que lo contiene
  • Capacidad de enviar golpes de teclado y otros eventos de entrada para el procesamiento del lado del servidor
  • Acceso a iCloud, que puede usar, por ejemplo, para garantizar que la configuración del teclado y tu léxico de autocorrector personalizado estén actualizados en todos los dispositivos propiedad del usuario
  • Acceso a Game Center y compra en la aplicación a través de la aplicación que lo contiene
  • Capacidad para trabajar con aplicaciones administradas si diseñas tu teclado para admitir la administración de dispositivos móviles (MDM)

Asegúrate de leer el documento Diseño de Apple para el Fideicomiso del Usuario, que describe tus responsabilidades para respetar y proteger los datos del usuario en caso de que solicites el acceso abierto.

3. Cómo funciona

En la forma más básica, tenemos una aplicación que contiene una extensión de teclado y un UIInputViewController que controla el teclado y responde a los eventos del usuario.

La plantilla de teclado personalizado contiene una subclase de UIInputViewController, que es el controlador de vista principal de tu teclado. Miremos la interfaz para tener una idea de cómo funciona.

  • inputView es la vista utilizada para el teclado, es lo mismo que la propiedad view
  • Se puede llamar al método dismissKeyboard (descartar teclado) para descartar el teclado
  • advanceToNextInputMode se usa para cambiar entre teclados
  • textDocumentProxy es el objeto que utilizarás para interactuar con la entrada de texto actual
  • UIInputViewController cumple con el protocolo UITextInputDelegate, que te notifica cuando la selección de texto o texto cambia a través de la selecciónWillChange, selectionDidChange, textWillChange y textDidChangeevents

4. Hacer un teclado de calculadora

Vamos a crear un teclado personalizado para hacer todo esto un poco más tangible. Haremos un teclado simple que pueda manejar entradas numéricas y operaciones simples. Vamos a usar un archivo XIB para la interfaz de usuario del teclado.

Paso 1: Crea un nuevo proyecto

Abre Xcode 6, crea una nueva aplicación de vista única y selecciona Swift como el lenguaje de programación. Nombra esto como CalculatorKeyboard.

Paso 2: Agrega un campo de texto

Abre Main.storyboard y arrastra un campo de texto de la Biblioteca de Objetos. Lo usaremos para probar el teclado más tarde. Centra el campo de texto y agrega las restricciones de diseño necesarias como se muestra a continuación.

Si llamas a textField.becomeFirstResponder() en viewDidLoad, el teclado se abrirá cuando inicies la aplicación.

Paso 3: Agrega la extensión del teclado

Selecciona el archivo de proyecto en Navegador de proyecto y agrega un nuevo objetivo haciendo clic en el botón más en la parte inferior.

Selecciona Extensión de aplicación a la izquierda, elige la plantilla de Teclado personalizado y asígnale el nombre Calculator.

Esto creará un nuevo grupo llamado Calculator, que contiene dos archivos KeyboardViewController.swift e Info.plist.

Paso 4: Limpiar

Abre KeyboardViewController.swift. El teclado de la plantilla tiene un botón, lo que permite al usuario cambiar entre teclados. Elimina el código en el método viewDidLoad.

Paso 5: Creando la interfaz de usuario

Haz clic con el botón derecho en el grupo Calculator y selecciona Nuevo archivo... Selecciona la sección Interfaz de usuario a la izquierda, elige Ver plantilla y asígnale el nombre de Calculator. Esto debería crear un archivo llamado Calculator.xib.

Abre el archivo XIB y, en el Inspector de atributos a la derecha, establece el tamaño en Forma libre y la barra de estado en Ninguno.

En el Inspector de tamaño, establece el ancho de la vista en 320 y la altura en 160.

Arrastra un botón de la Biblioteca de Objetos a la vista. En el Inspector de atributos, establece el título en 1. En el Inspector de tamaño, configura el ancho y alto del botón en 30. Mueve el botón a la esquina superior derecha de la vista hasta que se alinee con los márgenes.

Copia el botón haciendo clic y arrastrando el botón mientras presionas la tecla Opción. Coloca el segundo botón debajo del primero.

Selecciona los botones presionando Comando A y copia los botones. Coloca los nuevos botones debajo del primer y segundo botón.

Repite el proceso para crear otra columna de botones hasta que tengas cuatro columnas de botones.


A continuación, selecciona la columna de la izquierda y haz una copia que se alinee con el borde izquierdo de la vista.

Establece el ancho de los botones en 140 puntos. Reemplaza el botón superior izquierdo con una etiqueta que tenga el mismo tamaño que el botón. Cambia el nombre de los botones como en la captura de pantalla a continuación.

Proporciona a la vista un color de fondo azulado y establece el color de fondo de los botones en blanco con una opacidad del 15%. Y para la etiqueta de visualización, házlo negro con una opacidad del 15%. Establece el tamaño del texto en 18 puntos para cada objeto de interfaz de usuario y establece el color del texto en blanco. La interfaz de usuario debería verse así:

Paso 6: Cargando la interfaz de usuario

Primero tenemos que crear una propiedad para almacenar la interfaz de usuario.

Crea un método llamado loadInterface y llámalo en el método viewDidLoad del KeyboardViewController.

Paso 7: Probando el teclado

En este punto, deberías poder probar tu nuevo teclado. Con el esquema CalculatorKeyboard seleccionado, compila y ejecuta la aplicación en tu dispositivo. Esto agregará un nuevo teclado a tu dispositivo. Sin embargo, antes de poder usarlo, primero debes instalarlo.

Ve a Configuración > General > Teclado > Teclados y selecciona Agregar nuevo teclado. Allí encontrarás el teclado Calculator en la lista de teclados de terceros. Selecciona e instala el teclado. La próxima vez que abras el teclado deberías poder ver tu nuevo teclado presionando el botón siguiente del teclado.

Si estás utilizando el simulador de iOS, es posible que el teclado personalizado no funcione dentro de tu aplicación. Para ver el teclado, presiona Inicio y abre Spotlight.

Paso 8: Teclado Siguiente

Crea una propiedad para el siguiente botón de teclado en la clase KeyboardViewController.

Abre Calculator.xib, selecciona Propietario del archivo y en el Inspector de identidad cambia su clase a KeyboardViewController.

Haz clic con el botón derecho en el botón Siguiente Teclado y conecta una toma de referencia al Propietario del Archivo.

En el método loadInterface, agregamos una acción al botón nextKeyboard como se muestra a continuación.

Paso 9: Visualización del número

Crea una propiedad para la pantalla y conecta la toma de referencia en Interface Builder.

Crea un método llamado clearDisplay y llámalo en el método viewDidLoad, después de invocar loadInterface. La pantalla ahora debería mostrar 0 cuando abres el teclado.

Conecta el evento touch up inside del botón C al método clearDisplay en Interface Builder.

Paso 10: Número de entrada

Tiempo para manejar la entrada numérica. Cuando abres el teclado, se muestra un 0 en la pantalla. Si tocas una tecla numérica, deberías reemplazar la pantalla por ese número. Crea una propiedad llamada shouldClearDisplayBeforeInserting para implementar este comportamiento.

Crea un método llamado didTapNumber y conéctalo en Interface Builder a todos los botones numéricos para el evento touch up inside. El método usa el titleLabel del botón para determinar qué número se tocó.

Actualiza el método clearDisplay como se muestra a continuación.

El código del teclado está en un objetivo diferente al de tu aplicación. Debido a esto, los registros de depuración no son visibles. Para ver los registros del objetivo Calculator, abre el registro del sistema desde el simulador iOS.

Paso 11: Entrada de puntos

El botón para insertar un punto debe agregar un punto a la pantalla, pero solo si aún no hay un punto presente.

Paso 12: Insertar texto

El botón para insertar texto debe agregar el texto de visualización de la calculadora al punto de inserción. Para hacer esto, usamos la propiedad textDocumentProxy como se muestra a continuación.

Paso 13: Operaciones de manejo

Debido a que estamos implementando un teclado simple que no admite árboles de expresiones, 1 + 2 * 3 será igual a 9. Vamos a utilizar un modelo más simple en el que la calculadora tenga una ranura de memoria interna en la que pueda aplicar operaciones.

Tomemos una entrada simple para entender cómo funciona el algoritmo de la calculadora:

  • Toques de usuario 1, la pantalla debería cambiar de 0 a 1
  • Toques de usuario +, la calculadora debe recordar agregar el siguiente número ingresado a 1
  • Toques de usuario 2, la pantalla debería cambiar de 1 a 2
  • Toques de usuario *, la pantalla y la memoria interna de la calculadora deben cambiar a 3, la calculadora debe recordar multiplicar la memoria interna con el siguiente número ingresado
  • Toques de usuario 3, la pantalla debe permanecer con un 3
  • Toques de usuario =, la calculadora debería aplicar la última operación y la pantalla debería cambiar a 9

Observaciones:

  • La calculadora debe recordar la siguiente operación para aplicar
  • Después de ingresar un número si se presiona una operación o igual, la calculadora debe aplicar la última operación recordada
  • Si el usuario presiona dos o más operaciones sin ingresar un número, la calculadora debe recordar la última
  • Después de aplicar una operación, la pantalla debería actualizarse con el resultado
  • Después de que se muestra un resultado, la pantalla debe despejarse antes de escribir otro número

Para implementar la calculadora, vamos a necesitar:

  • Una propiedad de memoria interna que almacena el resultado temporal llamada internalMemory 
  • Una propiedad que almacena la siguiente operación llamada nextOperation
  • Otra que recuerde si debe aplicar nextOperation después de presionar una operación

Crea un método llamado didTapOperation y conéctalo a los botones de operación touch up inside o en Interface Builder. El método usará el título del botón para determinar qué operación se presionó.

Crea e implementa el método computeLastOperation.

Actualiza clearDisplayMethod como se muestra a continuación. Cuando el usuario comienza a escribir el primer número, la memoria interna debe establecerse en 0 y nextOperation debe agregarse. De esta forma, después de que el usuario ingresa el primer número y presiona una operación, la calculadora recordará el número ingresado.

Paso 14: Toques finales

Usemos el atributo de declaración IBInspectable para agregar un radio de esquina a los botones y mostrar. Primero, crea una subclase de UIButton y UILabel.

En Interface Builder, selecciona los botones y cambia su clase a RoundButton en el Inspector de identidad. En el inspector de atributos, deberías ver el nuevo atributo de radio de esquina.

Haz lo mismo para la etiqueta de visualización. Tu teclado debería verse así.

Conclusión

Ahora deberías poder hacer un teclado personalizado en iOS utilizando las API's de extensión de la aplicación. Recuerda que cada teclado personalizado debe tener una forma de cambiar al siguiente teclado y que tu teclado no se puede conectar a Internet, acceder a los servicios de ubicación o hablar con la aplicación que lo contiene de manera predeterminada, pero puedes solicitar estas capacidades.

El sistema usará el teclado predeterminado para campos seguros, como campos de contraseña y número de teléfono. No olvides que el código para el teclado personalizado vive en un destino diferente. Debido a esto, los registros de depuración no son visibles. Para verlos, abre el registro del sistema desde el simulador de iOS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.