Ardilla Quio Ardilla Quio

13 de Diciembre de 2012

iOS: Ocultar teclado numérico o decimal (number or decimal pad)

El Xcode nos permite ocultar de forma muy sencilla el teclado estándar al pulsar sobre la tecla de retorno (Return Key). Es suficiente con crear un Outlet para el TextField. Un IBAction en el TextField asociado al evento DidEndOnExit con una única línea de código: [myTextField resignFirstResponder];

El problema está cuando necesitamos un teclado numérico (Number Pad) o decimal (Decimal Pad), ya que no disponen de tecla de retorno. Una solución rápida y útil es crear una barra auxiliar (Toolbar) en la que podemos añadir varios botones, entre ellos el de ocultar el teclado.

Resultado final de la barra de tareas

Lo bueno de esta opción es que podemos aprovechar la barra para añadir otros botones útiles como por ejemplo los de navegar por los distintos TextField: "Siguiente" y "Anterior".

Ocultar teclado

Para empezar este tutorial crearemos un proyecto con una plantilla Single View Application. En la siguiente pantalla elegiremos "Use StoryBoards" y "Use Automatic Reference Counting".

Crear proyecto - Elegir plantilla Crear proyecto - Configurar

Una vez creado el proyecto en Xcode iremos a nuestro fichero MainStoryboard.storyboard. En nuestra única ventana ponemos un TextField. Con el TextField seleccionado, en la pestaña del Inspector de Atributos buscamos Keybooard y elegimos numérico o decimal. Para el ejemplo hemos elegido decimal (Decimal Pad).

Por último elegimos una barra de tareas y la ponemos en nuestra ventana, por ejemplo en la parte de abajo. La posición no importa, ya que estará oculta cuando no haya teclado y al hacerla visible la posicionaremos por código.

MainStoryboard

Para ponerle un nombre más significativo a nuestro botón de ocultar teclado, seleccionamos el botón, vamos al Inspector de Atributos y en la propiedad Title escribimos el nombre. En este ejemplo "Hecho".

El siguiente paso es crear un Outlet para el TextField. Seleccionamos la vista Assistant Editor y, con control pulsado arrastramos desde el TextField al código. En Connection nos aseguramos que es Outlet y en el campo Name ponemos myTextField.

Ahora creamos un IBAction para nuestro botón "Hecho". Con control pulsado arrastramos desde el botón al código. Comprobamos que en Connection está seleccionado IBAction y en el campo Name escribimos hideKeyboard.

Una vez hechos estos pasos el código de nuestro fichero ViewController.h será:

//
//  ViewController.h
//  OcultarTecladoDecimal
//
//  Created by Cruz Lorenzo on 11/12/12.
//  Copyright (c) 2012 Arume. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UITextField *myTextField;

- (IBAction)hideKeyboard:(id)sender;

@end

A continuación escribiremos algo de código en ViewController.m. Primero sintetizaremos el TextField:

@synthesize myTextField;

Después completamos el código de la función hideKeyboard:

- (IBAction)hideKeyboard:(id)sender {
	[myTextField resignFirstResponder];
}

Llegado a este punto podemos compilar y comprobar el avance de nuestro proyecto. Vemos que al pulsar sobre el TextField aparece el teclado y que al pulsar sobre el botón "Hecho" desaparece.

¿No es lo que esperabais? Cierto, la barra de tareas debería estar inicialmemte oculta y que aparezca y desaparezca con el teclado. Para conseguirlo debemos crear unos observadores que nos avisen cuando aparece y desaparece el teclado.

Sincronizar la barra con el teclado

Empecemos por ocultar la barra de tareas al cargar nuestra aplicación. En el MainStoryboard.storyboard seleccionamos la barra y marcamos la propiedad Hidden en el Inspector de Atributos.

En el MainStoryboard.storyboard creamos un Outlet para la barra de tareas que le llamaremos keyboardToolbar. No debemos olvidarnos de sintentizarlo en el ViewController.m.

En ViewController.h declararemos dos funciones:

- (void)keyboardWillShow:(NSNotification *)notification;
- (void)keyboardWillHide:(NSNotification *)notification;

Y en ViewController.m añadimos el siguiente código:

- (void)viewWillAppear:(BOOL)animated {
	[super viewWillAppear:animated];

	[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
	[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}

- (void)viewWillDisappear:(BOOL)animated {
	[super viewWillDisappear:animated];

	[[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:nil];
	[[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillHideNotification object:nil];
}

Por último creamos el código de las dos funciones que hemos declarado anteriormente en el fichero ViewController.h

- (void)keyboardWillShow:(NSNotification *)notification {
	[keyboardToolbar setHidden:NO];

	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.3];

	CGRect frame = self.keyboardToolbar.frame;
	frame.origin.y = self.view.frame.size.height - 260.0;
	self.keyboardToolbar.frame = frame;

	[UIView commitAnimations];
}

- (void)keyboardWillHide:(NSNotification *)notification {
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.3];

	CGRect frame = self.keyboardToolbar.frame;
	frame.origin.y = self.view.frame.size.height;
	self.keyboardToolbar.frame = frame;

	[UIView commitAnimations];
	[keyboardToolbar setHidden:YES];
}

Hemos puesto una pequeña animación de 0.3 segundos que es lo que tarda el teclado en aparecer. El tamaño del teclado es de 260pt por lo que para colocar la barra justo encima, restamos de la altura total de la vista esa distancia.

Si volvemos a compilar y ejecutar veremos que ahora sí tenemos el comportamiento esperado.

Resultado final de la barra de la barra de tareas

4 comentarios

Anónimo

20/04/2015 18:53:53

muy bueno ese codigo pero lo puedes mostrar en lenuaje "swift" ??

Carlos Eduardo Ruiz

25/10/2013 20:53:10

Excelente, muchas gracias. Soy Novato pero por fin empiezo a entender la manera en que funciona la vaina.

Cruz

15/02/2013 11:54:57

Supongo que cada teclado está asociado a un TextField distinto. El tutorial te explica como ocultar un teclado numérico asociado a un TextField concreto, por lo tanto, sigue los pasos del tutorial para el TextField que tiene asociado el teclado numérico.

Anónimo

14/02/2013 20:37:37

Tengo dos teclado, uno numerico y otro nomal, solo quiero que se oculte el teclado decimal, como lo puedo hacer

Comentario anónimo
Comentar como usuario