Menús en Android (1ra Parte)

En este artículo vamos a hablar sobre los menús en Android, un recurso importante para nuestras aplicaciones cuando queremos mostrar opciones secundarias o queremos simplificar espacio dentro de la vista. En Android existen tres tipos diferentes de menús:

· Menús principales: De estos decir que son los más habituales, aparece cuando se oprime el botón menú del dispositivo en la parte inferior del mismo.

· Submenús: Son usados para mostrar opciones secundarias y se pueden mostrar al pulsar una opción del menú principal.

· Menús Contextuales: Aparece cuando se hace una pulsación larga sobre algún elemento de la vista de la aplicación.

En este artículo hablaremos sobre el primer tipo de menú y dejaremos los otros tipos de menú para próximos artículos.

Los menús los podemos implementar de dos formas en nuestra aplicación, una mediante la definición en un fichero XML y la segunda mediante código. En este artículo abordaremos la primera por ser la que más utilizo por su rápida implementación.

Para entender el tema de los menús pues nada mejor que llevarlo a la práctica y para esto le pondremos unos menús a la app que comenzamos en los artículos anteriores.

Para diseñar un menú es necesario crear el fichero menú.xml en la carpeta res / menú. En nuestra app pondremos un menú con tres opciones, por lo que el diseño quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/Menu1" android:title="Opción 1" 
	      android:icon="@drawable/tag"></item>
	<item android:id="@+id/Menu2" android:title="Opción 2"
	      android:icon="@drawable/filter"></item>
	<item android:id="@+id/Menu3" android:title="Opción 3"
	      android:icon="@drawable/chart"></item>
</menu>

Este XML se compone de un elemento principal <menu> que contiene tantos elementos <item> como opciones queramos ponerle a nuestro menú. Destacar que los elementos <item> tiene propiedades como el id, el título y el icono. Podemos observar que nuestro XML tiene un detalle y es que los títulos están puestos directamente, algo que vimos que no era aconsejable, para esto creamos los Strings de las opciones y lo referenciamos en el XML por lo que quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/MenuPrincipal"  
            android:title="@string/texto_opcion1_menu" 
	      android:icon="@drawable/tag"></item>
	<item android:id="@+id/Menu2" 
            android:title="@string/texto_opcion2_menu"
	      android:icon="@drawable/filter"></item>
	<item android:id="@+id/Menu3" 
            android:title="@string/texto_opcion3_menu"
	      android:icon="@drawable/chart"></item>
</menu>

Ahora tenemos que implementar el evento onCreateOptionsMenu() del activity que queremos que muestre el menú. En este evento vamos a “inflar” el menú. Primero obtendremos una referencia al inflater mediante el método getMenuInflater() y posteriormente generamos la estructura del menú llamando a su método inflate() pasándole como parámetro el ID del menú definido en el XML que en nuestro caso será R.menu.menu. Por último devolveremos el valor true para confirmar que debe mostrarse el menú.

Ahora solos nos queda implementar cada una de las opciones del menú. Esto se hará incluyendo el evento onOptionsItemSelected() del activity que mostrará el menú. Este evento recibe como parámetro el ítem que fue pulsado, cuyo ID podemos recuperar con el método getItemId(). Con el ID podemos saber qué opción ha sido pulsada y ejecutar lo que queramos. Por ahora lo único que haremos es mostrar un mensaje.

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
	    switch (item.getItemId()) {
	        case R.id.Menu1:
	            Toast.makeText(this, "Opcion 1 pulsada!",
                  Toast.LENGTH_LONG).show();
	            return true;
	        case R.id.Menu2:
	        	Toast.makeText(this, "Opcion 2 pulsada!", 
                  Toast.LENGTH_LONG).show();
	            return true;
	        case R.id.Menu3:
	        	Toast.makeText(this, "Opcion 3 pulsada!", 
                  Toast.LENGTH_LONG).show();
	            return true;
	        default:
	            return super.onOptionsItemSelected(item);
	    }
    }

De este código solo comentar como se muestra el mensaje y es utilizando la clase Toast, el mismo tiene el método makeText para indicar el texto que se mostrará en el mensaje y luego usamos el método show() para que se muestre en nuestro activity. De las notificaciones hablaremos en próximos artículos.