Cómo usar Swift para diseñar un método de entrada personalizado en iOS 8

Diseñaremos e implementaremos un método de entrada simple que puede ingresar puntos y rayas, cambiar la estructura del teclado, eliminar caracteres y ocultarse. Este ejemplo genera la interfaz de usuario a través de código. Por supuesto, también podemos usar archivos Nib para generar interfaces; esto se tratará al final del tutorial. Cargar archivos nib puede tener un impacto negativo en el rendimiento.

Crear un proyecto

Abra Xcode6, cree una "Aplicación de página única" y luego seleccione Swift como lenguaje de programación.

Agregar un área de texto

Abra Main.storyboard y arrastre un área de texto desde la biblioteca de componentes. Usaremos esto para probar el teclado que diseñamos.

Centra el área de texto y añade las restricciones necesarias.

Sugerencia: si llamas textField.becomeFirstResponder() en viewDidLoad, este teclado aparecerá automáticamente cuando se abra la aplicación.

Añadir esta extensión de teclado

Selecciona este archivo de proyecto desde el navegador y añade un nuevo destino pulsando el botón.

Seleccione Extensión de aplicación y use la plantilla de teclado personalizado, nombrándola MorseCodeKeyboard.

Esto creará una nueva carpeta llamada MorseCodeKeyboard, que incluye 2 archivos KeyboardViewController.swift e Info.Plist.

Siguiente

Abra KeyboardViewController.swift Para cambiar entre diferentes teclados, este archivo de plantilla de teclado tendrá un botón. Coloque un nuevo método en el método viewDidLoad llamado addNextKeyboardButton.

func addNextKeyboardButton() { self.nextKeyboardButton = UIButton.buttonWithType(.System) como UIButton ?... ?var nextKeyboardButtonBottomConstraint = NSLayoutConstraint(elemento: self.nextKeyboardButton, atributo: .Bottom, relatedBy: .Equal , toItem: self.view, atributo: .Bottom, multiplicador: 1.0, constante: -10.0) self.view.addConstraints([nextKeyboardButtonLeftSideConstraint, nextKeyboardButtonBottomConstraint]) }

Para ordenar mejor la estructura de el código, cree un nuevo método llamado addKeyboardButtons y llámelo en viewDidLoad. Aunque aquí solo hay unos pocos botones, en un proyecto real habrá muchos más. Llame a addNextKeyboardButton en addKeyboardButtons.

clase KeyboardViewController: UIInputViewController { ?... ?override func viewDidLoad() { super.viewDidLoad() ?addKeyboardButtons() } ?func addKeyboardButtons() { addNextKeyboardButton() } ?... ?}

Punto

¡Ahora agreguemos un botón de punto y creemos una propiedad dotButton de tipo UIButton!.

clase KeyboardViewController: UIInputViewController { ?var nextKeyboardButton: UIButton! var dotButton: UIButton!... }

Agrega un método llamado addDot. Utilice el botón del sistema para inicializar una propiedad denominada dotButton. Agregue una función de devolución de llamada de evento TouchUpInside. Haga una fuente grande y agregue esquinas redondeadas, y agregue restricciones para limitarla a 50 puntos desde el centro horizontal y centrarla verticalmente. Este código debería ser similar a la sección nextKeyboardButton a continuación.

func addDot() { // inicializa el botón dotButton = UIButton.buttonWithType(.System) como UIButton dotButton.setTitle(".", forState: .Normal) dotButton.sizeToFit() dotButton.setTranslatesAutoresizingMaskIntoConstraints( false) ?// agregar una devolución de llamada dotButton.addTarget(self, action: "didTapDot", forControlEvents: .TouchUpInside) ?// agrandar la fuente dotButton.titleLabel.font = UIFont.systemFontOfSize(32) ?// agregar esquinas redondeadas dotButton.backgroundColor = UIColor(white: 0.9, alpha: 1) dotButton.layer.cornerRadius = 5 ?view.addSubview(dotButton) ?// hace que los centros verticales sean iguales; var dotCenterYConstraint = NSLayoutConstraint(item: dotButton, atributo: .CenterY , relatedBy: .Equal, toItem: view, atributo: .CenterY, multiplicador: 1.0, constante: 0)?// establece el botón 50 puntos a la izquierda (-) del centro horizontal var dotCenterXConstraint = NSLayoutConstraint(item: dotButton, atributo: .CenterX, relatedBy: .Equal, toItem: vista, atributo: .CenterX, multiplicador: 1.0, constante: -50) ?view.addConstraints([dotCenterXConstraint, dotCenterYConstraint]) }

Siguiente para guión , eliminar y ocultar el teclado, el proceso es relativamente similar. Este deleteButton utilizará el método deleteBackward del proxy, y luego hideKeyboardButton utilizará el método dismissKeyboard a través de KeyboardViewController.

Dibujar

El código relacionado con el guión es casi el mismo que el código del botón de punto. Para hacer que el botón DashButton sea horizontalmente simétrico con el botón de apuntar, simplemente cambie el signo de la constante en la restricción horizontal.

func addDash() { ... ?// establece el botón 50 puntos a la izquierda (-) del centro horizontal var dotCenterXConstraint = NSLayoutConstraint(item: dotButton, atributo: .CenterX, relatedBy: . Igual, toItem: vista, atributo: .CenterX, multiplicador: 1.0, constante: -50) ?view.addConstraints([dashCenterXConstraint, dashCenterYConstraint])

Eliminar atrás

Cuando se presiona Cuando descargado, el botón Eliminar utilizará deleteBackword para eliminar caracteres a través de textDocumentProxy. Esta restricción de diseño será simétrica con nextKeyboardButton (.Left -gt; .Right, .Bottom-gt; .Top)

func addDelete() { deleteButton = UIButton.buttonWithType(.System) as UIButton deleteButton. setTitle ("Eliminar", para Estado: .Normal) eliminarButton.sizeToFit() eliminarButton.setTranslatesAutoresizingMaskIntoConstraints(falso) eliminarButton.addTarget(self, acción: "didTapDelete", forControlEvents: .TouchUpInside) ?deleteButton.backgroundColor = UIColor(blanco: 0.9, alfa: 1) deleteButton.layer.cornerRadius = 5 ?view.addSubview(deleteButton) ?var rightSideConstraint = NSLayoutConstraint(elemento: deleteButton, atributo: .Right, relatedBy: .Equal, toItem: vista, atributo: .Right, multiplicador: 1.0 , constante: -10.0) ?var topConstraint = NSLayoutConstraint(elemento: deleteButton, atributo: .Top, relatedBy: .Equal, toItem: vista, atributo: .Top, multiplicador: 1.0, constante: 10.0) ?view.addConstraints([rightSideConstraint , topConstraint])

Ocultar el teclado

Cuando se presiona, este hideKeyboardButton llamará a dismissKeyboard en KeyboardViewController.

func addHideKeyboardButton() { hideKeyboardButton = UIButton.buttonWithType(.System) as UIButton ?hideKeyboardButton.setTitle("Ocultar teclado", forState: .Normal) hideKeyboardButton.sizeToFit() hideKeyboardButton.setTranslatesAutoresizingMaskIntoConstraints(false)? hideKeyboardButton.addTarget(self, acción: "dismissKeyboard", forControlEvents: .TouchUpInside) ?view.addSubview(hideKeyboardButton) ?var rightSideConstraint = NSLayoutConstraint(elemento: hideKeyboardButton, atributo: .Right, relatedBy: .Equal, toItem: ver, atributo: .Derecha, multiplicador: 1,0, constante: -10,0) ?var bottomConstraint = NSLayoutConstraint(elemento: hideKeyboardButton, atributo: .Bottom, relacionado por: .Equal, toItem: vista, atributo: .Bottom, multiplicador: 1,0, constante: -10,0) ?view.addConstraints([rightSideConstraint, bottomConstraint]) }

Usar archivos Nib

Si escribir restricciones no es lo tuyo, puedes crear un archivo de interfaz y agregarlo a tu inputView.

Crear un archivo de interfaz

Haga clic derecho en el grupo de archivos MorseCodeKeyboard y seleccione Crear nuevo archivo.

Seleccione Interfaz de usuario y luego Ver plantilla, denominada CustomKeyboardInterface.