Elementos básicos: UILabel, UIButton y UITextField

jun 19, 2012

Hoy os traemos un nuevo tutorial, este en particular es el primero de una serie de tutoriales en el que intentaré explicar el funcionamiento y las características más importantes de los elementos básicos de cualquier aplicación en iOS.

Este primer tutorial está centrado en 3 elementos: los UILabel (etiquetas), UIButton (botones) y UITextField (campos de texto). 

Comencemos!

En primer lugar creamos un proyecto a partir de una sola vista:

Una vez creado, nos dirigimos al archivo de interfaz ViewController.xib y arrastramos estos elementos a la vista principal:

Veamos que hace cada uno de estos elementos.

UILABEL

Esta clase simplemente muestra un texto no editable. Si en el Interface Builder pulsamos sobre ella, en el panel lateral podremos ver algunas de sus propiedades o atributos más importantes:

Algunos de sus atributos son:

• Text: Texto a mostrar.
• Lines: Número de lineas máximo.
• Alignment: Justificación del texto.
• Font: Tipografía.
• Minimum Size: Mínimo tamaño de fuente permitido.
• Text Color: Color del texto

UIBUTTON

Esta clase muestra un botón que llamará a una acción cuando se interactue de una manera determinada con él.

Algunos de sus atributos son:

• Type: Tipo de botón, en este tutorial nos centraremos en el botón redondeado (Rounded Rect).
• State Config: Permite elegir el estado (reposo, activo, resaltado…) para el que se configuran los siguientes parámetros de la lista.
• Title: Texto sobre el botón.
• Image: Imagen sobre el botón.
• Background: Imagen de fondo que no interferirá con el texto o la imagen.
• Font: Tipografía del texto del botón.
• Text Color y Shadow Color: Color del texto y su sombra.

UITEXTFIELD

Esta clase es parecida al UILabel con la diferencia de que esta permite introducir el texto mediante el teclado.

Algunos de sus atributos más importantes:

• Text: Texto a mostrar.
• Placeholder: Texto que se muestra de una forma más sutil cuando no hay ningún texto a mostrar. Se utiliza normalmente para decirle al usuario que debe introducir allí.
• Alignment: Justificación del texto.
• Border Style: Estilo del campo, experimenta y escoge el que más te guste
• Text Color: Color del texto.
• Font: Tipografía.
• Min Font Size: Como en el UILabel, el mínimo de tamaño de fuente permitido.
• Los últimos atributos (Capitalization, Correction, Keyboard…) hacen referencia a distintas opciones del texto mostrado y del teclado que utilizamos para introducir el texto.

Ahora que ya sabemos más sobre estos elementos, hagamos una pequeña aplicación. Queremos que al pulsar el botón, el texto introducido en el campo de texto aparezca en el label.

En primer lugar es necesario relacionar nuestro código (outlet) con estos elementos que hemos arrastrado a la interfaz, para ello acudimos al ViewController.h y los declaramos:

@interface ViewController : UIViewController {
 
    IBOutlet UILabel *etiqueta;
    IBOutlet UIButton *boton;
    IBOutlet UITextField *campotexto;
 
}
 
@end

Volvemos al .xib, hacemos click sobre “File’s Owner” en la columna de la izquierda y a continuación en la última pestaña de la columna de la izquierda.

Ahora es el momento de relacionar nuestros outlet que hemos declarado en el código con los objetos de la interfaz. Arrastramos el circulito junto al outlet al elemento de la interfaz correspondiente (puedes arrastrarlo al objeto sobre la interfaz o sobre su referencia en la lista de la derecha). 

Una vez estén todos relacionados debemos tener esto:

A continuación es necesario preparar el método al que llamará el botón cuando lo pulsemos además del método que cerrará el teclado una vez terminemos de editar el campo de texto. Vamos al ViewController.h y escribimos:

@interface ViewController : UIViewController {
 
    IBOutlet UILabel *etiqueta;
    IBOutlet UIButton *boton;
    IBOutlet UITextField *campotexto;
 
}
 
//Método que será llamado la pulsar el botón
-(IBAction)botonpulsado:(id)sender; 
//Método que será llamado al terminar de editar el campo de texto
-(IBAction)terminaredicion:(id)sender; 
 
@end

Mientras que en el ViewController.m escribimos:

@implementation ViewController
 
-(IBAction)botonpulsado:(id)sender
{
    //A la etiqueta le asignamos el texto escrito en el campo de texto
    [etiqueta setText:campotexto.text]; 
}
 
-(IBAction)terminaredicion:(id)sender
{
    //Hacemos que el campo de texto deje de ser el foco de edición
    [campotexto resignFirstResponder]; 
}
 
...

Por último solo nos falta relacionar estos métodos (IBAction) con el elemento de la interfaz que los llevará a cabo, para ellos volvemos al Interface Builder y acudimos a la misma pestaña de los Outlets de antes pero ahora podremos ver que allí también aparecen los dos métodos que acabamos de crear:

Arrastramos sus puntos con el elemento correspondiente, en este caso, “botonpulsado” al botón y “terminaredicion” al campo de texto. Al relacionar un método con un objeto nos aparecerá esta ventanita:

Estas son las interacciones de las que hablaba antes, en este tutorial solo nos interesa “Touch Up Inside“, que significa levantar el dedo encima del botón, en otras palabras, pulsarlo y que al levantar el dedo se llame a la acción. La seleccionamos para el botón mientras que para el campo de texto seleccionamos “Did End On Exit” (Se pulsa intro en el teclado).

Para ver si funciona pulsamos CMD+R y comprobamos  en el simulador si todo funciona como debería, si no es así, vuelve a repasar las cosas

Si todo ha salido bien, podéis incluso cambiar el texto del botón, añadir un placeholder, etc… para obtener algo así:

Y hasta aquí este primer tutorial de elementos básicos, espero que os haya servido de ayuda en el comienzo del desarrollo en iOS! 

Hasta pronto!