Layouts

Los layouts son contenedores donde podremos almacenar nuestros controles. Entre las propiedades más utiles de este control podemos encontrar:

• android:layout_width: indica la anchura del contenedor. Como constantes para esta propiedad tenemos:
• fill_parent: la anchura del contenedor la establece el layout donde se encuentra contenido (si sólo tenemos un layout, la dimensión del control ocupará toda la pantalla a lo ancho).
• match_parent: igual al anterior, el tamaño a lo ancho lo especifica el contenedor padre.
• wrap_content: el ancho del contenedor será el mismo que tenga el control o controles que albergue.
• variable: este no es una constante (como su nombre indica), sino que nosotros mismos le indicamos qué tamaño queremos para el contenedor (indicándolo mediante px, dp, etc.).
• android:layout_height: igual que la anterior pero para la altura.
• android:orientation: depende del tipo de layout, especificaremos orientación Horizontal o Vertical para posicionar los controles.
• android:id: identificador para referirnos al layout. A través de este ID, accederemos a todas sus propiedades desde JAVA.
• android:background: color de fondo del layout. El color se especifica en formato RGB hexadecimal con la opción de poder añadir un canal más para el Alpha. A grandes rasgos, este canal Alpha nos indica el nivel de transparencia que tendrá nuestro color. Los formatos para esta propiedad son:
• #RGB
• #ARGB
• #RRGGBB
• #AARRGGBB

Los tipos de Layout disponibles son:

• LinearLayout: cuando creamos una actividad nueva, por defecto trae este tipo de layout. Este contenedor nos agrupa los controles uno detrás de otro alineados a la izquierda. Dependiendo lo que le especifiquemos en su propiedad "orientation", nos agregará los controles de forma horizontal o vertical. En el siguiente código vemos un LinearLayout padre donde especificamos que el ancho sea el de la pantalla, su altura sea de 200dp, la orientación de los controles verticales y su color de fondo azul con el canal alfa transparente. Contiene otro LinearLayout donde especificamos que la anchura sea la que tenga el contenedor padre, la altura se adapte al control que contenga, la orientación de los controles verticales y el color de fondo rojo con una transparencia del 50%. Debido al canal alfa, el color es una mezcla entre el rojo especificado en este layout y del azul del padre, dando un tono morado.

<?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="200dp"
    android:orientation="vertical" 
    android:background="#ff0000ff"
    android:id="@+id/lyEjemplo_layouts">
 
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#88ff0000">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Etiqueta 1" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Etiqueta 2" />

    </LinearLayout>
 </LinearLayout>

•  RelativeLayout: este contenedor permite especificar la posicion de cada elemento de forma relativa a su elemento padre, a otro elemento incluido en el mismo layout o incuso a otro layout. En el ejemplo, vemos como el control EditText01 se alinea a la derecha del control TextView01 y el control EditText02 se posiciona debajo y a la derecha del control EditText01.

<RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nombre:"
            android:width="100px" />

        <EditText
            android:id="@+id/EditText01"
            android:layout_width="220px"
            android:layout_height="wrap_content"
            android:layout_below="@+id/RelativeLayout01"
            android:layout_toRightOf="@+id/TextView01" />

        <EditText
            android:id="@+id/EditText02"
            android:layout_width="220px"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/EditText01"
            android:layout_below="@+id/EditText01" />
    </RelativeLayout>

•  AbsoluteLayout: cada elemento que contenga este contenedor, deberá especificar las coordenadas X e Y en sus propiedades para situar al control dentro de su layout. Este método está obsoleto y se desaconseja su uso.

• FrameLayout: indicado para contener un único elemento, ya que posiciona los controles a partir de su esquina superior izquierda uno encima del otro.

<FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </FrameLayout>

• TableLayout: contenedor basado en tabla. Se pueden añadir filas (TableRow) pero no columnas, es decir, las columnas las forman los controles que vamos añadiendo a las filas (un control, una columna). El tamaño de la columna suele corresponder al tamaño que tenga el control insertado, aunque hay propiedades del TableLayout que nos ayudan a manejar estos parámetros:
• android:shrinkColumns: indica que columnas pueden contraerse cuando no hay sítio suficiente para mostrar todas las columnas en pantalla y se nos ocultan por la derecha.
• android:stretchColumns: indica que columnas pueden expandirse si hay sitio suficiente a la derecha del control.
• android:collapseColumns: indica que columnas queremos ocultar.
• android:layout_span: análogo al atributo Colspan de HTML. Indica cuantas celdas contiguas ocupará la celda a la que se le aplique.

 Estas propiedades aceptan una lista de índices indicando las columnas afectadas, aunque también podemos hacer referencia a todas las columnas pasándole un asterisco (*).

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:collapseColumns="1"
    android:shrinkColumns="0"
    android:stretchColumns="0" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <CheckBox
            android:id="@+id/checkBox1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:keepScreenOn="false"
            android:text="CheckBox" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2" />
    </TableRow>

</TableLayout>

Maikel.