Layout

Layout es un término de la lengua inglesa que no forma parte del diccionario de la Real Academia Española (RAE). El concepto puede traducirse como “disposición” o “plan” y tiene un uso extendido en el ámbito de la tecnología.

La noción de Layout suele utilizarse para nombrar al esquema de distribución de los elementos dentro un diseño. Es habitual que un diseñador que se dedica a la creación de páginas web desarrolle un Layout y se lo presente a su cliente para que éste lo apruebe y decida sobre la distribución de los contenidos.

El Layout, en este sentido, puede ser una especie de plantilla que presenta tablas o espacios en blanco. La idea es que, a partir del Layout, la página web comience a desarrollarse con sus contenidos específicos. El Layout puede estar compuesto, por ejemplo, por un rectángulo a modo de cabezal y por tres columnas. Dicho esquema es genérico y puede usarse para desarrollar múltiples sitios web.

Tipos de Layout para Aplicación Android en Eclipse

Vamos a ver distintos tipos de Layout que podemos utilizar en nuestro desarrollo para una plataforma Android. Los tipos de los que disponemos son:

•            Layout Lineal
•          Table Layout
•         Absolute Layout
•          Relative Layout
•          Frame Layout

Layout Lineal

Es el Layout más simple que podemos utilizar. Como su nombre indica, los elementos se irán colocando uno detrás de otro, pero sí que podemos indicar si la colocación lineal se hará de forma vertical u horizontal.

Para ponerlo de forma vertical, en la propiedad “orientation” hay que indicarle el valor “vertical”.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

         android:orientation="vertical" android:layout_width="fill_parent"

         android:layout_height="fill_parent">

         <Button android:text="Button01" android:id="@+id/Button01"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

         <Button android:text="Button02" android:id="@+id/Button02"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

Si lo que queremos es darle una orientación horizontal, el valor de la propiedad será “horizontal”.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

         android:orientation="horizontal" android:layout_width="fill_parent"

         android:layout_height="fill_parent">

         <Button android:text="Button01" android:id="@+id/Button01"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

         <Button android:text="Button02" android:id="@+id/Button02"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

Table Layout

Es un modelo de organización basado en una organización con tablas. El diseño lo organizaremos en filas (elemento TableRow) y dentro de cada fila, pondremos los elementos.

<?xml version="1.0" encoding="utf-8"?>

<TableLayout android:id="@+id/TableLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <TableRow android:id="@+id/TableRow01">

                 <TextView android:id="@+id/TextView01" android:text="First Name:"

                          android:width="100px" />

                 <EditText android:id="@+id/EditText01" android:width="220px" />

         </TableRow>

         <TableRow android:id="@+id/TableRow02">

                 <TextView android:id="@+id/TextView02" android:text="Second Name:" />

                 <EditText android:id="@+id/EditText02" />

         </TableRow>

         <TableRow android:id="@+id/TableRow03">

                 <Button android:id="@+id/Button01"

            android:layout_width="wrap_content"

                          android:layout_height="wrap_content" android:text="Submit" />

                 <Button android:id="@+id/Button02"

            android:layout_width="wrap_content"

                          android:layout_height="wrap_content" android:text="Reset"

                          android:width="100px" />

         </TableRow>

</TableLayout>

Layout Relativo

Este es el layout más flexibles de todos. Los elementos se colocan relativos a otro elemento o a otro Layout.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout android:id="@+id/RelativeLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <TextView android:id="@+id/TextView01"

        android:layout_width="wrap_content"

                 android:layout_height="wrap_content" android:text="First Name:"

                 android:width="100px" />

         <EditText android:id="@+id/EditText01" android:layout_width="220px"

                 android:layout_height="wrap_content"

        android:layout_toRightOf="@+id/TextView01"

                 android:layout_below="@+id/RelativeLayout01" />

         <EditText android:id="@+id/EditText02" android:layout_width="220px"

                 android:layout_height="wrap_content"

        android:layout_below="@+id/EditText01"

                 android:layout_alignLeft="@+id/EditText01" />

         <TextView android:id="@+id/TextView02"

        android:layout_width="wrap_content"

                 android:layout_height="wrap_content" android:text="Second Name:"

                 android:width="100px" android:layout_below="@+id/EditText01"

                 android:layout_toLeftOf="@+id/EditText02" />

         <Button android:text="Submit" android:id="@+id/Button01"

                 android:layout_width="100px" android:layout_height="wrap_content"

                 android:layout_below="@id/EditText02"

        android:layout_alignLeft="@id/EditText02" />

         <Button android:text="Reset" android:id="@+id/Button02"

                 android:layout_width="100px" android:layout_height="wrap_content"

                 android:layout_below="@id/EditText02"

        android:layout_alignRight="@id/EditText02" />

</RelativeLayout>

Absolute Layout

Es una capa donde se utilizan coordenadas X e Y para indicarle donde colocar los elementos dentro del diseño. En cada elemento del código se le indicará el valor de X y de Y.

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout android:id="@+id/AbsoluteLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <EditText android:id="@+id/EditText01" android:layout_width="200px"

                 android:layout_height="wrap_content" android:layout_x="12px"

                 android:layout_y="12px" />

         <Button android:text="Search" android:id="@+id/Button01"

                 android:layout_width="100px" android:layout_height="wrap_content"

                 android:layout_x="220px" android:layout_y="12px" />

</AbsoluteLayout>

Frame Layout

Este Layout consiste en un marco que ocupa toda la pantalla, y donde los controles se dispondrán a partir de la esquina superior izquierda, por lo que es probable que haya elementos que se queden ocultos detrás de otros.

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout android:id="@+id/FrameLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <ImageView android:id="@+id/ImageView01" android:src="@drawable/android"

                 android:layout_width="fill_parent"

        android:layout_height="fill_parent"

                 android:scaleType="center" />

         <TextView android:text="Android Partaker" android:id="@+id/TextView01"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content"

                 android:layout_marginBottom="20dip"

        android:layout_gravity="center_horizontal|bottom"

                 android:padding="10dip"

        android:textColor="#AA0000" android:textStyle="bold"

                 android:textSize="20px" android:background="#00000000" />

</FrameLayout>