Google Developers: Opciones de Menú en Android… Desmitificando

Local blog for Spanish speaking developers in LATAM

Opciones de Menú en Android… Desmitificando

lunes, 4 de octubre de 2010

En este artículo vamos a trabajar con las opciones de menú que nos provee Android, y de esta manera configurar opciones y asociar acciones a las que nuestra aplicación pueda responder.

Para continuar con este ejercicio deberemos tener instalado:

Eclipse Helios Release
SDK Android 2.2

En primer lugar debemos comprender la arquitectura y comportamientos que implementa Android para soportar un menú de opciones, en este artículo desarrollaremos únicamente un nivel básico de interacción de manera de llegar a una rápida implementación del objetivo.

En la siguiente gráfica identificaremos los componentes esenciales que conforman la arquitectura de menús en Android.

Fig.1 – Arquitectura de menú de Android

En la Fig.1 se observa la representación de una Activity, cada Activity está asociada a un objeto de menú y este último posee elementos de MenuItem y SubMenu.

Las clases claves a trabajar son:

Android.view.Menu.
Android.view.MenuItem.
Android.view.SubMenu.

En este artículo el objetivo es crear opciones de menú simple y recrear un comportamiento elemental con estas opciones, no vamos a trabajar ni con agrupamientos de menú, orden ni submenús.

Vamos a la creación del ejemplo.

La práctica consiste en colocar un TextView en el layout y generar un menú con dos opciones: una que al ser pulsada escriba un texto en el TextView y otra que lo limpie.

Fig. 2 – Proyecto Android en Blanco

La Fig.2 muestra la generación de un proyecto Android simple con el nombre de “apMenuPractica1”, en él solo se tiene el esqueleto básico que provee la plantilla de Eclipse.

Vamos a insertar el TextView, que luego va a ser modificado por las acciones de menú, para ello trabajaremos sobre el archivo de layout principal “main.xml”.

Fig.3 – Layout del Proyecto

En la Fig.3 se muestra el diseño de la interfaz muy simple donde tenemos que tener en cuenta el “id” del control y su referencia a nombre “nota”.

Veamos como generamos las opciones de menú.

Como vemos en código debemos implementar dos métodos importantes para generar el comportamiento deseado:

onCreateOptionsMenu
onOptionsItemSelected

Fig.4 – Método onCreateOptionsMenu

La Fig.4 muestra la implementación del método “onCreateOptionsMenu”, en él se incorporan 2 opciones de menú, Agregar y Limpiar.

Estas operaciones generan un menú pero aun no respondes a ninguna acción, para ello deberemos implementar el método “onOptionsItemSelected”.

Fig.5 – Método onOptionsItemSelected

En la Fig.5 se puede observar la implementación del método que reacciona al pulsar las opciones de menú antes agregadas. Esta implementación determina el Id del ítem de menú que ha sido seleccionado y toma una acción sobre el texto del control identificado como “nota”.

Finalmente nuestra aplicación se ve de esta manera: