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.
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”.
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.
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.
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.
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.
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>
