La Interfaz de Usuario (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; además he incluido el código que generan cada uno de ellos (para verlo  pinchar en “Mostrar código”).

  • 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. Este layout nos puede servir por ejemplo para mostrar una simple imagen.

Frame Layout

CÓDIGO:

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

Linear Layout Vertical

Linear Layout Horizontal

CÓDIGO (Linear Layout Vertical):

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

Table Layout

En el ejemplo anterior tenemos una tabla compuesta por tres rows (etiqueta TableRow). El número de columnas viene dado por el número máximo de componentes en un row. Por otro lado, el width (ancho) de la columna viene dado por el componente cuyo width sea el máximo en dicha columna.

Para adaptar el contenido de la forma que deseemos y modificar el comportamiento por defecto del TableLayout se nos ofrecen tres atributos que podemos definir en el XML:

  • android:collapseColumns: indica las columnas que pueden ser ocultadas para dejar su espacio a las demás.
  • android:shrinkColumns: indica las columnas que se pueden contraer si otras necesitan más espacio.
  • android:stretchColumns: indica las columnas que se pueden expandir para obtener el espacio libre que queda por la derecha.

Estas tres propiedades pueden afectar a una o varias columnas, por ejemplo: android:stretchColumns=”1,2,3,4″ o incluso con un asterisco “*” para indicar que la propiedad se aplica a todas las columnas.

Por último comentar que además de lo anterior, tenemos la posibilidad de que una de las celdas de un TableRow pueda ocupar el espacio de varias columnas. Esto se indica en el código XML mediante el atributo android:layout_span del componente que deseemos.

CÓDIGO:

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

Relative Layout

En el siguiente ejemplo están marcadas las líneas de código que posicionan los controles de la interfaz con las distintas propiedades.

CÓDIGO:

<?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>

Hasta aquí esta entrada en la que hemos introducido los componentes básicos que debemos conocer para la realización de interfaces en cualquier aplicación, aunque en próximas entradas veremos los Widgets y demás componentes que podemos utilizar. En la próxima entrada ya empezaremos por fin con la realización de la primera aplicación, así pues… hasta la próxima !! ;-)

*Más información de los Layouts en la Documentación de Android.

About these ads

1 comment so far

  1. Bruno on

    Muchas gracias, ahora entiendo mejor el relativelayout


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: