27. Android: interfaz de usuario:

Introducción

Un aplicación Android debe de tener una interfaz de usuairo con la cual el usuario interactua con la aplicación. Vemos a aquí abajo algunos tipos de interfaces:

Los archivos para creación de las interfaces de usuario estan escritos en formato XML, aunque es posible generar nuestra interfaz gráfica (en buena parte) "a golpe de raton" de manera más intuitiva.

El lenguaje XML, es al igual que HTML, un lenguaje de marcado. Es decir, esta compuesto de las llamadas "marcas" o "etiquetas". Este es el aspecto de dos archivos XML.

Un ejemplo de archivo XML de interfaz de usuario en Android podría ser este:

La estructura de un archivo XML, como en HTML, es jerárquica, es decir, hay una marcas dentro de otras. Las marca además contienen atributos como en HTML. En el primero de los ejemplos anteriores, las marcas <Book> tienen un atributo.

A diferencia de HTML, en XML NO hay una serie de marcas predefinidas. Es decir, en HTML las marcas son <table>, <input>, <form>, etc, y si intentamos poner algo distinto a esto, el navegador no entenderá la marca no-HTML.

La API de Android contiene una serie de clases que representan los distintos elementos que puede tener una interfaz de usuario: un texto, un casilla de un formulario, un botón, etc. Todas estas clases derivan de una clase "madre superiora" llamada View. La jerarquia de clases es la siguiente:

Enlace de la imagen anterior para poderla aumentar: http://www.mathematik.uni-marburg.de/~thormae/lectures/graphics1/media/vectorart/android_class_hierarchy_view.svg

Creación de una interfaz de usuario por código Java

Aunque no es lo habitual, debemos de decir que es posible crear una interfaz de usuario a través de código Java. Ejemplo:

Si dentro de nuestro proyecto Android, abrimos el archivo app > java > MainActivity.java que se genera de manera automática cada vez que creamos un proyecto Android, podríamos añadir las siguientes tres lineas que aparecen en verde oscuro:

La primera linea: crea un objeto de la clase TextView. Se puede ver que el constructor de la clase TextView recibe como argumento "this". Ese "this" se esta refiriendo al objeto actual, osea el objeto creado a partir de la clase "MainActivity".

(sin terminar)

Creación de una interfaz de usuario usando XML

Los archivo XML relativos a las interfaces de usuario en Android, se situan en la carpeta "layout" (ruta res > layout).

Cuando creamos un nuevo proyecto Android, se generan una serie de archivos XML por defecto, que son la interfaz de usuario del proyecto. Dependiendo de la plantilla que hayamos elegido durante la configuración del proyecto Android, aparecerán unos archivos u otros dentro de la carpeta "layout" anteriormente mencionada.

Si creamos un proyecto nuevo de tipo "Empty activity", y abrimos la carpeta "layout" veremos que aparece el archivo "activity_main.xml":

Al hacer doble click sobre dicho archivo aparecerá la siguiente interfaz:

En la parte inferior de la anterior imagen, vemos que aparecen dos pestañas:

Estas dos pestañas nos permiten acceder a las dos vistas a través de las cuales, se puede editar un archivo de interfaz de usuario XML.

La primera de las pestañas muestra la vista de "Diseño", para editar nuestro archivo interfaz a golpe de ratón.

La segunda pestaña muestra la vista "Texto", para editar la interfaz de usuario a través de código XML.

Si pulsamos sobre la segunda pestaña aparece lo siguiente:

Veamos a continuación cada una de esas 2 vistas (Diseño y Texto).

La vista Diseño

La vista "Design" (diseño) muestra de manera visual la interfaz de usuario de nuestra aplicación. Las secciones que componen esta vista son:

• El area de visualización
• El arbol de componentes.
• La paleta.

Veamos a continuación cada uno de ellas.

El area de visualización

El area de visualización muestra la previsualización de nuestra interfaz de usuario. También es posible hacer zoom sobre ella (tecla Ctrl + rueda de "scroll"), redimensionarlar clicando y arrastrando sobre las dos lineas diagonales que aparecen en la parte inferior derecha, o clicar sobre los elementos que la componen. Por ejemplo, si clicamos sobre la frase "Hello world!" que aparece en el centro de la interfaz, aparecerá un panel de propiedades en la parte derecha:

Desde este panel podemos modificar las propiedades del elemento que hemos selecccionado, en este caso un elemento de tipo "TextView".

Arbol de componentes (component tree)

El arbol de componentes, nos permite visualizar los elementos que forman la interfaz de manera jerárquica, tal y como está también escrito el código XML de la vista "Text", o sea jerarquicamente.

La paleta (pallete)

En la paleta encontramos los distintos elementos, que podremos añadir a nuestra interfaz de usuario. Como puede verse está divida en dos secciones: en la parte izquierda encontramos las categorías de elementos y la derecha se muestran los distintos elementos de cada categoría. Por defecto, la categoría elegida es "All", de manera que en la parte derecha se mostrarán todos los elementos de todas las categorías.

Si clicamos sobre las categorías aparecerán a la derecha los elementos propios de cada una de ellas:

Añadir elementos a la interfaz de usuario

Para añadir un elemento en nuestra interfaz de usuario hay tres métodos:

Método 1: clicar sobre un elemento de la paleta y arrastrarlo sobre el area de visualización.

Método 2: clicar sobre un elemento de la paleta y arrastrarlo sobre el arbol de componentes.

Método 3: el tercer método consiste en añadir de "puño y letra" el elemento a través de la vista "Text", pero no es el más recomendable...

Los cambios realizados en la vista "Design" se reflejan en la vista "Text"

Probemos a añadir un nuevo elemento sobre el area de visualización o sobre el arbol de componentes, simplemente arrastrándolo y soltándolo, y acudimos a la vista "Text", veremos que el nuevo elemento se ha añadido también en el código XML. Por ejemplo, si añadimos un elemento "Checbox", quedará representado en estos tres sitios:

 

Cambiar la posición de los elementos

Hay 3 métodos para cambiar los elementos de posición:

Método 1: desde el area de visualización se puede cambiar la posición en la interfaz de usuario. Es un cambio en las coordenadas XY.


Método 2: desde el arbol de componentes es posible modificar el orden de los elementos, pinchando, arrastrándolos y soltándolos hasta la nueva posició. Este tipo de cambio nos posibilita cambiar el elemento en la jerarquía de elementos.

Método 3: desde la vista "Text" es posible modificar el orden de los elementos, seleccionando, cortando y pegando hasta la nueva posición. Este tipo de cambio nos posibilita cambiar el elemento en la jerarquía de elementos.

Eliminar elementos de la interfaz de usuario

Hay 3 métodos para eliminar los elementos de un interfaz:

Método 1: desde el area de visualización de la vista "Design", haciendo "clic" con el el botón derecho del ratón sobre el elemento, y seleccionando "Delete".

Método 2:  desde el arbol de componentes de la vista "Design", haciendo "clic" con el el botón derecho del ratón sobre el elemento, y seleccionando "Delete".

Método 3:  desde la vista "Texto", eliminado el código XML correspondiente al elemento.

ATENCIÓN: Mientras estamos en la vista "Diseño" es posible deshacer los cambios a través de Ctrl+z o a través de "Edit > Undo", del mismo modo que si estuviesemos en la vista "Text".


Ejercicio: añadir los distintos elementos que aparecen en las distintas categorías de las dos manera posibles: 1. directamente sobre el area de visualización. 2. directamente sobre el arbol de componentes.