Embed Size (px)
Citation preview
Elementos básicos: UILabel, UIButton y UITextFieldEscrito por 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
14
14
14
14
Añadirlo a LinkedIn Publicarlo en Google+ Añadirlo a Meneame Publicarlo en Bitacoras Publicarlo en Pinterest
1
1
1
1
1
1
1
1
1
Añadirlo a Evernote Añadirlo a Tumblr
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!
Publicarlo en Facebook
6
6
6
6
6
6
6
6
6
Publicarlo en Twitter
18
18
18
18
18
18
18
18
18
Añadirlo a LinkedIn Publicarlo en Google+ Añadirlo a Meneame Publicarlo en Bitacoras Publicarlo en Pinterest
1
1
1
1
1
1
1
1
1
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
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
BlackBerry
Ver resultados
Familia Kindle ¡Consigue el tuyo!
Etiquetas
action Android android 4 apple apps para ios appstore app store CLLocationManager elementos
Google Google Nexus 7 HTC 8S interface iOS ios6 ios 6 ipad ipad mini iphone iPhone 5 mkannotation mkannotationview mkpolyline mountain lion noticias android outlet sqlite sqlite firefox sqlite ios sqlite manager
tutorial ios tutorial ipad tutorial iphone tutorial sqlite tutorial sqlite android tutorial sqlite iphone
tutorial sqlite xcode tutorial uifont tutorial uilabel tutorial xcode ui UIFont Windows Phone 8 WP8
xcode
Lo último en videojuegos
Hazte ya con tu seguro de coche
Inicio Contacto Nuestras Apps
by Manuel Alamar Argente | Desarrollador de ¿AhoraQuién? (iOS)
