Interface de Usuario Android - Controles de Texto, TextView y EditText

Bienvenidos a otra nueva lección del curso gratuito en www.AprendeAndroid.com últimamente estoy viendo que hay muchas webs/blogs que se están apropiando de mi trabajo gratuitamente, pero en fin... espero que les salga un Grano en el culito de esos que no te dejan sentarte! ;P.

Controles de Texto Android

Vamos a tratar de ver en esta lección los controles de texto, quizás este tipo de control sean de los mas utilizados en los GUIs (Graphics User Interface) los usaremos para mostrar nuestros textos, la gran diferencia entre los dos es simple, uno se puede editar, y el otro no, es decir, uno lo usaremos como método de entrada a nuestra app y el otro como medio de salida de nuestra aplicacion.

Como vimos en la lección anterior con los botones, también podemos controlar estos controles desde nuestro programa para cambiar propiedades, textos, capturar el texto de un EditText, contar caracteres.. por lo que también llevara una parte de código en el JAVA de nuestro proyecto.

Como te podrás imaginar estos 2 controles tienen multitud de atributos como ya vimos en los botones. intentare explicar los mas útiles, aunque como ya he dicho muchas veces atrás, Eclipse nos ayuda a esto, no necesitamos sabernos todo de memoria, pon el cursor en la etiqueta del TexView y pulsa "Control+Espacio" y veras la lista de atributos que puedes incluir con una pequeña ayuda.

Propiedades, TextView, eclipse

TextView Android

Como dije antes, el control TextView es un clásico en la programación de GUIs. Los TextView (etiquetas de texto) se utilizan como medio de salida, es decir, para mostrar un determinado texto al usuario. Al igual que en el caso de los botones, el texto del control se establece mediante la propiedad android:text. A parte de esta propiedad, las etiquetas que definen su tamaño son las mínimas que debemos definir (es muy parecido a los botones que ya vimos antes) yo destaco las siguientes:

Eclipse, Java, Android Eclipse, Java, Android

Arriba vemos el resultado de la pantalla con el código xml que hemos programado voy a intentar explicar cada propiedad lo que hace para que poco a poco vallamos entendiendo cada línea ahora expliquemos cada elemento:

 android:id. Esto ya lo vimos en el tema anterior, esta propiedad es el ID del control, con el que podremos identificarlo de forma única más tarde en nuestro código. Vemos que el identificador lo escribimos precedido de “@+id/”. Esto tendrá como efecto que al compilarse el proyecto se genere automáticamente una nueva constante en la clase R para dicho control.
 android:text. Texto del control. En Android, el texto de un control se puede especificar directamente, o bien utilizar alguna de las cadenas de texto definidas en los recursos del proyecto (fichero strings.xml), en cuyo caso indicaremos su identificador precedido del prefijo “@string/”.
 android:layout_height y android:layout_width. Dimensiones del control con respecto al layout que lo contiene. Esta propiedad tomará normalmente los valores “wrap_content” para indicar que las dimensiones del control se ajustarán al contenido del mismo, o bien “fill_parent” para indicar que el ancho o el alto del control se ajustará al ancho o alto del layout contenedor respectivamente.
 android:layout_margin. Este parametro indica el espacio entre el control (en este caso botón) y su padre en este caso el Layout.
 android:padding. Este parámetro indica el espacio entre Texto o Imágenes que pongamos dentro del control (en este caso el botón) y el propio control.
 android:gravity. Esta es la gravedad del control, la verdad es que es una forma original de poner la alineación, si entre las comillas de este parámetro pulsamos la famosa combinación de teclas Control+Espacio, eclipse nos dará todos los parámetros que podemos usar aquí, si ponemos solo "center" se centrara su contenido tanto vertical como horizontal.
 android:TextSize. Aquí indicamos un tamaño, si no ponemos esto, se selecciona un tamaño por defecto estándar, si te parece grando o pequeño ve probando usando la unidad dp que vimos en el tema anterior.
 android:backgroud. Con este parámetro definimos el color de fondo del control.
 android:textColor. Color del texto.
 android:typeface. Estilo del texto, negrita, cursiva...

Bueno, hasta aquí con el XML del TextView, muchos de los parámetros que hemos visto son comunes con el siguiente control, asique no lo voy a repetir ;P. Recuerda que en cualquier momento, puedes usar las combinaciones de teclas Control+Espacio (no me cansare de recordarlo) no tienes que conocer todas las propiedades, eclipse nos ayuda a esto, usaloooooo.

EditText Android

El control EditText (caja de edición de texto) es otro componente indispensable de casi toda aplicación Android. Es uno de los medios que tiene el usuario para introducir datos a la aplicación. Poco mas os puedo decir de este control... os pongo un ejemplo:

Eclipse, Java, Android Eclipse, Java, Android

Aparte de los atributos que comparte con el TextView, para este control tenemos algunos parámetros que son exclusivos, los mas utilizados son estos dos:

 android:hint. Con este parámetro pondremos un texto por defecto mientras el campo este vacío, es decir, el lo que ve el usuario antes de que el escriba nada.
 android:inputType. Con este parámetro indicamos el tipo de teclado que quieres que aparezca cuando pulsas sobre el campo, si por ejemplo solo vamos a introducir números, se puede indicar que aparezca un teclado numérico. Como siempre cuando te coloques entre las comillas pulsa Control+Espacio para ver las opciones que puedes poner para este parámetro.

Y hasta aquí con el xml de estos controles, ahora comenzemos con la parte de Java!!

Código Java para los TextView y EditText

Bueno, bueno... después de ver los botones en el tema anterior, esta parte te va a parecer chupada! ;P estos controles son mas sencillos de gestionar. Como siempre si queremos actuar sobre los controles, tendremos que localizar los controles en nuestro codigo Java y asignarlos a una variable y apartir de hay podremos hacer cosas con ellos (cambiar colores, textos, tamaños, leer, escribir...) pongamos un ejemplo con las dos cosas básicas: Asignarles un valor y capturar o leer el valor que tengan, veamos!

Eclipse, Java, Android

Recuerda, que cuando escribimos la variable podemos aprovecharnos de la ayuda de Eclipse para ver que cosas podemos hacer con estos controles, una vez mas estoy usando la famosisima combinación de teclas control+espacio para ver los métodos que puedo asignar a la variable mitexto que es un TextView.

Vamos a hacer un ejercicio divertido, escribiremos algo en la caja EditText y cuando pulsemos un botón, este texto lo asignaremos al control TextView.

Antes de nada voy a explicar un concepto nuevo, declarar variable GLOBALES hay 2 tipos de variables, las locales y las globales, la diferencia entre cada una de ellas es que las globales las podemos utilizar en cualquier parte de nuestro programa, y las locales solo en los métodos (partes del programa) donde hallan sido definidas, apartir de ahora las variables de los controles las asignaremos de forma global, para poder utilizarlas desde cualquier sitio. Las variables Globales se asignan antes del OnCreate de la Actividad, la asignación de variables en cualquier otro sitio de nuestro programa se consideran Locales, si estas variables las quieres usar en otras partes es probable que te diga que la variable no exista, entonces deberás de definirla de forma global, observa, como detalle muy importante, que las variables globales son de color azul.

definicion variables globales android

Como ves en el codigo, he reutilizado el codigo del hola usuario para hacer este ejemplo, te animo que lo cambies tu para ir cogiendo soltura a la hora de escribir codigo, la idea es asignar un texto inicial al TextView al iniciar la actividad, y después escribir algo en el EditText y al pulsar el botón este texto se copie al TextView.

Prueba a hacerlo, si tienes dudas pregunta en el FORO, adelante!! tu puedes!!

Espero que esta lección haya quedado clara, recuerda que puedes opinar y/o sugerir mejoras en el FORO, por favor no te cortes, opina, mi objetivo es que puedas aprender a programar, y no me bienen mal opiniones constructivas. Saludos!

Si te a gustado este sitio, puedes hacer click en me gusta en Facebook, Google+, Tweeter... es el único precio que te pido por este trabajo! ;P. Compartiendo, ayudaras a otros a encontrar esta web! GRACIASSSS.