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>
