Diseño de Interfaz de Usuario Android: Composiciones Lineales

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Comprender las composiciones es muy importante para el buen diseño de aplicaciones Android. En este tutorial, aprenderá todo lo relacionado a las composiciones lineales, las cuales organizan los controles de interfaz del usuario, o los widgets, verticalmente u horizontalmente en la pantalla. Cuando lo utilizamos de forma correcta, las composiciones lineales pueden ser la composición fundamental sobre muchas aplicaciones Android interesantes sobre las cuales pueden ser diseñadas las interfaces de usuario.

¿Qué es una Composición Lineal?

Las composiciones lineales son una de las más simples y más comunes tipos de composiciones utilizadas por los desarrolladores Android para organizar los controles dentro de sus interfaces de usuarios. Las composiciones lineales funcionan como su nombre lo implica: organizan los controles de manera lineal en un estilo vertical u horizontal. Cuando la orientación de la composición está ajustado de forma vertical, todos los controladores menores dentro de ésta están organizados en una sola columna, cuando la orientación de la composición está ajustada de forma horizontal, todos los controles menores dentro de ésta están organizados en una sola fila.

Las composiciones lineales pueden ser definidas dentro de recursos de composiciones XML o mediante programación en el código Java de la aplicación.

La siguiente figura muestra un layout lineal con siete controles TextView. La orientación del layout lineal está ajustado a vertical, causando que cada uno de los controles TextView muestre una sola columna. Cada control TextView tiene su atributo texto configurado a un color, con ese mismo color como el del fondo del control, cada control está estirado al ancho de la pantalla mediante el ajuste de los controles layout_width y el atributo fill_parent.

Definiendo un XML Layout Resource con un Layout Lineal

La manera más conveniente y sostenible de diseñar una aplicación de interfaz de usuario es mediante la creación de XML layout resources. Este método, simplifica en gran medida el proceso de diseño UI mucho más que la creación de controles de interfaz de usuario static y layout y la definición de los atributos de los controles, para el XML, en lugar de eliminar el código.

XML layout resources deben ser almacenaos en la jerarquía del directorio del proyecto /res/layout. Vamos a echar un vistazo al arco iris layout lineal presentado en la sección anterior. Nuevamente, esta pantalla es básicamente un layout lineal alineado de forma vertical para rellenar la pantalla completa, lo cual es conseguido mediante la configuración de sus atributos: layout_width, layout_height y fill_parent. Este archivo layout resource, apropiadamente llamado /res/layout/rainbox.xml, está definido en XML de la siguiente manera:

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical">
    <TextView android:text="RED" android:id="@+id/TextView01"
        android:layout_height="wrap_content" android:background="#f00"
        android:layout_width="fill_parent" android:layout_weight=".14"
        android:gravity="center" android:textColor="#000"></TextView>
    <TextView android:text="ORANGE" android:id="@+id/TextView02"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".15" android:background="#ffa500"
        android:gravity="center" android:textColor="#000"></TextView>
    <TextView android:text="YELLOW" android:id="@+id/TextView03"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#ffff00"
        android:gravity="center" android:textColor="#000"></TextView>
    <TextView android:text="GREEN" android:id="@+id/TextView04"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".15" android:background="#0f0" android:gravity="center"
        android:textColor="#000"></TextView>
    <TextView android:text="BLUE" android:id="@+id/TextView05"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#00f" android:gravity="center"
        android:textColor="#fff"></TextView>
    <TextView android:text="INDIGO" android:id="@+id/TextView06"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#4b0082"
        android:gravity="center" android:textColor="#fff"></TextView>
    <TextView android:text="VIOLET" android:id="@+id/TextView07"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#ee82ee"
        android:gravity="center" android:textColor="#000"></TextView>
</LinearLayout>

Quizás haya notado que cada uno de los controles child del layout lineal tiene un número de atributos interesantes, incluyendo uno llamado: layout_weight. Hablaremos más acerca de esto en algunos momentos.

Las siguientes dos figuras que éste layout podría lucir en un dispositivo son en ambos modos, vertical y horizontal.

Recuerde eso, desde dentro del Activity, solamente una sola línea de código dentro del método onCreate() es necesario para cargar y mostrar un layout resource en la pantalla. Si el layout resource fue almacenado en el archivo /res/layout/rainbow.xml, entonces esa línea de código sería:

1
2	setContentView(R.layout.rainbow);

Definiendo un Layout Lineal por medio de programación.

Además, puede crear por medio de programación y configurar layouts lineales. Esto se hace usando la clase LinearLayout (android.widget.LinearLayout). Encontrará el parámetro child específico en la clase LinearLayout.LayoutParams. Además, el parámetro layout normal (android.view.ViewGroup.LayoutParams) tal como layout_height y layout_width, así como los márgenes de los parámetros (ViewGroup.MarginLayoutParams), aún aplican para los objetos LinearLayout.
En lugar de cargar directamente un layout resource usando el método setContentView() como se mostró anteriormente, en cambio, usted debe desarrollar los contenidos de la pantalla en Java y luego suministrar un objeto parent layout que contiene todos los controles de contenido para mostrar como vistas child al método setContentView(). En este caso, su parent layout sería el layout lineal.
Por ejemplo, el siguiente código ilustra cómo por medio de la programación tener un Activity instancia un LinearLayout y coloca tres objetos TextView dentro de su método onCreate().


public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // setContentView(R.layout.rainbow);
    TextView tv1 = new TextView(this);
    tv1.setText("FIRST");
    tv1.setTextSize(100);
    tv1.setGravity(Gravity.CENTER);

    TextView tv2 = new TextView(this);
    tv2.setTextSize(100);
    tv2.setGravity(Gravity.CENTER);
    tv2.setText("MIDDLE");

    TextView tv3 = new TextView(this);
    tv3.setTextSize(100);
    tv3.setGravity(Gravity.CENTER);
    tv3.setText("LAST");
        
    LinearLayout ll = new LinearLayout(this);
    ll.setOrientation(LinearLayout.VERTICAL);
    ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    ll.setGravity(Gravity.CENTER);
    ll.addView(tv1);
    ll.addView(tv2);
    ll.addView(tv3);    
    setContentView(ll);
}

Las siguientes dos figuras muestran que éste layout podría lucir en un dispositivo, tanto en modo vertical como horizontal.

Vamos a echar un vistazo más de cerca al siguiente código Java. Primero, tres controles TextView son creado y configurados. Cada uno tiene un tamaño de texto (tamaño de fuente) una alineación de texto (gravedad) y el texto. A continuación, un layout lineal es creado con una orientación vertical. Los parámetros del layout lo permiten para llenar el parent entero (en este caso, la pantalla completa) y su gravedad causa que todos los controles child sean centraos dentro de la pantalla en vez de la esquina superior izquierda). Cada uno de los tres controles TextView es agregado como una vista child usando el método addView(). Finalmente, el layout lineal se pasa dentro del método setContentView() como el control parent para mostrar en pantalla.
Como puede ver, el código puede, rápidamente, aumentar en tamaño a medida que más controles son añadidos a la pantalla. Para organización y mantenimiento, definir y usar layouts por medio de la programación es lo mejor que queda para los casos extraños en vez de la norma.

Explorando las Propiedades Importantes y los Atributos de los Layout Lineales

Ahora vamos hablar un poco sobre los atributos que ayudan a configurar un layout lineal y sus controles child.

Algunos atributos específicos se emplean para los layouts lineales. Algunos de los atributos más importantes, usted los usará con los layout lineales incluidos:

El atributo orientación (requerido) que puede ser ajustado a vertical u horizontal (clase: LinearLayout).
El atributo gravedad (opcional) que controla cómo son alineados todos los controles child y cómo se muestran dentro de un layout lineal (clase: LinearLayout).
El atributo layout_weight (opcional, aplicado a cada control child específica la importancia relativa de cada control child dentro del layout parent lineal (clase: LinearLayout.LayoutParams).

Además, los atributos de estilo ViewGroup aplicado a layouts lineales. Estos incluyen:

Parámetros Layout Genéricos tales como layout_height (requerido) y layout_width (requerido) (clase: ViewGroup.LayoutParams).
Parámetros Layout Márgenes tales como margin_top, margin_left, margin_right y margin_bottom (clase: ViewGroup. Margin Layout Params).
Los parámetros Layout tales como layout_height y layout_width (clase: ViewGroup.LayoutParams).

Examinando los Controles Child

La mayoría de los layout lineales son muy claros. Sin embargo, el atributo layout_weight merece un poco más de discusión. A diferencia de otros atributos layout lineales que son aplicados a los layout view lineales, éste atributo aplica su propios controles child. Los mismos valores weight serían números (por ejemplo, .50, .25, .10, .05) donde el total, si suma los valores de peso de todos los childs será igual a 1 (100%).

El peso de un child controla cuan "importante" o "espacio" es dado dentro de sus parent layout lineal. Esto se ilustra mejor usando un ejemplo. Volvamos de regreso al layou arco iris lineal que usamos anteriormente. Para dejar que todos los controles child "expandan" para rellenar el layout lineal de la misma forma, independientemente del tamaño de la pantalla, usamos layout_weight para asignar pesos relativos para cada TextView. Como hay siete colores a los que queremos méritos iguales, dividimos 1 entre 7 y quedará con 0.143. Sin embargo, ya que deseamos que los pesos sumen 1, eventualmente cinco de los controles de pesos recibieron un valor ya sea de .14 y dos recibieron un valor de .15 —una sutil diferencia que nos hace sumar exactamente 1, pero es bastante evidente para el primer y el último control.

Este peso engañoso funciona bien cuando hay espacio adecuado en la pantalla para que todos los controles se muestren apropiadamente. Es decir, cuando el espacio está apretado, el atributo peso puede ser anulado por otros factores, tales como; recorte de vista o, en el caso de un TextView, tratar de no envolver el texto. Esto se vuelve aparente cuando cambiamos el archivo layout rainbow.xml para incluir un layout horizontal similar (layout_height está también ajustado para fill_parent).
Las siguientes dos figuras muestran que éste mismo layout (solamente cambió a una orientación horizontal) como podría aparecer en un dispositivo en ambos modos; vertical como horizontal.

Lo que esperamos es que las áreas de color rojo y violeta (peso 0.15) serán ligeramente más grande que los otros colores (peso 0.14) sin embargo, no es como se muestra. Si ve más de cerca en el TextView ROJO, debería de ocupar más espacio que su TextView NARANJA que está a su lado. Sin embargo, debido a que "Rojo" es una palabra corta y "Naranja" no lo es, se hace algún alboroto automáticamente para tratar de envolver todas las palabras. El resultado es más agradable, pero puede ser un poco más molesto trabajar en todo si éste no es el efecto deseado.

En conclusión

Las aplicaciones de interfaz de usuario Android están definidas usando layouts, y layouts lineales son uno de los tipos de layout principales usados en Android. El layout lineal permite a los controles child ser organizados en una sola fila (horizontalmente) o una sola columna (verticalmente). La ubicación del control child puede ser ajustada usando los atributos de gravedad y peso.

Acerca de los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.