En el último capítulo de aprendizaje de programación hablábamos de los Componentes en Android, y decíamos entonces, que los Activities representan las pantallas de la aplicación. En realidad hay que entender que un Activity es una acción que el usuario puede realizar, pero al implementarla, esta crearà un objeto Windows que funcionará como contenedor de la interfaz de usuario y por lo tanto como ventana o pantalla de la aplicación.

¿Que podemos representar en una Ventana?… Las pantallas en Android son contenedores de Views, de hecho, el objecto android.view.View es el objeto básico para representar elementos gráficos, así como en JavaSE lo sería java.awt.Component. Tal como la documentación de Android lo define, un View es el bloque básico de construcción de elementos visuales y ocupa un espacio rectangular que es capaz de gestionar el renderizado de su contenido y el control de los eventos básicos. Así, pues, ya veremos que tenemos distintos elementos como los cuadros de texto, botones, desplegables y muchos otros que son clases hijas de View.

Por otro lado hay que tener en cuenta que los Views deben ser ubicados en un contenedor, de esto se encarga la clase ViewGroup, que actua como clase principal de lo que llamaremos Layouts, y que al mismo tiempo es también un View. La función básica de un Layout será actuar como contendor de Views y controlar la ubicación, y despliegue de cada uno de los Views contendidos o hijos, como nos acostrumbraremos a llamarlos.

Retomaremos el proyecto de ejemplo que creamos en uno de los post anteriores para ilustrar los primeros conceptos del funcionamiento de los Views y los Layouts.

La interfaz de usuario la podemos implementar vía código, pero una de las ventajas que tenemos en Android es que existe la possibilidad de gestionar los layouts en esquemas xml de modo que resulta fácil abstraer la capa de aspecto del código y por otro lado resulta práctico y mucho mas reutilizable.

El archivo que determina el contenido de la única Activity del proyecto lo encontrareis en res/layout/activity_main.xml, y si lo abrimos el código XML que contiene es el siguiente:

 Aquí tenemos: Un contenedor de views de tipo RelativeLayout, y un cuadro de texto, es decir un TextView y que al representarlo gráficamente se muestra como sigue:

Simplemente muestra centrado en pantalla el texto Hello world!… Vamos a añadir otro view de tipo text, simplemente copiaremos parte del TextView del ejemplo tal como se muestra a continuación:

Observad que hemos eliminado los atributos android:layout_centerHorizontal y android:layout_centerVertical. Y el resultado visual de este cambio es el siguiente:

Ahora lo que tenemos es dos componentes de TextView, uno que se muestra centrado en pantalla y el otro en la esquina superior izquierda. ¿Fácil verdad? Esto sucede de este modo puesto que el layout que estamos utilizando es un RelativeLayout. Este es uno de los más flexibles pero al mismo tiempo resulta uno de los mas complejos. Para ver que es lo que estamos diciendo vamos a hacer otro cambio:

Ahora hemos sustituido el texto RelativeLayout por LinearLayout, y el resultado renderizado es:

Ahora nos encontramos con que los dos TextView se muestran uno a continuación del otro de forma lineal, y como podéis observar ahora ya no tiene sentido el uso de los atributos que permitían centrar al primero de los textos.

Queda mucho por explicar, puesto que no hemos dicho nada acerca del uso de los distintos atributos que aparecen en el ejemplo, pero iremos paso por paso descifrando los detalles en otras entregas. En cualquier caso, os animo a ser autodidactas y experimentar con ellos.

Espero que con este sencillo ejemplo sea suficiente para entender la importancia que tienen los distintos layouts y su utilidad. En el próximo capítulo hablaremos acerca de como determinamos que layout se aplica a una Activity y como acceder a los Views desde Java.

  • dxt

    buenisimo, gracias ^^