domingo, 9 de noviembre de 2014

Action Bar en Android : Funcionamiento básico



La action bar de Android es la barra de título y herramientas que aparece en la parte superior de muchas aplicaciones actuales. Normalmente muestra un icono, el título de la actividad en la que nos encontramos, una serie de botones de acción, y un menú desplegable (menú de overflow) donde se incluyen más acciones que no tienen espacio para mostrarse como botón o simplemente no se quieren mostrar como tal.


La action bar de Android es uno de esos componentes que Google no ha tratado demasiado bien al no incluirla en la librería de compatibilidad android-support. Esto significa que de forma nativa tan sólo es compatible con versiones de Android 3.0 o superiores. En este apartado nos centraremos únicamente en esta versión nativa de la plataforma (configuraremos nuestra aplicación de ejemplo para ejecutarse sobre Android 4).

Tan sólo a modo de referencia diré que existe una librería muy popular llamada ActionBarSherlock que proporciona una implementación alternativa de este componente que es compatible con versiónes de Android a partir de la 2.0. Otra alternativa para compatibilizar nuestras aplicaciones con versiones de Android anteriores a la 3.0 sería utilizar la implementación que Google proporciona como parte de los ejemplos de la plataforma, llamada ActionBarCompat, que puedes encontrar en la siguiente carpeta de tu instalación del SDK: <carpeta-sdk>\samples\android-nn\ActionBarCompat

Cuando se crea un proyecto con alguna de las últimas versiones del plugin ADT para Eclipse, la aplicación creada por defecto ya incluye "de serie" su action bar correspondiente. De hecho, si creamos un proyecto nuevo y directamente lo ejecutamos sobre un AVD con Android 3.0 o superior veremos como no solo se incluye la action bar sino que también aparece una acción "Settings" como muestra la siguiente imagen.


Vale, ¿pero donde está todo esto definido en nuestro proyecto? La action bar de Android toma su contenido de varios sitios diferentes. En primer lugar muestra el icono de la aplicación (definido en el AndroidManifest mediante el atributo android:icon del elemento <application>) y el título de la actividad actual (definido en el AndroidManifest mediante el atributo android:label de cada elemento <activity>). El resto de elementos se definen de la misma forma que los "antiguos" menús de aplicación que se utilizaban en versiones de Android 2.x e inferiores. De hecho, es exactamente la misma implementación. Nosotros definiremos un menú, y si la aplicación se ejecuta sobre Android 2.x las acciones se mostrarán como elementos del menú como tal (ya que la action bar no se verá al no ser compatible) y si se ejecuta sobre Android 3.0 o superior aparecerán como acciones de la action bar, ya sea en forma de botón de acción o incluidas en el menú de overflow. En definitiva, una bonita forma de mantener cierta compatibilidad con versiones anteriores de Android, aunque en unas ocasiones se muestre la action bar y en otras no.

Y bien, ¿cómo se define un menú de aplicación? Pues en el curso hay un capítulo dedicado exclusivamente a ello donde poder profundizar, pero de cualquier forma, en este apartado daré las directrices generales para definir uno sin mucha dificultad.

Un menú se define, como la mayoría de los recursos de Android, mediante un fichero XML, y se colocará en la carpeta /res/menu. El menú se definirá mediante un elemento raiz <menu> y contendrá una serie de elementos <item> que representarán cada una de las opciones. Los elementos <item> por su parte podrán incluir varios atributos que lo definan, entre los que destacan los siguientes:

android:id. El ID identificativo del elemento, con el que podremos hacer referencia dicha opción.
android:title. El texto que se visualizará para la opción.
android:icon. El icono asociado a la acción.
android:showAsAction. Si se está mostrando una action bar, este atributo indica si la opción
de menú se mostrará como botón de acción o como parte del menú de overflow. Puede tomar varios
valores:
            o ifRoom. Se mostrará como botón de acción sólo si hay espacio disponible.
            o withText. Se mostrará el texto de la opción junto al icono en el caso de que éste se esté
            mostrando como botón de acción.
            o never. La opción siempre se mostrará como parte del menú de overflow.
            o always. La opción siempre se mostrará como botón de acción. Este valor puede provocar
            que los elementos se solapen si no hay espacio suficiente para ellos.

Así, por ejemplo, si abrimos el menú definido por defecto en el proyecto nuevo (llamado normalmente / res/menu/activity_main.xml si no lo hemos cambiado de nombre durante la creación del proyecto) veremos el siguiente código:


Como vemos se define un menú con una única opción, con el texto "Settings" y con el atributo showAsAction="never" de forma que ésta siempre aparezca en el menú de overflow.

Esta opción por defecto se incluye solo a modo de ejemplo, por lo que podríamos eliminarla sin problemas para incluir las nuestras propias. En mi caso la voy a conservar pero voy a añadir dos más de ejemplo: "Save" y "New", la primera de ellas para que se muestre, si hay espacio, como botón con su icono correspondiente, y la segunda igual pero además acompañada de su título de acción:


Como podéis ver en la segunda opción, se pueden combinar varios valores de showAsAction utilizando el caracter "|".

Una vez definido el menú en su fichero XML correspondiente tan sólo queda asociarlo a nuestra actividad principal. Esto se realiza sobrescribiendo el método OnCreateOptionsMenu() de la actividad, dentro del cual lo único que tenemos que hacer normalmente es inflar el menú llamando al método inflate() pasándole como parámetros el ID del fichero XML donde se ha definido. Este trabajo suele venir hecho ya al crear un proyecto nuevo desde Eclipse:


Ejecutemos la aplicación ahora a ver qué ocurre.


Como podemos observar, la opción "Settings" sigue estando dentro del menú de overflow, y ahora aparecen como botones de acción las dos opciones que hemos marcado como showAsAction="ifRoom", pero para la segunda no aparece el texto. ¿Y por qué? Porque no hay espacio disponible con la pantalla en vertical.
Pero si rotamos el emulador para ver qué ocurre con la pantalla en horizontal (pulsando Ctrl + F12) vemos lo siguiente:


Con la pantalla en horizontal sí se muestra el texto de la segunda opción, tal como habíamos solicitado con el valor withText del atributo showAsAction.

Ahora que ya sabemos definir los elementos de nuestra action bar queda saber cómo responder a las pulsaciones que haga el usuario sobre ellos. Para esto, al igual que se hace con los menús tradicionales (ver capítulo sobre menús para más detalles), sobrescribiremos el método OnOptionsItemSelected(), donde consultaremos la opción de menú que se ha pulsado mediante el método getItemId() de la opción de menú recibida como parámetro y actuaremos en consecuencia. En mi caso de ejemplo tan sólo escribiré un mensaje al log.


Si ejecutamos ahora la aplicación y miramos el log mientras pulsamos las distintas opciones de la action bar veremos como se muestran los mensajes definidos.

Y bien, esto es todo lo que habría que contar a nivel básico sobre la action bar, si no fuera porque los chicos de Android pensaron que también sería interesante "integrar" con ella de alguna forma la barra de pestañas, en caso de utilizarse este tipo de interfaz en la aplicación. Para no alargar demasiado este apartado, de momento pararemos aquí y dedicaré una segunda parte a este tema.



Saludos compañeros, aprovechen la información.








No hay comentarios:

Publicar un comentario en la entrada