Contenedor que posiciona sus vistas (Views) una detrás de otra. Configurable para que esta colocación sea horizontal (uno detrás de otro) o vertical (uno debajo de otro). Por lo tanto su atributo más importante es: android:orientation:”horizontal|vertical”. Las vistas empezarán a colocarse en la esquina superior izquierda de la pantalla. Actualmente es uno de los contenedores más utilizados.
Hay 3 atributos muy importantes que tendrán las vistas que se encuentren dentro de un contenedor de tipo LinearLayout y que nos ayudarán a su colocación (de las vistas):
A) Los atributos android:layout_width y android:layout_height explicados en un tutorial anterior.
B) El atributo android:layout_weight (valor por defecto 0) indica que proporción del espacio restante en el contenedor será adjudicado a una vista. Por lo tanto permite dar a las vistas de un LinearLayot unas dimensiones proporcionales entre ellas. Esto quiere decir que si al atributo android:layout_weight de una vista le asignamos el valor “1” y al mismo atributo de otra vista le asignamos “2”, esta última ocupará el doble del espacio libre que la primera.
Hay que tener en cuenta que el resultado de modificar este atributo depende del valor del atributo del contenedor android:orientation. Ya que si el valor es “vertical” las vistas crecerán en altura para adquirir el espacio extra proporcional. Sin embargo si el valor de la orientación del contenedor es “horizontal”, las vistas crecerán en anchura.
Lo mejor para comprobar el resultado de modificar los atributos descritos es ver un par de ejemplos:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/hello_world" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Button" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/hello_world" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Button" />
</LinearLayout>
FrameLayout
Contenedor que coloca sus vistas sin ningún tipo de distribución espacial. Por lo tanto, estas se posicionan una encima de otra. De tal forma que una vista quedará oculta por la siguiente (a no ser que se modifique la transparencia). La utilidad de este layout es la de colocar varios objetos para que ocupen el mismo lugar, pero que solo uno de ellos sea visible. Posteriormente podremos modificar las visibilidades de cada unos de los objetos hijos con el atributo 'android:visibility' (valores posibles visible o invisible) de los mismos. Los objetos empezarán a colocarse en la esquina superior izquierda de la pantalla.
Al igual que el contenedor Linearlayout, dos atributos importantes que tendrán las vistas de un Framelayout serán android:layout_width y android:layout_height, que podrán tomar los siguientes valores:
- “fill_parent” - para que la vista hija tome la dimensión de su layout contenedor padre.
- “wrap_content” - para que la vista hija tome la dimensión de su contenido.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>
RelativeLayout
Este contenedor nos permite posicionar cada vista respecto a otra o respecto al padre de dicha vista. De esta forma al insertar una nueva vista podremos indicar que se posicione debajo de otra vista o alineada a la derecha o izquierda del contenedor padre. Como pasaba en los anteriores contenedores, las vistas hijas se empezarán a colocar en la parte superior izquierda del contenedor. Y al igual que en un Framelayout, las vistas no ocupan posición por defecto. Por lo que se colocarán todas en el mismo lugar a no ser que modifiquemos sus posiciones relativas con la utilización de uno o más de los siguientes atributos:
A) Atributos para indicar posición relativa de la vista respecto a otra vista. El valor del atributo será la referencia a un identificador de una vista (View).
- android:layout_above: La vista que especifique este atributo se posicionará encima de la vista que indiquemos con su identificador. Ej: android:layout_above="@id/TextView1".
- android:layout_below: La vista que especifique este atributo se posicionará debajo de la vista que indiquemos con su identificador: Ej: android:layout_below="@id/TextView1".
- android:layout_toLeftOf: La vista que especifique este atributo se posicionará a la izquierda de la vista que indiquemos con su identificador: Ej: android:layout_toLeftOf="@id/TextView1".
- android:layout_toRightOf: La vista que especifique este atributo se posicionará a la derecha de la vista que indiquemos con su identificador: Ej: android:layout_toRightOf="@id/TextView1".
- android:layout_alignLeft: La vista que especifique este atributo tendrá sus esquinas de la parte
derecha alineadas con las esquinas de la parte derecha de la vista que indiquemos con su identificador. Ej: android:layout_alignLeft="@id/TextView1".
- android:layout_alignRight: La vista que especifique este atributo tendrá sus esquinas de la parte derecha alineadas con las esquinas de la parte derecha de la vista que indiquemos con su identificador. Ej: android:layout_alignLeft="@id/TextView1".
- android:layout_alignTop: La vista que especifique este atributo se alineará con la coordenada límite 'Y' superior de la vista que indiquemos con su identificador. Ej:android:layout_alignTop="@id/TextView1".
- android:layout_alignBottom: La vista que especifique este atributo se alineará con la coordenada límite inferior 'Y' de la vista que indiquemos con su identificador. Ej:android:layout_alignBottom="@id/TextView1”.
- android:layout_alignBaseline: La vista que especifique este atributo se alineará con el contenido de la vista que indiquemos con su identificador. Ej:android:layout_alignBaseline="@id/TextView1”.
Nota: Hay que tener cuidado al posicionar respecto una vista que ocupe una esquina del contenedor. Ya que es posible que la vista que se posicione relativamente a la anterior se salga del contenedor.
B) Atributos para indicar posición relativa de la vista respecto a su contenedor. El valor de estos atributos será “true” o “false”.
- android:layout_alignParentLeft: La vista que contenga este atributo a 'true' se alineará con el borde izquierdo de su contenedor padre. Ej:android:layout_alignParentLeft="true”.
- android:layout_alignParentRight: La vista que contenga este atributo a 'true' se alineará con el borde derecho de su contenedor padre. Ej:android:layout_alignParentRight="true” .
- android:layout_alignParentTop: La vista que contenga este atributo a 'true' se alineará con el borde superior de su contenedor padre. Ej:android:layout_alignParentTop="true”.
- android:layout_alignParentBottom: La vista que contenga este atributo a 'true' se alineará con el borde inferior de su contenedor padre. Ej:android:layout_alignParentBottom="true”.
- android:layout_centerHorizontal: La vista que contenga este atributo a 'true' se posicionará en el centro del eje horizontal de su contenedor padre. Ej:android:layout_centerHorizontal="true”
- android:layout_centerVertical: La vista que contenga este atributo a 'true' se posicionará en el centro del eje vertical de su contenedor padre. Ej:android:layout_centerVertical="true”.
- android:layout_centerInParent: La vista que contenga este atributo a 'true' se posicionará en el centro del eje horizontal y vertical de su contenedor padre. Es lo mismo que si especificamos los dos atributos anteriores a 'true'. Ej:android:layout_centerInParent="true”.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="@string/hello_world" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/TextView1"
android:layout_alignTop="@id/TextView1"
android:text="Button" />
</RelativeLayout>
Entradas relacionadas
Interfaz de usuario Android: Conceptos
Interfaz de usuario Android: Layouts básicos 2
No hay comentarios:
Publicar un comentario