Vous êtes sur la page 1sur 17

Elementos básicos: UILabel, UIButton y UITextField

Escrito por fjsaorin en iOS

Elementos básicos: UILabel, UIButton y UITextField Escrito por <a href=fjsaorin en iOS jun 19, 2012 ∑ Publicarlo en Facebook 6 6 6 6 6 6 6 6 6 ∑ Publicarlo en Twitter 14 14 14 14 14 " id="pdf-obj-0-9" src="pdf-obj-0-9.jpg">

jun 19, 2012

6

6

6

6

6

6

6

6

6

Publicarlo en Twitter

14

14

14

14

14

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
Una vez creado, nos dirigimos al archivo de interfaz ViewController.xib y arrastramos estos elementos a la

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

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

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

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

Algunos de sus atributos más importantes:

Text: Texto a mostrar.

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.

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

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).

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

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

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

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 “

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

Estas son las interacciones de las que hablaba antes, en este tutorial solo nos interesa “

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 ayudaPublicarlo en Facebook 6 " id="pdf-obj-12-2" src="pdf-obj-12-2.jpg">

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!

6

 

6

6

6

6

6

6

6

Publicarlo en Twitter

18

18

18

18

18

18

18

18

18

1

1

1

1

Síguenos

Nuevo Kindle Paperwhite

Si no está en eBay, no existe

1 1 1 1 1 ∑ <a href=Añadirlo a Evernote ∑ Añadirlo a Tumblr Síguenos Nuevo Kindle Paperwhite Si no está en eBay, no existe IPAD MINI 64GB NEGRO CELULAR A ESTRENAR SIN ABRIR LIBRE 619,95 EUR TOUCH SCREEN + LCD DISPLAY RETINA + FRAME PER APPLE IPHONE 4 VETRO SCHERMO NERO 32,99 EUR " id="pdf-obj-14-36" src="pdf-obj-14-36.jpg">

619,95 EUR

1 1 1 1 1 ∑ <a href=Añadirlo a Evernote ∑ Añadirlo a Tumblr Síguenos Nuevo Kindle Paperwhite Si no está en eBay, no existe IPAD MINI 64GB NEGRO CELULAR A ESTRENAR SIN ABRIR LIBRE 619,95 EUR TOUCH SCREEN + LCD DISPLAY RETINA + FRAME PER APPLE IPHONE 4 VETRO SCHERMO NERO 32,99 EUR " id="pdf-obj-14-42" src="pdf-obj-14-42.jpg">

32,99 EUR

<a href=BASE DOCK PARA IPOD IPHONE 5,00 EUR VITRE TACTILE IPHONE 4 + ECRAN LCD SUR CHASSIS + OUTILS 29,90 EUR htc wildfire libre averiado 0,01 EUR Rosa Lujo magnética Funda de Cuero/Piel para Samsung Galaxy S3 Mini GT-i8190 5,98 EUR Buscando algo así ? < > Apps de Apprendemos ¿Y tú de quién eres? ¿Cual prefieres como USUARIO? ∑ iOS ∑ Android ∑ Windows Phone " id="pdf-obj-15-2" src="pdf-obj-15-2.jpg">

5,00 EUR

<a href=BASE DOCK PARA IPOD IPHONE 5,00 EUR VITRE TACTILE IPHONE 4 + ECRAN LCD SUR CHASSIS + OUTILS 29,90 EUR htc wildfire libre averiado 0,01 EUR Rosa Lujo magnética Funda de Cuero/Piel para Samsung Galaxy S3 Mini GT-i8190 5,98 EUR Buscando algo así ? < > Apps de Apprendemos ¿Y tú de quién eres? ¿Cual prefieres como USUARIO? ∑ iOS ∑ Android ∑ Windows Phone " id="pdf-obj-15-8" src="pdf-obj-15-8.jpg">

29,90 EUR

<a href=BASE DOCK PARA IPOD IPHONE 5,00 EUR VITRE TACTILE IPHONE 4 + ECRAN LCD SUR CHASSIS + OUTILS 29,90 EUR htc wildfire libre averiado 0,01 EUR Rosa Lujo magnética Funda de Cuero/Piel para Samsung Galaxy S3 Mini GT-i8190 5,98 EUR Buscando algo así ? < > Apps de Apprendemos ¿Y tú de quién eres? ¿Cual prefieres como USUARIO? ∑ iOS ∑ Android ∑ Windows Phone " id="pdf-obj-15-14" src="pdf-obj-15-14.jpg">

0,01 EUR

<a href=BASE DOCK PARA IPOD IPHONE 5,00 EUR VITRE TACTILE IPHONE 4 + ECRAN LCD SUR CHASSIS + OUTILS 29,90 EUR htc wildfire libre averiado 0,01 EUR Rosa Lujo magnética Funda de Cuero/Piel para Samsung Galaxy S3 Mini GT-i8190 5,98 EUR Buscando algo así ? < > Apps de Apprendemos ¿Y tú de quién eres? ¿Cual prefieres como USUARIO? ∑ iOS ∑ Android ∑ Windows Phone " id="pdf-obj-15-20" src="pdf-obj-15-20.jpg">

5,98 EUR Buscando algo así? < >

Apps de Apprendemos

¿Y tú de quién eres?

¿Cual prefieres como USUARIO?

iOS

Android

Windows Phone