Mensajes emergentes

Utilizaremos un mensaje emergente Toast para informar brevemente al usuario sobre el estado de una determinada operación. Por ejemplo, cuando creamos un nuevo correo electrónico y lo abandonamos sin haberlo enviado, el sistema nos mostrará un mensaje emergente en el que se nos comunica que será guardado como borrador y que podremos recuperarlo con posterioridad. Los mensajes de este tipo se muestran durante un breve espacio de tiempo.

Si por alguna razón necesitamos que el usuario sea capaz de realizar algún tipo de acción adicional como respuesta al mensaje, utilizaremos una notificación Notify en su lugar.

Listas desplegables

Una lista desplegable nos ofrece una manera rápida de seleccionar una opción dentro de un conjunto de opciones. Una lista desplegable muestra por defecto la opción actualmente seleccionada. Cada vez que pulsamos sobre una lista desplegable, se nos mostrará un menú con todas las opciones disponibles desde el que podremos realizar una nueva selección.

Para añadir una lista desplegable a nuestra plantilla XML, utilizaremos un elemento Spinner. Por ejemplo:

<Spinner
    android:id="@+id/planets_spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

Para añadir las opciones a la lista desplegable utilizaremos un un adaptador SpinnerAdapter desde una actividad o fragmento.

Botones de estado

Un botón de estado puede tomar dos valores posibles: activo o inactivo. Podemos añadir botón de estado estándar a nuestra plantilla con el elemento ToggleButton. A partir de la versión 4.0 de Android contamos con un nuevo tipo de botón de estado Switch con control deslizante.

Botón de estado estándar.

Botón de estado con control deslizante (Android 4.0+).

ToggleButton y Switch son subclases de la clase CompoundButton por lo que funcionan de manera similar.

Botones radiales

Los botones radiales permiten al usuario seleccionar una opción de un conjunto de opciones mutuamente excluyentes.

Utilizaremos el elemento RadioButton para añadir un botón radial a nuestra plantilla. Además, tendremos que definir los botones dentro de un elemento RadioGroup si queremos que la selección sea excluyente.

Casillas de verificación

Las casillas de verificación permiten al usuario hacer una selección múltiple dentro de un conjunto de opciones. Lo normal es que las opciones se muestren distribuidas de manera vertical:

Para crear una casilla de verificación utilizaremos un elemento CheckBox en nuestra plantilla. Debido a que el usuario puede seleccionar varias opciones, cada casilla de verificación será tratada de manera independiente y cada una recibirá sus propios eventos.

Campos de texto

Los campos de texto permiten al usuario introducir texto en una o varias líneas. Cada vez que pulsamos sobre un campo de texto nos aparecerá un teclado virtual que nos permitirá escribir a partir de un cursor de escritura. También nos ofrece la posibilidad de seleccionar parte del texto (para copiar, pegar o cortar) y funciones de autocompletado.

Para añadir un campo de texto a nuestra plantilla usaremos un elemento EditText.

Botones

Un botón es una zona rectangular que puede contener un texto, un icono o un texto más un icono y que cuando es pulsado realiza una acción.

Para crear los botones de la imagen anterior en nuestra plantilla, procederemos de la siguiente manera:

• Si queremos mostrar texto, utilizaremos la clase Button:
  

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/button_text"
      ... />
  

• Si queremos mostrar un icono, utilizaremos la clase ImageButton:
  

  <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/button_icon"
      ... />
  

• Si queremos mostrar un texto y un icono, utilizaremos la clase Button y el atributo android:drawableLeft:
  

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/button_text"
      android:drawableLeft="@drawable/button_icon"
      ... />
  

Controles de entrada de datos

Los controles para la entrada de datos son componentes de la interfaz de usuario con los que se puede interactuar. Android nos proporciona un juego de controles de este tipo que podremos utilizar de manera fácil en nuestros diseños: botones, campos de texto, barras de ajuste, casillas de verificación, botones de zoom, botones de estado y muchos más.

Vistas de tipo cuadrícula

Una vista de tipo GridView es una vista de grupo que muestra sus elementos distribuidos en una cuadrícula permitiendo desplazamiento de pantalla. Los elementos se pueden añadir automáticamente a la plantilla usando un adaptador de tipo ListAdapter.

Vistas de tipo lista

Una vista de tipo ListView es una vista de grupo que muestra un listado de elementos permitiendo desplazamiento de pantalla. Los elementos se añaden y se actualizan de manera automática a la lista a través de un adaptador Adapter. El adaptador se encargará de construir la vista para cada elemento y añadirla a la lista. Para ello, el adaptador utilizará una fuente de datos (un array o el cursor resultado de una consulta, por ejemplo) y de una plantilla auxiliar.

Plantillas con distribución relativa

Una plantilla RelativeLayout es una vista de grupo que muestra a sus vistas hija con posicionamiento relativo. El posicionamiento de una vista se especifica en función de otra vista (a la izquierda de o debajo de otra vista, por ejemplo) o en función del área descrita por la plantilla (alineada a la izquierda o al centro, por ejemplo).

Una plantilla con posicionamiento relativo nos proporciona una estructura plana, es decir, no existen vistas de grupo anidadas por lo que hay una mejora notable en el rendimiento. Estas plantillas son una buena alternativa al uso de vistas LinearLayout anidadas.

Plantillas con distribución lineal

Una plantilla LinearLayout es una vista de grupo donde todas sus vistas hija se alinean en una sola dirección: horizontal o vertical. Utilizaremos el atributo android:orientation para especificar la orientación de su contenido.

En este tipo de plantillas, las vistas hija son apiladas unas tras otras. Es decir,  si la orientación es vertical, habrá varias filas, una por cada vista hija, apiladas en una sola columna, y si la orientación es horizontal, tendremos varias columnas, una por cada vista hija, apiladas en una sola fila. Una plantilla LinearLayout respetará los márgenes (android:layout_marginLeft, android:layout_marginRight, etc) y las alineaciones (android:layout_gravity) de sus vistas hija con respecto a su vista padre.

Plantillas

Una plantilla nos permite definir el diseño de la interfaz de usuario de una actividad o de un widget de aplicación. La declaración de una plantilla se puede hacer de dos formas:

• Desde un archivo XML. Android nos proporciona de un sencillo espacio de nombres XML basado en clases del entorno de trabajo.
• Desde el código en tiempo de ejecución. Podríamos crear las vistas necesarias, definir sus dependencias y especificar sus propiedades desde el código si fuera necesario.

Interfaz de usuario, conceptos básicos

La interfaz de usuario de una aplicación es la parte que el usuario puede ver y con la que puede interactuar. Android nos proporciona una serie de contenedores y controles que podremos combinar para construir nuestra interfaz de usuario. Android también cuenta con un juego de componentes comunes a toda interfaz y que podremos utilizar en nuestros diseños: mensajes emergentes, cuadros de diálogo, menús, etc.

Todos los elementos que forman la interfaz de usuario de una aplicación están formados por objetos de tipo View (vista) y ViewGroup (vista de grupo). Un objeto de tipo View es un objeto que se muestra en pantalla y con el que el usuario puede interactuar. Un objeto de tipo ViewGroup es un objeto sin representación que puede contener otros objetos de tipo View o ViewGroup y que nos servirán para organizar nuestras plantillas.

Android nos proporciona una amplia variedad de vistas: botones, campos de texto, vistas de grupo con distribución lineal o relativa, etc.