Curso de Programacion Android

1. Layout
Guido Ticona Hurtado
guidoti@gmail.com

2.  Es una forma de organizar los items en la
pantalla
 Heredan de la clase ViewGroup, que hereda
de View

3.  AbsoluteLayout
 FrameLayout
 LinearLayout
 RelativeLayout
 TableLayout

4.  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

5.  <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>

6.  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

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

8.  Organiza secuencialmente
 Puede ser horizontal o Vertical usando
android:orientation
 No se puede colocar en cualquier posicion

9.  <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>

10.  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

11.  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

12.  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

13.  <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>

14.  Nuevo desde la version 4.0 ICS
 Soluciona problemas para alinear
componentes
 Mas simple manejo (Similar a LinearLayout)

15.  Se pueden combinar layouts
 No tienen que ser solo del mismo tipo
 Un LinearLayout puede tener FrameLayout
como hijo

16.  <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>