Jesus Tomás Gironés - El gran libro de Android

Notas al pie

1http://www.openhandsetalliance.com

2http://developer.android.com/tools/support-library

3https://developer.android.com/tools/support-library/setup.html

4Datos obtenidos en junio de 2014, según se muestra en la figura 3.

5Recomendamos: Piensa en Java, de Bruce Eckel, Ed.Prentice Hall.

6Tutorial web: http://www.androidcurso.com/index.php/24 y http://www.androidcurso.com/index.php/25

7Tutorial web: http://www.androidcurso.com/index.php/32

8http://es.wikipedia.org/wiki/Tiempo_Unix

9Tutorial web: http://www.androidcurso.com/index.php/29

10Tutorial web: http://www.androidcurso.com/index.php/31

11Tutorial web: http://www.androidcurso.com/index.php/461

12Tutorial web: http://www.androidcurso.com/index.php/462

El diseño de la interfaz de usuario cobra cada día más importancia en el desarrollo de una aplicación. La calidad de la interfaz de usuario puede ser uno de los factores que conduzca al éxito o al fracaso de todo el proyecto.

Si has realizado alguna aplicación utilizando otras plataformas, advertirás que el diseño de la interfaz de usuario en Android sigue una filosofía muy diferente. En Android la interfaz de usuario no se diseña en código, sino utilizando un lenguaje de marcado en XML similar al HTML.

A lo largo de este capítulo mostraremos una serie de ejemplos que te permitirán entender el diseño de la interfaz de usuario en Android. Aunque no será la forma habitual de trabajar, comenzaremos creando la interfaz de usuario mediante código. De esta forma comprobaremos que cada uno de los elementos de la interfaz de usuario (las vistas) realmente son objetos Java. Continuaremos mostrando cómo se define la interfaz de usuario utilizando código XML. Pasaremos luego a ver las herramientas de diseño integradas en Eclipse. Se describirá el uso de layouts, que nos permitirá una correcta organización de las vistas, y el uso de recursos alternativos nos permitirá adaptar nuestra interfaz a diferentes circunstancias y tipos de dispositivos.

En este capítulo también comenzaremos creando la aplicación de ejemplo desarrollada a lo largo del curso, Asteroides. Crearemos la actividad principal, donde simplemente mostraremos cuatro botones, con los que se podrán arrancar diferentes actividades A continuación aprenderemos a crear estilos y temas y los aplicaremos a estas actividades. Para terminar el capítulo propondremos varias prácticas para aprender a utilizar diferentes tipos de vistas y layouts.

Objetivos:

•Entender cómo se realiza el diseño de la interfaz de usuario en una aplicación Android.

•Aprender a trabajar con vistas y mostrar sus atributos más importantes.

•Enumerar los tipos de layouts que nos permitirán organizar las vistas.

•Mostrar cómo se utilizan los recursos alternativos.

•Aprender a crear estilos y temas para personalizar nuestras aplicaciones.

•Mostrar cómo interactuar con las vistas desde el código Java.

•Describir el uso de layouts basados en pestañas (tabs).

Veamos un primer ejemplo de cómo crear una interfaz de usuario utilizando exclusivamente código Java. Aunque esta no es la forma recomendable de trabajar con Android, resulta interesante para resaltar algunos conceptos.

Ejercicio: Creación de la interfaz de usuario por código

1.Abre el proyecto HolaMundo creado en el capítulo anterior y visualiza MainActivity.java.

2.Comenta la última sentencia del método onCreate() y añade las tres que se muestran a continuación en negrita:

Nota sobre Java: para poder utilizar el objeto TextView has de importar un nuevo paquete. Para ello añade al principio import android.widget.TextView. Otra alternativa es pulsar Ctrl-Shift-O, para que se añadan automáticamente los paquetes que faltan.

La interfaz de usuario de Android está basada en una jerarquía de clases descendientes de la clase View (vista). Una vista es un objeto que se puede dibujar y se utiliza como un elemento en el diseño de la interfaz de usuario (un botón, una imagen, una etiqueta de texto como la que se ha utilizado en el ejemplo, etc.). Cada uno de estos elementos se define como una subclase de la clase View; la subclase para representar un texto es TextView.

El ejemplo comienza creando un objeto de la clase TextView. El constructor de la clase acepta como parámetro una instancia de la clase Context (contexto). Un contexto es un manejador del sistema que proporciona servicios como la resolución de recursos, la obtención de acceso a bases de datos o las preferencias. La clase Activity es una subclase de Context, y como la clase MainActivity es una subclase de Activity, también es de tipo Context. Por ello, puedes pasar this (el objeto actual de la clase MainActivity) como contexto del TextView.

3.Después se define el texto que se visualizará en el TextView mediante setText(). Finalmente, mediante setContentView() se indica la vista que visualizará la actividad.

4.Ejecuta el proyecto para verificar que funciona.

En el ejemplo anterior hemos creado la interfaz de usuario directamente en el código. A veces puede ser muy complicado programar interfaces de usuario, ya que pequeños cambios en el diseño pueden corresponder a complicadas modificaciones en el código. Un principio importante en el diseño de software es que conviene separar todo lo posible el diseño, los datos y la lógica de la aplicación.

Android proporciona una alternativa para el diseño de interfaces de usuario: los ficheros de diseño basados en XML. Veamos uno de estos ficheros. Para ello accede al fichero res/layout/activity_main.xml de nuestro proyecto. Se muestra a continuación. Este layout o fichero de diseño proporciona un resultado similar al del ejemplo de diseño por código anterior:

NOTA: cuando haces doble clic en el Package Explorer sobre activity_main.xml, probablemente lo abra en modo Graphical Layout. Para verlo en modo texto, selecciona la pestaña activity_main.xml.

Resulta sencillo interpretar su significado. Se introduce un elemento de tipo RelativeLayout, cuya función, como se estudiará más adelante, es contener otros elementos de tipo View. Este RelativeLayout tiene cinco atributos. Los dos primeros, xmlns:android y xmlns:tools, son declaraciones de espacios de nombres de XML que utilizaremos en este fichero (solo es necesario especificar este tipo de parámetro en el primer elemento). Los dos siguientes permiten definir la anchura y altura de la vista. En el ejemplo se ocupará todo el espacio disponible. El último atributo indica la actividad asociada a este layout.