Contenedores
Otro de los elementos más importantes de trabajar con las GUI de Android es entender el concepto de contenedores y los tipos de layouts con los que podemos trabajar. Un contenedor nos sirve para acomodar los widgets básicos de Android y otros contenedores secundarios para que respeten un layout en particular y se muestren según las reglas visuales del mismo.
Si por ejemplo necesitamos que un formulario muestre las etiquetas alineadas a la derecha y los campos de texto a la izquierda, necesitaremos de un contenedor que nos permita definir esta disposición de los elementos. Ampliando el ejemplo, si después necesitamos que los botones de Aceptar y Cancelar aparezcan centrados y juntos uno del otro, entonces definiremos un segundo contenedor que nos permita mostrar los botones de esta manera.
Es común encontrarnos con contenedores básicos definidos en los kits de herramientas de GUI de cualquier plataforma. Para nuestro caso en específico con Android vamos a ver tres contenedores principales: LinearLayout, que utiliza un modelo parecido al de caja;RelativeLayout, un modelo basado en reglas; y TableLayout, un modelo en red o basado en celdas, junto con ScrollView, que nos ayudará con la implementación de barras de desplazamiento en nuestros contenedores.
Si por ejemplo necesitamos que un formulario muestre las etiquetas alineadas a la derecha y los campos de texto a la izquierda, necesitaremos de un contenedor que nos permita definir esta disposición de los elementos. Ampliando el ejemplo, si después necesitamos que los botones de Aceptar y Cancelar aparezcan centrados y juntos uno del otro, entonces definiremos un segundo contenedor que nos permita mostrar los botones de esta manera.
Es común encontrarnos con contenedores básicos definidos en los kits de herramientas de GUI de cualquier plataforma. Para nuestro caso en específico con Android vamos a ver tres contenedores principales: LinearLayout, que utiliza un modelo parecido al de caja;RelativeLayout, un modelo basado en reglas; y TableLayout, un modelo en red o basado en celdas, junto con ScrollView, que nos ayudará con la implementación de barras de desplazamiento en nuestros contenedores.
LinearLayout
LinearLayout es un contenedor que utiliza el modelo de caja para desplegar los elementos que están dentro de él. Los widgets y contenedores secundarios que se declaren dentro de un elemento <LinearLayout> se alinearán en una columna o en un fila, uno detrás de otro.
Para los que han trabajado con FLEX y XUL no me dejarán mentir en el hecho de que este modelo utiliza el concepto de “caja” como la principal unidad de diseño. Por ello, si te decides a utilizar LinearLayout en el diseño de tus interfaces de usuario, deberás tomar en cuenta aspectos como la anidación entre elementos, qué propiedades tendrá cada caja y cómo será la alineación entre cada una de ellas.
Conceptos y propiedades
Para la buena configuración de un contenedor LinearLayout debes conocer 5 áreas principales que te ayudarán a definir el aspecto visual del mismo: la orientación (orientation), el llenado del modelo (fill model), el peso (weight), la gravedad (gravity) y el relleno (padding).
Orientación
La orientación (orientation) nos ayudará a indicar si el LinearLayout representa una columna o una fila. Para definirla, hay que agregar la propiedad android:orientation en el elemento<LinearLayout> del XML, y los valores que podemos escribir son horizontal o vertical; si es horizontal entonces trabajaremos el layout a modo de fila y si es vertical lo trabajaremos a modo de columna.
También hay que saber que la orientación puede ser modificada en tiempo de ejecución utilizando el método setOrientation() de la clase LinearLayout, pasando como parámetro HORIZONTAL o VERTICAL según sea el caso.
Para los que han trabajado con FLEX y XUL no me dejarán mentir en el hecho de que este modelo utiliza el concepto de “caja” como la principal unidad de diseño. Por ello, si te decides a utilizar LinearLayout en el diseño de tus interfaces de usuario, deberás tomar en cuenta aspectos como la anidación entre elementos, qué propiedades tendrá cada caja y cómo será la alineación entre cada una de ellas.
Conceptos y propiedades
Para la buena configuración de un contenedor LinearLayout debes conocer 5 áreas principales que te ayudarán a definir el aspecto visual del mismo: la orientación (orientation), el llenado del modelo (fill model), el peso (weight), la gravedad (gravity) y el relleno (padding).
Orientación
La orientación (orientation) nos ayudará a indicar si el LinearLayout representa una columna o una fila. Para definirla, hay que agregar la propiedad android:orientation en el elemento<LinearLayout> del XML, y los valores que podemos escribir son horizontal o vertical; si es horizontal entonces trabajaremos el layout a modo de fila y si es vertical lo trabajaremos a modo de columna.
También hay que saber que la orientación puede ser modificada en tiempo de ejecución utilizando el método setOrientation() de la clase LinearLayout, pasando como parámetro HORIZONTAL o VERTICAL según sea el caso.
RelativeLayout
El segundo contenedor del que disponemos para crear interfaces en Android es el Relative Layout. Su principal característica es que los widgets que estén dentro de este contenedor basarán su posición en relación con los otros elementos. De esta forma, podemos definir que el widget X quede debajo del widget Y y que éste a su vez se alinie verticalmente con el widget Z.
Conceptos y propiedades
Cabe mencionar que además de posicionar un elemento con respecto a otro del mismo nivel también podemos hacerlo con respecto al área que corresponde al RelativeLayout.
Este tipo de contenedor es una herramienta muy poderosa para cumplir con la tarea de diseñar interfaces de usuario ya que permite eliminar ViewGroups anidados, lo cuál es útil para reemplazar un diseño en el que tenemos una gran cantidad de grupos dentro de un contenedor de tipo LinearLayout y hacerlo más eficiente utilizando un RelativeLayout.
Entre los atributos que nos sirven para posicionar los elementos con respecto a otros están:
Conceptos y propiedades
Cabe mencionar que además de posicionar un elemento con respecto a otro del mismo nivel también podemos hacerlo con respecto al área que corresponde al RelativeLayout.
Este tipo de contenedor es una herramienta muy poderosa para cumplir con la tarea de diseñar interfaces de usuario ya que permite eliminar ViewGroups anidados, lo cuál es útil para reemplazar un diseño en el que tenemos una gran cantidad de grupos dentro de un contenedor de tipo LinearLayout y hacerlo más eficiente utilizando un RelativeLayout.
Entre los atributos que nos sirven para posicionar los elementos con respecto a otros están:
- android:layout_above indica que el elemento se posicionará justo arriba del elemento que tiene el ID definido como valor de este atributo.
- android:layout_toLeftOf indica que el elemento se posionará a la izquierda del elemento cuyo ID coincida con el definido en el valor de este atributo.
- android:layout_toRightOf posiciona al elemento a la derecha del elemento cuyo ID coincida con el proporcionado en el valor de este atributo.
- android:layout_bottom posiciona al elemento debajo del que tenga la ID proporcionada en el valor del atributo.
TableLayout
Seguramente alguna vez te tocó trabajar con las famosas (y ya no tan cool) tablas en HTML, si es así, tal vez debas conocer el tercer contenedor de Android llamado TableLayout, que te ayudará a posicionar tus widgets con la ayuda de celdas. Nosotros controlamos el número de columnas y filas, las primeras pueden adaptarse al contenido que le queramos asignar mostrándose más estrechas o más amplias según sea el caso.
Los elementos TableLayout trabajan en conjunto con los elementos TableRow. De esta forma podemos controlar el número de filas que aparecerán en nuestra tabla.
Por otro lado, Android es el que controla el número de columnas que aparecerá en el layout según los widgets que necesitemos que aparezcan, tomando en cuenta de que de manera predeterminada habrá al menos una columna por cada widget contenida en una fila. Por ejemplo, si tenemos tres filas, una con dos widgets, una con tres widgets y otra con 4 widgets, habrá por lo menos 4 columnas para todo el layout.
Y así como HTML, es posible que un widget pueda tomar más de una columna con la ayuda del atributo android:layout_span cuyo valor será el número de columnas que queramos que el widget ocupe.
Los elementos TableLayout trabajan en conjunto con los elementos TableRow. De esta forma podemos controlar el número de filas que aparecerán en nuestra tabla.
Por otro lado, Android es el que controla el número de columnas que aparecerá en el layout según los widgets que necesitemos que aparezcan, tomando en cuenta de que de manera predeterminada habrá al menos una columna por cada widget contenida en una fila. Por ejemplo, si tenemos tres filas, una con dos widgets, una con tres widgets y otra con 4 widgets, habrá por lo menos 4 columnas para todo el layout.
Y así como HTML, es posible que un widget pueda tomar más de una columna con la ayuda del atributo android:layout_span cuyo valor será el número de columnas que queramos que el widget ocupe.
ScrollView
Cuando trabajamos en espacios pequeños como lo son las pantallas de los teléfonos, los desarrolladores debemos poner en práctica algunos trucos útiles para presentar la información al usuario de una forma cómoda, atractiva y práctica sin importar lo limitado que sea el espacio con el que contemos. Uno de estos trucos es el uso del scroll, que nos permite mostrar sólo una parte de la información total que nos interesa mostrarle al usuario y lo que resta se mostrará conforme el usuario se desplace hacia arriba o hacia abajo, según sea el caso.
ScrollView es el contenedor que ofrece una barra de desplazamiento para el contenido que pongamos dentro de él. Es muy útil en los casos en los que el diseño pueda ser demasiado grande para algunas pantallas. La solución será envolver este contenido en un ScrollView, y seguir utilizando la lógica de diseño existentes. Lo que pasará después es que el usuario sólo verá parte del diseño a la vez, y el resto estará disponible a través del desplazamiento.
Realmente es muy sencillo implementarlo, así que pasemos directamente a crear un ejemplo para ver su funcionamiento.
1. Creamos un proyecto llamado AndroideityScrollView utilizando la versión Android 2.1 update 1.
2. Definimos un layout cuyo elemento contenedor será un ScrollView. Dentro de él declararemos una tabla con 7 filas de 200 px cada una. De esta manera tendremos 1400 px en total, un tamaño que nos mostrará cómo es que el scroll nos facilita la vida. A continuación te comparto un trozo de código que deberás escribir dentro del archivo main.xml del directorio res > layout.