AndroidLayout

Guido Ticona Hurtadoguidoti@gmail.com

Es una forma de organizar los items en la pantalla

Heredan de la clase ViewGroup, que hereda de View

Layout

AbsoluteLayout FrameLayout LinearLayout RelativeLayout TableLayout

Tipos

Se basa en la idea de colocar cada control en un lugar fijo

Se especifica coordenadas x y y No es recomendable Es obsoleto a partir de la version 2.2

AbsoluteLayout

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/backbutton" android:text="Back" android:layout_x="10px" android:layout_y="5px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_x="10px" android:layout_y="110px" android:text=“Nombre" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:layout_x="150px" android:layout_y="100px" android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </AbsoluteLayout>

Ejemplo

Despliega un simple item a la vez Se puede tener muchos items, pero cada

elemento sera colocado basado en posicion izq-arriba de la pantalla

Se sobreponen Util para ocultar y mostrar

FrameLayout

<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:src="@drawable/icon" android:scaleType="fitCenter" android:layout_height="fill_parent" android:layout_width="fill_parent"/> <TextView android:text=“google.com" android:textSize="24sp" android:textColor="#000000" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center"/> </FrameLayout>

Ejemplo

Organiza secuencialmente Puede ser horizontal o Vertical usando

android:orientation No se puede colocar en cualquier posicion

LinearLayout

<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:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text=“Nombre" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text=“Apellido" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

Ejemplo

Se basa en relacion a otro elemento◦ android:layout_above◦ android:layout_below◦ android:layout_toLeftOf◦ android:layout_toRightOf◦ android:layout_alignBaseline◦ android:layout_alignBottom◦ android:layout_alignLeft◦ android:layout_alignRight◦ android:layout_alignTop

RelativeLayout

Se basa con la relacion padre(contenedor)◦ android:layout_alignParentBottom◦ android:layout_alignParentLeft◦ android:layout_alignParentRight◦ android:layout_alignParentTop◦ android:layout_centerHorizontal◦ android:layout_centerVertical◦ android:layout_centerInParent

RelativeLayout (cont.)

Organizado en filas y columnas Las filas se definen en XML Las columnas se definen automaticamente Un elemento puede ocupar mas de 1

columnas layout_span

TableLayout

<TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TableRow> <Button android:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow> <TextView android:text=“Nombre" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" /> <EditText android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow> <TextView android:text=“Apellido" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" /> <EditText android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> </TableLayout>

Ejemplo

Nuevo desde la version 4.0 ICS Soluciona problemas para alinear

componentes Mas simple manejo (Similar a LinearLayout)

GridLayout (4.0>)

Se pueden combinar layouts No tienen que ser solo del mismo tipo Un LinearLayout puede tener FrameLayout

como hijo

Layouts Anidados

<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:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content"> <TextView android:text=“Nombre" android:layout_height="wrap_content" /> <EditText android:width="100px" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content"> <TextView android:text=“Apellido" android:layout_height="wrap_content" /> <EditText android:width="100px" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout>

Ejemplo