You are on page 1of 8

Layouts

Si queremos combinar varios elementos de tipo vista tendremos que utiliza un objeto de
tipo Layout. Un Layout es un contenedor de una o ms vistas y controla su
comportamiento y posicin. Hay que destacar que un Layoutpuede contener a
otro Layout y que es un descendiente de la clase View.
La siguiente lista describe los Layout ms utilizados en Android:
LinearLayout: Dispone los elementos en una fila o en una columna.
TableLayout: Distribuye los elementos de forma tabular.
RelativeLayout: Dispone los elementos en relacin a otro o al padre.
AbsoluteLayout: Posiciona los elementos de forma absoluta.
FrameLayout: Permite el cambio dinmico de los elementos que contiene.
Dado que un ejemplo vale ms que mil palabras, pasemos a mostrar cada uno de
estos layouts en accin:
LinearLayout es uno de los Layout ms utilizado en la prctica. Distribuye los elementos
uno detrs de otro, bien de forma horizontal o vertical.

<LinearLayout

xmlns:android="http://...

android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation ="vertical">
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un checkBox"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botn"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un texto cualquiera"/>
</LinearLayout>
TableLayoutdistribuye los elementos de forma tabular. Se utiliza la etiqueta TableRow cada
vez que queremos insertar una nueva lnea.

<TableLayout xmlns:android=http://...
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TableRow>
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un checkBox"/>
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botn"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un texto cualquiera"/>
</TableRow>
</TableLayout>

RelativeLayout permite comenzar a situar los elementos en cualquiera de los cuatro lados
del contenedor e ir aadiendo nuevos elementos pegados a estos.

<RelativeLayout
xmlns:android="http://schemas...
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<AnalogClock
android:id="@+id/AnalogClock01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<CheckBox
android:id="@+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/AnalogClock01"
android:text="Un checkBox"/>
<Button
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botn"
android:layout_below="@+id/CheckBox01"/>
<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Un texto cualquiera"/>
</RelativeLayout>

AbsoluteLayoutpermite indicar las coordenadas (x,y) donde queremos que se visualice


cada elemento.

<AbsoluteLayout
xmlns:android="http://schemas.
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50px"
android:layout_y="50px"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un checkBox"
android:layout_x="150px"
android:layout_y="50px"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botn"
android:layout_x="50px"
android:layout_y="250px"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un texto cualquiera"
android:layout_x="150px"
android:layout_y="200px"/>
</AbsoluteLayout>

FrameLayoutposiciona todos los elementos usando todo el contenedor, sin distribuirlos


espacialmente. EsteLayout suele utilizarse cuando queremos que varios elementos
ocupen un mismo lugar pero solo uno ser visible. Para modificar la visibilidad de un
elemento utilizaremos la propiedad visibility.

<FrameLayout
xmlns:android="http://schemas...
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un checkBox"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botn"
android:visibility="invisible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un texto cualquiera"
android:visibility="invisible"/>
</FrameLayout>

Prctica: Uso de Layouts

1.

Utiliza un RelativeLayout para realizar un diseo similar al siguiente:

2. Utiliza un TableLayout para realizar un diseo similar al siguiente:

3. Utiliza un AbsoluteLayout para realizar un diseo similar al siguiente.


Ojo AbsoluteLayout lo encontrars en la paleta Advanced no en la de Layouts.
Trata de reutilizar el Layout creado en el punto anterior.

4. Visualiza el resultado obtenido en el punto anterior en diferentes tamaos de


pantalla. Ha sido una buena idea usar AbsoluteLayout? Se te ocurre otra
forma de realizar este diseo de forma que se visualice correctamente en cualquier
tipo de pantalla?
5. Trata de hacer el ejercicio anterior utilizando LinearLayout.
6. Visualiza el resultado obtenido en diferentes tamaos de pantalla. Has resuelto
el problema?

Test
Cul de los siguientes Layouts superpone las vistas que contiene?

AbsoluteLayout
RelativeLayout
FrameLayout

LinearLayout
TableLayout
Cul de los siguientes Layouts permite posicionar las vistas en funcin a donde estn otras?

AbsoluteLayout
RelativeLayout
FrameLayout
LinearLayout
TableLayout
El atributo strechColumns a qu tipo de Layout se aplica?

AbsoluteLayout
RelativeLyout
FrameLayout
TableLayout
Qu atributo puedes indicar en un AbsoluteLayout?

orientation
layout_y
strechColumns
layout_toLeftOf

Otros tipos de Layouts


Tambin podemos utilizar otras clases de Layouts, que son descritas a continuacin:

ScrollView: Visualiza una columna de elementos; cuando estos no caben en pantalla se


permite un deslizamiento vertical.
HorizontalScrollView: Visualiza una fila de elementos; cuando estos no caben en
pantalla se permite un deslizamiento horizontal.

TabHost: Proporciona una lista de ventanas seleccionables por medio de etiquetas que
pueden ser pulsadas por el usuario para seleccionar la ventana que desea visualizar. Se
estudia al final del captulo.

ListView: Visualiza una lista deslizable verticalmente de varios elementos. Su utilizacin


es algo compleja. Se ver un ejemplo en el captulo siguiente.

GridView: Visualiza una cuadrcula deslizable de varias filas y varias columnas.

ViewFlipper: Permite visualizar una lista de elementos de forma que se visualice uno
cada vez. Puede ser utilizado para intercambiar los elementos cada cierto intervalo de
tiempo.

You might also like