Interfaz de usuario Android: Layouts básicos 2

AbsoluteLayout

Este contenedor posiciona los elementos de forma absoluta. Lo que quiere decir que  indicaremos la posición (x,y) de las vistas que insertemos dentro de este. Esto hace que sea más complicado de mantener y menos flexible que los demás tipos de contenedores. Por eso ha quedado obsoleto y no se recomienda su uso.

TableLayout

Este contenedor permite dividir el espacio disponible en forma de tabla, definiendo las columnas  y especificando el lugar donde se posicionarán sus vistas hijas en la tabla. Al igual que pasa con muchas de los atributos vistos, la definición de la tabla se asemeja a como la definiríamos en HTML. Pero a diferencia de como se define una tabla en HTML, ahora solo crearemos filas (elemento TableRow) y cada vista que coloquemos en ellas se corresponderá con una columna. Evidentemente en cada fila podremos insertar las vistas que queramos, independientemente de que en otra fila hayamos insertado más o menos. Por lo tanto para saber el total de columnas que tiene  el contenedor miraremos la fila que tiene más columnas.

Nota: si solo se tiene una fila definida en el XML es posible que Eclipse lanze el siguiente “warnning”: “This TableRow layout or its TableLayout parent is possibly useless”. Si se añade más de una fila desaparece.

A) Vamos a ver unos atributos característicos de este contenedor. Estos, al contrario que la mayoría de los atributos vistos hasta ahora, no solo admiten un valor. Si no que admiten una lista de indices indicando  las columnas (vistas) a las que se aplicará el atributo. Aunque si se va a aplicar a todas las columnas podemos utilizar el asterisco “*”. Es importante conocer que el indice que indica la primera columna es el 0.
-  android:shrinkColumns: Con este atributo indicaremos que columnas se contraerán para que las columnas que se salen de la pantalla quepan. Si todas las columnas caben, este atributo no hace nada
-  android:collapseColumns: Con este atributo indicaremos que columnas quieren ocultarse.
-  android:stretchColumns: Con este atributo indicaremos que columnas se expandirán hacia la derecha para aprovechar el espacio sobrante de las demás columnas.

B) Atributos característicos de las vistas contenidas en una TableLayout
- Tenemos la posibilidad  de que una vista ocupe más de una columna. Similar a como actúa el atributo colespan en HTML. Esto se indicará con el atributo android:layout_span de la vista que quiera utilizar este atributo. Y el valor que tomará será un entero indicando cuantas columna desea tomar.
- Podemos variar la columna en que se sitúa una vista, aplicando el atributo android:layout_column. Cuyo valor será la columna en la que se quiere posicionar la vista. Recuerda que el primer índice es el 0.

 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:id="@+id/tableLayout1"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent">  
   <TableRow  
     android:id="@+id/tableRow1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content">  
     <TextView  
       android:id="@+id/textView1"  
       android:text="@string/column_1"/>  
     <Button  
       android:id="@+id/button1"  
       android:text="@string/column_2" />  
   </TableRow>  

   <TableRow  
     android:id="@+id/tableRow2"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:padding="5dp" >  
     <EditText  
       android:id="@+id/editText1"  
       android:layout_span="2"  
       android:inputType="text"  
       android:text="@string/Column_1_2" />  
   </TableRow>  

   <!-- linea separadora -->  
   <View  
     android:layout_height="2dp"  
     android:background="#FF0000" />  

   <TableRow  
     android:id="@+id/tableRow3"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:padding="5dp" >  
     <TextView  
       android:id="@+id/textView2"  
       android:text="@string/column_1"/>  
     <Button  
       android:id="@+id/button2"  
       android:text="@string/column_2" />  
     <Button  
       android:id="@+id/button3"  
       android:text="@string/column_3" />  
   </TableRow>  

   <TableRow  
     android:id="@+id/tableRow4"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:padding="5dp" >  
     <Button  
       android:id="@+id/button4"  
       android:layout_column="2"  
       android:text="@string/column_3" />  
   </TableRow>  

   <TableRow  
     android:id="@+id/tableRow5"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:padding="5dp" >  
     <Button  
       android:id="@+id/button5"  
       android:layout_column="1"  
       android:text="@string/column_2" />  
   </TableRow>  
 </TableLayout>  

Incluir layouts

Una alternativa a tener una gran fichero XML con todos los elementos de una 'pantalla', es trocear un contenedor principal en dos contenedores e incluirlos en un contenedor que  actuará de padre. Para llevar a cabo la inclusión, en el contenedor padre simplemente declararemos un elemento similar a este:

 <include  
     android:id="@+id/linear1"  
     layout="@layout/contenedor1" />  

En donde se definirá el identificador del contenedor incluido  y el nombre del fichero que lo contiene (atributo layout).

Vamos a ver como distribuiríamos el siguiente ejemplo:

contenedor1.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:orientation="vertical" >  
   <TextView  
     android:layout_width="match_parent"  
     android:layout_height="40dp"  
     android:text="@string/textview" />  
   <EditText  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:hint="@string/edittext" />  
   <CheckBox  
     android:layout_width="match_parent"  
     android:layout_height="40dp"  
     android:text="@string/checkbox" />  
 </LinearLayout>  

contenedor2.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:background="#f0f0f0"  
   android:orientation="vertical" >  
   <TextView  
     android:layout_width="match_parent"  
     android:layout_height="50dp"  
     android:text="@string/textview" />  
   <EditText  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:hint="@string/edittext" />  
   <CheckBox  
     android:layout_width="match_parent"  
     android:layout_height="50dp"  
     android:text="@string/checkbox" />  
 </LinearLayout>  

main.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical" >  
   <TextView  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:text="@string/layout1" />  
   <include  
     android:id="@+id/linear1"  
     layout="@layout/contenedor1" />  
   <TextView  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:text="@string/layout2" />  
   <include  
     android:id="@+id/linear2"  
     layout="@layout/contenedor2" />  
 </LinearLayout>  

Estilos

En HTML podemos separar el estilo del contenido utilizando las hojas de estilos CSS. En ellas podemos crear clases con estilos que se repiten en varios elementos HTML.
En Android también podemos definir estilo en el fichero /res/values/styles.xml.
Un estilo tiene la siguiente estructura básica:

 <st yle name="BotonNormal">  
 </style>  

Cada estilo deberá de tener un conjunto de elementos que serán los atributos de dicho estilo. Cada elemento tendrá un atributo 'name' indicando el nombre de la característica que declara. Y el valor de dicho atributo. Dependiendo del tipo de atributo el valor podrá ser de un tipo u otro.

 <style name="BotonNormal">  
      <item name="android:layout_width">match_parent</item>  
      <item name="android:layout_height">wrap_content</item>  
      <item name="android:textColor">#888</it em>  
 </style>  

Como hemos visto, definir un estilo es muy sencillo. Y nos evitará repetir atributos iguales en vistas diferentes. Pudiendo definir un estilo y utilizarlo en dichas vistas. Así que vamos a ver como se utiliza:

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:orientation="vertical" >  
   <Button  
     android:id="@+id/button1"  
     style="@style/BotonNormal"  
     android:text="@string/hello_world" />  
 </LinearLayout>  

Herencia y estilos

Cuando definimos un estilo podemos especificar un estilo padre del cual heredaremos atributos.
Dependiendo de si el estilo es predefinido por Android o es propio actuaremos de formas diferentes:

A) Si queremos heredar de un estilo definido por Android, utilizaremos el atributo parent y la referencia del estilo del cual queremos heredar atributos. Recuerda que para acceder a algún recurso definido por Android utilizaremos @android: en la referencia.

  <style name="BotonNormal" parent="@android:style/TextAppearance.Large">  
     <item name="android:layout_width">match_parent</item>  
     <item name="android:layout_height">wrap_content</item>  
     <item name="android:textColor">#888<it></it></item>  
   </style>  

Los estilos definidos por Android se encuentran definidos en android_sdk_directory/platforms/android-version/data/res/values/styles.xml.

B) Si el estilo es propio podemos utilizar el atributo parent:

  <style name="BotonNormalVerde" parent="@style/BotonNormal">  
           <item name="android:background">#00FF00</item>  
  </style>  

O podemos utilizar el nombre de un estilo ya creado y completar el nombre con un punto más un sufijo:

  <style name="BotonNormal.Verde">  
           <item name="android:background">#00FF00</item>  
  </style>  

Y a la hora de utilizar el estilo heredado en una vista, utilizaremos el nombre completo, con el punto:

 <Button  
     android:id="@+id/button1"  
     style="@style/BotonNormal.Verde"  
     android:text="@string/hello_world" />  

Temas

En vez de aplicar un estilo a cada vista, podemos aplicar un estilo a toda una aplicación.
Para aplicar un estilo a toda una aplicación editaremos el fichero AndroidManifest.xml y en el etiqueta 'application' añadiremos el atributo android:theme. Cuyo valor será la referencia al estilo.

Ejemplo:

 <application  
     android:allowBackup="true"  
     android:icon="@drawable/ic_launcher"  
     android:label="@string/app_name"  
     android:theme="@style/AppTheme" >  
 …  

Entradas relacionadas

Interfaz de usuario Android: Conceptos
Interfaz de usuario Android: Layouts básicos 1
El archivo AndroidManifest.xml