Diario Swift – Día 5 – Cómo mover la vista cuando el campo está oculto debajo del teclado sin utilizar UIScrollView

Este problema es posiblemente de los más típicos que te puedes encontrar al desarrollar una app. Tienes un formulario con varios campos de texto, al seleccionar un campo para escribir, tu campo desaparece bajo el teclado. ¿Cómo hacer para que el usuario pueda seguir viendo lo que está tecleando?

El método recomendado por Apple: Utilizar un UIScrollView

Apple explica en su página para desarrolladores cómo solucionar este problema utilizando un UIScrollView.

En mi caso, no tengo ningún scroll view dentro de mi vista y no tengo ningún interés en meter uno para solucionar esto, así que este método no me parece el más adecuado.

Sin UIScrollView, también es posible

Ahora explicaré paso por paso lo que hay que hacer, pero si tienes prisa, puedes descargar el proyecto desde GitHub inmediatamente.

Como podrás ver en el proyecto, consta de un Table View Controller que tiene dos filas. La primera fila trata el caso en el que los campos de textos están posicionados en la parte inferior de la vista. La segunda fila trata el caso en que los campos de texto están posicionados en el centro de la vista.

El método que utilizo funciona siempre, estén donde estén los campos. Por eso he creado estos dos ejemplos para que se pueda ver en funcionamiento en dos casos diferentes. He visto en muchos sitios donde se proporciona una solución que sólo funcion para la mayoría de los casos pero no para todos. Este caso debería funcionar para cualquier posicionamiento aunque si encuentras algún caso que no funciona, no dudes en comentar o abrir una issue en GitHub.

1. Registro de notificaciones:
   Lo primero que tengo que hacer es registrar mi View Controller para que escuche las notificaciones del teclado.
   Swift

   override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) // 1. Escuchar las notificaciones del teclado. registerForKeyboardNotifications() } [...] // Registro notificaciones teclado. private func registerForKeyboardNotifications() { NSNotificationCenter.defaultCenter().addObserver(self, selector: "keyboardWillShow:", name: UIKeyboardWillShowNotification, object: nil) NSNotificationCenter.defaultCenter().addObserver(self, selector: "keyboardWillHide:", name: UIKeyboardWillHideNotification, object: nil) }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   override func viewWillAppear(animated: Bool) {     super.viewWillAppear(animated)              // 1. Escuchar las notificaciones del teclado.     registerForKeyboardNotifications() }   [...]   // Registro notificaciones teclado. private func registerForKeyboardNotifications() {     NSNotificationCenter.defaultCenter().addObserver(self, selector: "keyboardWillShow:", name: UIKeyboardWillShowNotification, object: nil)     NSNotificationCenter.defaultCenter().addObserver(self, selector: "keyboardWillHide:", name: UIKeyboardWillHideNotification, object: nil) }

   No te olvides de dejar de escuchar las notificaciones cuando tu vista vaya a desaparecer.

   Swift

   override func viewDidDisappear(animated: Bool) { super.viewDidDisappear(animated) // Siempre hay que dejar de escuchar las notificaciones. NSNotificationCenter.defaultCenter().removeObserver(self) }

   1 2 3 4 5 6

   override func viewDidDisappear(animated: Bool) {     super.viewDidDisappear(animated)          // Siempre hay que dejar de escuchar las notificaciones.     NSNotificationCenter.defaultCenter().removeObserver(self) }

2. Almacenar el campo de texto activo en cada momento en una propiedad del View Controller:
   Defino una nueva variable llamada “activeField” que apuntará al campo de texto activo en cada momento. Después, debo utilizar dos métodos que se lanzarán cuando el usuario empiece a editar un campo (textFieldDidBeginEditing) y deje de editarlo (textFieldDidEndEditing). Por supuesto, que los dos campos deben de tener como “delegate” mi View Controller.
   weak var activeField: UITextField? [...] // Cuando un campo va a ser editado. func textFieldDidBeginEditing(textField: UITextField) { activeField = textField } // Cuando un campo deja de ser editado. func textFieldDidEndEditing(textField: UITextField) { activeField = nil }

   1 2 3 4 5 6 7 8 9 10 11 12 13

   weak var activeField: UITextField?   [...]   // Cuando un campo va a ser editado. func textFieldDidBeginEditing(textField: UITextField) {     activeField = textField }   // Cuando un campo deja de ser editado. func textFieldDidEndEditing(textField: UITextField) {     activeField = nil }

3. Comprobar si el campo es COMPLETAMENTE visible en el cacho de la vista que es visible:
   Las primeras líneas del código calculan la altura de la vista visible restándole la altura del teclado. De esta forma, el frame que obtengo es el frame de la vista visible una vez el teclado se haya desplegado.
   Swift

   if let keyboardSize = (notification.userInfo?[UIKeyboardFrameBeginUserInfoKey] as? NSValue)?.CGRectValue() { var viewFrameActual = view.frame viewFrameActual.size.height -= keyboardSize.height

   1 2 3

   if let keyboardSize = (notification.userInfo?[UIKeyboardFrameBeginUserInfoKey] as? NSValue)?.CGRectValue() {     var viewFrameActual = view.frame     viewFrameActual.size.height -= keyboardSize.height

   Luego, busco el punto (x,y) de la esquina inferior izquierda de mi campo. No me interesa el «origin» porque es la esquina superior derecha y esta podría ser visible pero la mitad del campo podría estar oculta debajo del teclado.

   Swift

   let puntoEsquinaIzquierdaInferiorActiveField = CGPoint(x: activeField.frame.origin.x, y: activeField.frame.origin.y + activeField.frame.height)

   1	let puntoEsquinaIzquierdaInferiorActiveField = CGPoint(x: activeField.frame.origin.x, y: activeField.frame.origin.y + activeField.frame.height)

   Una vez tengo estos dos valores, utilizo la función CGRectContainsPoint para saber si mi campo será COMPLETAMENTE visible dentro de la vista después de que se haya desplegado. Si mi campo fuera visible, no sería necesario hacer nada. Si no lo fuera entonces, tengo que mover la vista hacia arriba.

   Swift

   if !CGRectContainsPoint(viewFrameActual, puntoEsquinaIzquierdaInferiorActiveField) {

   1	if !CGRectContainsPoint(viewFrameActual, puntoEsquinaIzquierdaInferiorActiveField) {

4. Mover la vista hacia arriba lo suficiente para ver la totalidad de mi campo:
   El cálculo es sencillo si coges un papel y haces dibujitos… :). Debes restar a la altura de la vista visible (cuando el teclado está desplegado), el valor de la coordenada «y» del punto de la esquina inferior izquierda. De esta forma, moverás la vista lo suficiente para que este punto aparezca justo encima del teclado. Le resto 8 puntos más tan sólo por cuestión de estética para darle holgura respecto al teclado.
   Swift

   let newViewY = viewFrameActual.height - puntoEsquinaIzquierdaInferiorActiveField.y - 8.0 let newViewFrame = CGRectMake(view.frame.origin.x, newViewY, view.frame.width, view.frame.height)

   1 2	let newViewY = viewFrameActual.height - puntoEsquinaIzquierdaInferiorActiveField.y - 8.0 let newViewFrame = CGRectMake(view.frame.origin.x, newViewY, view.frame.width, view.frame.height)

   Con este código, te aseguras que tu campo siempre estará COMPLETAMENTE visible esté en la posición que esté: en el centro o en la parte inferior de la vista.

5. Hacer que la vista se mueva en conjunción con la animación del teclado apareciendo:
   Esto es una gran idea que he sacado de este buen artículo que trata el mismo tema.
   Swift

   if let seconds = notification.userInfo?[UIKeyboardAnimationDurationUserInfoKey]?.doubleValue { UIView.animateWithDuration(seconds) { self.view.frame = newViewFrame } }

   1 2 3 4 5

   if let seconds = notification.userInfo?[UIKeyboardAnimationDurationUserInfoKey]?.doubleValue {     UIView.animateWithDuration(seconds) {         self.view.frame = newViewFrame     } }

6. Rectificar todo cuando el teclado va a desaparecer:
   Sólo tengo que volver a recuperar el frame original, lo cual es muy sencillo porque lo único que cambié fue la coordenada «y» y su valor original no es otro que 0.
   Swift

   func keyboardWillHide(notification: NSNotification) { if let seconds = notification.userInfo?[UIKeyboardAnimationDurationUserInfoKey]?.doubleValue { UIView.animateWithDuration(seconds) { self.view.frame = CGRectMake(0.0, 0.0, self.view.frame.width, self.view.frame.height) } } }

   1 2 3 4 5 6 7

   func keyboardWillHide(notification: NSNotification) {     if let seconds = notification.userInfo?[UIKeyboardAnimationDurationUserInfoKey]?.doubleValue {         UIView.animateWithDuration(seconds) {             self.view.frame = CGRectMake(0.0, 0.0, self.view.frame.width, self.view.frame.height)         }     } }

Elige la forma más conveniente para tu caso

Ahora que sabes cómo hacer esto tanto con un UIScrollView como sin él, elige la manera que te conviene para tu propia app. En mi caso, para un formulario de login, no necesitaba un scroll view y no quería meter uno sólo para hacer esto. Eso no significa que no exista ningún caso en el que usar un scroll view puede estar justificado.

Puedes descargar el proyecto en GitHub.

Fuentes de inspiración/información:

• Desarrollo iOS: Haciendo hueco al teclado en el blog de Miguel Díaz Rubio.
• Managing the keyboard en la iOS Developer Library.