Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • iOS: Ocultar teclado numérico o decimal (number or decimal pad)

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

13 Dic 2012 por Cruz

Comentarios: 4

iOS

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

Comentarios

4 comentarios. Comentar.

1. Anónimo el 14 Feb 2013 a las 20:37:37

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

2. Cruz el 15 Feb 2013 a las 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.

3. Carlos Eduardo Ruiz el 25 Oct 2013 a las 20:53:10

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

4. Anónimo el 20 Abr 2015 a las 18:53:53

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

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?