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.

La plantilla de la interfaz de usuario.

La interfaz de usuario para un componente de nuestra aplicación viene definida por la jerarquía entre los objetos de tipo View y ViewGroup que forman la plantilla (ver figura 1). Cada vista de grupo tiene como objetivo el organizar sus vistas contenidas. Las vistas contenidas serán los controles de entrada o cualesquiera otros widgets mostrados en la interfaz de usuario. Es recomendable mantener un diseño sencillo y fácil de mantener, aunque siempre podremos hacerlo tan complejo como nos sea necesario.

Imagen 1. Relación jerárquica entre las vistas de una plantilla.

Una posible estructura XML para el árbol de la imagen 1 sería:

<ViewGroup ... >
    <ViewGroup ... >
        <View ... />
        <View ... />
        <View ... />
    </ViewGroup>
    <View ... />
    <View ... />
</ViewGroup>

Para construir la plantilla de nuestra interfaz, podríamos empezar a crear los objetos de tipo View necesarios desde nuestro código fuente y establecer sus relaciones de dependencia en tiempo de ejecución. Sin embargo, en la mayoría de los casos, los elementos que forman nuestra interfaz podrán ser determinados de manera estática y podremos definir su contenido a través de archivos XML. XML es un lenguaje basado en etiquetas similar al HTML.

Las etiquetas utilizadas para los elementos XML de una plantilla, se corresponden con clases de nuestro entorno de trabajo. Por ejemplo, el elemento <TextView> hace referencia a un objeto de tipo TextView y <LinearLayout> hace referencia a objeto de tipo LinearLayout.

En el siguiente ejemplo se construye una plantilla con una vista de grupo LinearLayout conteniendo un texto TextView y un botón Button distribuidos verticalmente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I am a Button" />
</LinearLayout>

Cada vez que cargamos una plantilla desde nuestra aplicación, Android crea un objeto por cada uno de sus elementos XML. Podremos acceder a cada uno de estos objetos para añadirles comportamiento, consultar su estado o modificar su aspecto.

Componentes de la interfaz de usuario.

No tenemos por qué construir todos los elementos de nuestra interfaz a través de elementos de tipo View o ViewGroup. Android nos da la posibilidad de utilizar ciertos componentes ya predefinidos como la barra de acción, cuadros de diálogo, la barra de estado, menús contextuales, mensajes emergentes, etc.