La Interfaz de Usuario Android (I) – Layouts

Implementando la interfaz de usuario Las interfaces de usuario en Android se pueden implementar de varias formas. Una de ellas es definirla en la propia clase de la actividad, aunque esta forma, a parte de ser poco elegante y poco estructurada, no proporciona una diferenciación clara entre el propio código de la aplicación y el de la interfaz. Por lo que la forma más recomendada y la que utilizaremos para la implementación de interfaces será mediante XML. Estas interfaces se construyen a traves de controles llamados Views que serán el punto de interacción con el usuario. Los Views son la clase base para la creación de widgets como por ejemplo botones, campos de texto, checkbox, etc. Por otro lado tenemos la clase ViewGroup que son contenedores de Views o incluso de otros ViewGroup como muestra la siguiente imagen.   Tipos de Layouts Los Layout son objetos derivados de la clase ViewGroup y determinan la posición que tendrán los Views en la pantalla. A continuación puedes ver los Layouts que nos proporciona Android: Frame Layout   Este es el layout más simple, consiste en un marco que ocupa toda la pantalla. Los Views hijos que queramos agregar se posicionarán en la esquina superior izquierda por lo que, si añadimos varios de ellos, algunos quedarán ocultos sobre otros.     <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent">        <ImageView android:id="@+id/imageView1"               android:src="@drawable/and_logo"               android:layout_width="fill_parent"               android:layout_height="fill_parent"/> </FrameLayout> Linear Layout Este es el layout que se nos ofrece por defecto. Los Views hijos serán alineados de forma lineal uno trás de otro, ya sea horizontal o verticalmente, según especifiquemos en el atributo orientation en el fichero XML. Además podemos modificar otros atributos para organizar los Views como por ejemplo sus margenes, gravedad, etc.   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent" android:orientation="vertical">        <Button android:text="Button"               android:id="@+id/button1"               android:layout_height="wrap_content"               android:layout_width="fill_parent"/>        <Button android:text="Button"               android:id="@+id/button2" android:layout_height="wrap_content"               android:layout_width="fill_parent"/>        <Button android:text="Button"               android:id="@+id/button3"               android:layout_height="wrap_content"               android:layout_width="fill_parent"/> </LinearLayout> Table Layout  En este layout los hijos son posicionados en filas y columnas exactamente de la misma forma que una tabla. Algunas de las celdas pueden estar vacías, contener Views o incluso ViewGroups. <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:stretchColumns="1">        <TableRow>               <TextView android:text="Usuario:"/>               <EditText android:id="@+id/editText2"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:text="EditText"/>        </TableRow>        <TableRow>               <TextView android:id="@+id/textView1"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:text="Contraseña:"/>               <EditText android:text="EditText"                      android:id="@+id/editText1"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:password="true"/>        </TableRow>        <TableRow>               <Button android:id="@+id/button1"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_span="2"                      android:text="Login"/>        </TableRow> </TableLayout> Relative Layout  En este tipo de layouts tenemos varias propiedades para posicionar cada control en la pantalla con respecto a su View padre o a otro de los Views que tengamos en la interfaz. Los elementos serán visualizados en el orden dado, de esta forma si el primero de ellos está centrado en la pantalla, los elementos siguientes estarán alineados con respecto al centro de la pantalla. <?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/textView01"               android:layout_width="fill_parent"               android:layout_height="wrap_content"               android:text="Introduce tu nombre:"/>        <EditText android:id="@+id/edit01"               android:layout_width="fill_parent"               android:layout_height="wrap_content"               android:layout_below="@id/textView01"/>        <Button android:id="@+id/aceptar"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:layout_below="@id/edit01"               android:layout_alignParentRight="true"               android:layout_marginLeft="10dip"               android:text="Aceptar" />        <Button android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:layout_toLeftOf="@id/aceptar"               android:layout_alignTop="@id/aceptar"               android:text="Cancelar" /> </RelativeLayout>