Este tutorial para principiantes de iOS SDK te enseñará cómo construir una interfaz simple que consiste en un nombre de usuario y contraseña UITextField
. Cubriremos cómo agregar un campo de texto en Interface Builder y cómo crear uno programáticamente. Adicionalmente, exploraremos el UITextFieldDelegate
métodos de protocolo y demostrar algunas técnicas prácticas para trabajar con la entrada de usuario.
La creación de elementos, como un campo de texto, se puede hacer de dos maneras. Puede crearlo en Interface Builder o puede codificarlo usted mismo mediante programación. Si bien puede ser más conveniente crear un elemento en Interface Builder, muchos programadores prefieren crear elementos mediante programación. Este tutorial explicará brevemente ambas opciones..
Inicie Xcode y haga clic en Archivo> Nuevo> Proyecto. Haga clic en "Aplicación" en el panel de iOS a la izquierda. Haga clic en el icono titulado "Aplicación de vista única" y haga clic en "Siguiente".
En el campo "Nombre del producto", escriba "TextFieldARC" e ingrese un nombre para su Identificador de compañía, como "com.companyName". Elija "iPhone" en el menú "Familia de dispositivos". Asegúrese de desmarcar "Usar guiones gráficos" e "Incluir pruebas unitarias", y marque "Usar conteo automático de referencias" antes de hacer clic en "Siguiente". Elija una ubicación para almacenar su proyecto y haga clic en "Crear".
UITextField
Haga clic en el archivo "ViewController.m" y escriba el siguiente código dentro de viewDidLoad
método.
CGRect passwordTextFieldFrame = CGRectMake (20.0f, 100.0f, 280.0f, 31.0f); UITextField * passwordTextField = [[UITextField alloc] initWithFrame: passwordTextFieldFrame]; passwordTextField.placeholder = @ "Password"; passwordTextField.backgroundColor = [UIColor whiteColor]; passwordTextField.textColor = [UIColor blackColor]; passwordTextField.font = [UIFont systemFontOfSize: 14.0f]; passwordTextField.borderStyle = UITextBorderStyleRoundedRect; passwordTextField.clearButtonMode = UITextFieldViewModeWhileEditing; passwordTextField.returnKeyType = UIReturnKeyDone; passwordTextField.textAlignment = UITextAlignmentLeft; passwordTextField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; passwordTextField.tag = 2; passwordTextField.autocapitalizationType = UITextAutocapitalizationTypeNone; [self.view addSubview: passwordTextField];
Observe que la propiedad de etiqueta del campo de texto está establecida en "2". Establecer la propiedad de etiqueta es una forma de mantener un registro de qué campo de texto está activo en su programa.
Haga clic en el archivo "ViewController.xib" en el panel "Navegador" de su proyecto de Xcode. Haga clic en "Ver" en el panel "Esquema del documento" a la izquierda. Haga clic en Ver> Utilidades> Mostrar biblioteca de objetos. Desplácese por la biblioteca de objetos en la esquina inferior izquierda hasta que encuentre un objeto "Campo de texto". Haga clic para seleccionarlo, luego arrastre y suelte el campo de texto en la vista.
Ajuste el campo de texto para que se extienda por la parte superior de la vista. Con el campo de texto seleccionado, haga clic en Ver> Utilidades> Mostrar inspector de atributos. Busque el campo "Marcador de posición" en el panel "Inspector de atributos" en "Campo de texto" y cámbielo a "Nombre de usuario". Haz clic en el menú desplegable "Borrar botón" y selecciona "Aparece durante la edición". Haga clic en el menú desplegable "Volver clave" y seleccione "Siguiente". Finalmente, desplácese hasta el campo "Etiqueta" en "Vista" y cámbielo a "1". Haga clic en Archivo> Guardar.
Si ejecuta su programa ahora, debería tener un UITextField
Objeto en la pantalla que puede recibir entrada! Puede acceder al valor del objeto con la texto
propiedad (es decir, passwordTextField.text).
Sin embargo, el uso de TextField en este punto presentará un problema notable. No hay un método predeterminado para eliminar el teclado de la vista. Entonces, para nuestro próximo truco ...
La resignación del teclado cuando se toca el fondo se puede lograr de diferentes maneras. El siguiente código es un ejemplo de una técnica. Haga clic en el archivo "ViewController.m" y agregue el siguiente método de implementación:
- (void) touchesBegan: (NSSet *) toca conEvent: (UIEvent *) evento NSLog (@ "touchesBegan: withEvent:"); [self.view endEditing: YES]; [super touchesBegan: toca conEvent: event];
Ejecute el proyecto de nuevo y ahora debería poder descartar el teclado simplemente tocando la pantalla.
La delegación es un patrón de diseño que esencialmente permite que dos objetos se comuniquen entre sí. UNA UITextField
objeto de los mensajes apropiados UITextFieldDelegate
Método cuando ocurren ciertos eventos, como cuando el campo de texto comienza a editarse. Cuando se envía un mensaje a uno de los métodos, tiene la oportunidad de realizar acciones personalizadas. El objeto que recibe los mensajes de delegado puede ser cualquier objeto que se ajuste al protocolo de delegado, en este caso UITextFieldDelegate
. Sin embargo, en el escenario más común, el objeto que recibe el UITextField
Los mensajes delegados serán los mismos. UIViewController
objeto que contiene el UITextField
como una subvista.
Haga clic en el archivo "ViewController.m". En el viewDidLoad
método en el que creamos programáticamente el campo de texto anterior, agregue el siguiente código:
passwordTextField.delegate = self; // AGREGAR ESTA LÍNEA [self.view addSubview: passwordTextField];
Estableciendo el campo de texto
delegar propiedad a yo
, la ViewController
objeto se convierte en el delegado del campo de texto y es capaz de implementar el UITextFieldDelegate
metodos.
Para configurar el delegado para el campo de texto creado en Interface Builder, haga clic en "ViewController.xib". Haga clic en el campo de texto en la vista y haga clic en Ver> Utilidades> Mostrar el Inspector de conexiones. Busque "delegar" en "Salidas" en el panel "Inspector de conexiones" a la derecha. Haga clic en el círculo adyacente a él y arrástrelo y suéltelo en "Propietario del archivo" en el panel "Esquema del documento" a la izquierda. Esto conecta el campo de texto para que el ViewController
objeto se establece como delegado del campo de texto. Haga clic en Archivo> Guardar.
Finalmente, haga clic en "ViewController.h" y escriba el siguiente código para ajustar la clase a la UITextFieldDelegate
protocolo:
@interface ViewController: UIViewController
El seguimiento UITextFieldDelegate
los métodos de protocolo son todos opcionales, lo que significa que no tienen que ser implementados por el delegado. Sin embargo, vamos a implementarlos todos para aprender sobre ellos. Vamos a discutir los métodos a medida que los escribimos.
textFieldShouldBeginEditing:
y textFieldDidBeginEditing:
Haga clic en "ViewController.m" y agregue el siguiente código.
- (BOOL) textFieldShouldBeginEditing: (UITextField *) textField NSLog (@ "textFieldShouldBeginEditing"); textField.backgroundColor = [UIColor colorWithRed: 220.0f / 255.0f green: 220.0f / 255.0f blue: 220.0f / 255.0f alpha: 1.0f]; devuelve SÍ; - (void) textFieldDidBeginEditing: (UITextField *) textField NSLog (@ "textFieldDidBeginEditing");
textFieldShouldBeginEditing:
se llama justo antes el campo de texto se activa. Este es un buen lugar para personalizar el comportamiento de su aplicación. En este caso, el color de fondo del campo de texto cambia cuando se llama a este método para indicar que el campo de texto está activo. textFieldDidBeginEditing:
se llama cuando el campo de texto se activa.
textFieldShouldEndEditing:
y textFieldDidEndEditing:
Agregue el siguiente código debajo de los métodos anteriores.
- (BOOL) textFieldShouldEndEditing: (UITextField *) textField NSLog (@ "textFieldShouldEndEditing"); textField.backgroundColor = [UIColor whiteColor]; devuelve SÍ; - (void) textFieldDidEndEditing: (UITextField *) textField NSLog (@ "textFieldDidEndEditing");
Estos dos métodos son similares a los métodos que se llaman cuando el campo de texto comienza a editarse. textFieldShouldEndEditing:
se llama justo antes el campo de texto se vuelve inactivo, y textFieldDidEndEditing:
se llama cuando el campo de texto se vuelve inactivo. Dentro textFieldShouldEndEditing:
, el color de fondo se cambia de nuevo a blanco para que el campo de texto pueda volver a su color original. Una vez más, estos métodos le dan la oportunidad de personalizar el comportamiento de la aplicación a medida que el campo de texto se vuelve inactivo.
campo de texto: shouldChangeCharactersInRange: replacementString
Agregue el siguiente código debajo de los métodos anteriores.
- (BOOL) textField: (UITextField *) textField shouldChangeCharactersInRange: (NSRange) range replacementString: (NSString *) string NSLog (@ "textField: shouldChangeCharactersInRange: replacementString:"); if ([string isEqualToString: @ "#"]) return NO; else devuelve YES;
textFieldShouldChangeCharactersInRange: replacementString:
se llama cada vez que el usuario escribe un carácter en el teclado. De hecho, este método se llama justo antes de que se muestre un carácter. Si busca restringir ciertos caracteres de un campo de texto, este es el método para usted. Como puede ver en nuestro ejemplo, agregamos cierta lógica para no permitir el símbolo "#".
textFieldShouldClear:
Agregue el siguiente código debajo de los métodos anteriores.
- (BOOL) textFieldShouldClear: (UITextField *) textField NSLog (@ "textFieldShouldClear:"); devuelve SÍ;
textFieldShouldClear:
se llama cuando el usuario presiona el botón Borrar, la "x" gris dentro del campo de texto. Antes de que se borre el campo de texto activo, este método le brinda la oportunidad de realizar las personalizaciones necesarias.
textFieldShouldReturn:
Agregue el siguiente código debajo de los métodos anteriores.
- (BOOL) textFieldShouldReturn: (UITextField *) textField NSLog (@ "textFieldShouldReturn:"); if (textField.tag == 1) UITextField * passwordTextField = (UITextField *) [self.view viewWithTag: 2]; [passwordTextField becomeFirstResponder]; else [textField resignFirstResponder]; devolver SÍ;
textFieldShouldReturn:
se llama cuando el usuario presiona la tecla de retorno en el teclado. En el ejemplo, descubrimos qué campo de texto está activo al observar la propiedad de etiqueta. Si el campo de texto "Nombre de usuario" está activo, el siguiente campo de texto, "Contraseña", debería activarse en su lugar. Si el campo de texto "Contraseña" está activo, la "Contraseña" debe renunciar, renunciando al teclado.
Haga clic en Crear> Ejecutar, o haga clic en la flecha "Ejecutar" en la esquina superior izquierda. Con la consola abierta, juega con los campos de texto. los NSLog
colocado en cada uno de los métodos de protocolo de delegado anteriormente ayuda a ver las circunstancias en las que se llama a cada método de delegado.
los UITextFieldDelegate
Los métodos de protocolo proporcionan una gran oportunidad para personalizar el comportamiento de un UITextField
. Este tutorial se centra en algunas de las tareas más comunes relacionadas con UITextField
, como renunciar al teclado y pasar al siguiente campo de texto, pero las posibilidades de personalizar el comportamiento son infinitas. Una vez que comienza a comprender el patrón de diseño de delegado, es más fácil bifurcarse a otros objetos precompilados que usan delegados, como UITableView
o UIScrollView
. Mantén a tu viejo amigo NSLog
en su bolsillo trasero mientras comienza a explorar otros delegados y le ayudará a comprender el funcionamiento interno del delegado.