miércoles, 3 de agosto de 2011

Elementos básicos del interface de usuario – Layouts (III)- Basic elements of the user interface

RelativeLayout: Este tipo de Layout sitúa sus elementos  en función de la posición de los otros componentes de la vista, lo cual nos da un control total de su disposición. Hasta ahora veíamos cómo los elementos aparecían en pantalla dispuestos en el mismo orden en que los definíamos en el xml. Con este tipo de Layout podemos indicar que un elemento lo queremos situar arriba o a la izquierda del que hemos definido en primer lugar.
Para poder hacer referencia a un elemento del Layout debemos definirle el atributo id : android:id="@+id/nombre"
Veamos un ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
      <TextView 
          android:id="@+id/Uno"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="UNO"
          android:background="#ff0000"
          android:layout_below="@+id/Dos"
          />
      <TextView
          android:id="@+id/Dos"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="DOS"
          android:background="#0000ff"
          android:layout_below="@+id/Tres"
          /> 
      <TextView
          android:id="@+id/Tres"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="TRES"
          android:background="#dddddd"
          />
</RelativeLayout>

Como vemos hemos definido tres elementos que muestran los textos ‘UNO’, ‘DOS’ y ‘TRES’ pero al probarlo vemos que el orden cambia:



Aparece primero el ‘TRES’, después el ‘DOS’ y, por último el ‘UNO’. Esto es debido al atributo android:layout_below="@+id/Nombre" en el que indicamos que deseamos que aparezca bajo el elemento identificado.
Debemos llevar cuidado en no generar incongruencias indicando, por ejemplo, que el elemento Dos debe ir bajo el Uno y viceversa puesto que nos daría un error de ejecución.
Si no ponemos atributos en los elementos, ‘RelativeLayout’ se comporta como un ‘FrameLayout’, apelotonando todos los elementos en la esquina superior izquierda.
Otros atributos son:

  • android:layout_above="@+id/Nombre" Sitúa el elemento por encima del identificado.
  • android:layout_toRightOf="@+id/Nombre" Sitúa el elemento a la derecha del identificado.
  • android:layout_toLeftOf="@+id/Nombre" Sitúa el elemento a la izquierda del identificado.
  • android:layout_alignLeft="@+id/Nombre" Hace que el borde izquierdo del elemento esté alineado con el borde izquerdo del identificado.
  • android:layout_alignRight="@+id/Nombre" Hace que el borde derecho del elemento esté alineado con el borde derecho del identificado.
Y asi algunos más que podeis ver en la página dereferencia

AbsoluteLayout: Este tipo de Layout posiciona sus elementos según las coordenadas x/y proporcionadas (en pixels), de forma que podemos situarlos en cualquier posición de la pantalla.
No es recomendable utilizar este tipo de Layouts a no ser que estemos realizando una aplicación para un determinado tipo de dispositivos, puesto que podemos encontrarnos sorpresas al probarlo con distintas resoluciones.

Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
      <TextView 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="UNO"
          android:background="#ff0000"
          android:layout_x="45px"
          android:layout_y="20px"
          />
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="DOS"
          android:background="#0000ff"
          android:layout_x="10px"
          android:layout_y="25px"
          />
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="TRES"
          android:background="#dddddd"
          android:layout_x="20px"
          android:layout_y="10px"
          />
</AbsoluteLayout>

Nos proporciona una vista como esta:

Para hacer pruebas con los distintos tipos de Layout y sus atributos podeis utilizar el editor que viene en el IDE Eclipse, que es bastante completo y nos da facilidades a la hora de ver todas las opciones disponibles en cada momento.


Hasta la próxima..

2 comentarios:

  1. y si la linea android:layout_below te la da como error como a mi?

    below no me da opcion valida, ya no se si es por que me falte algo por instalar...

    ResponderEliminar