Home Android Menús en Android (III): Opciones avanzadas

Menús en Android (III): Opciones avanzadas

by sgoliver

En los artículos anteriores del curso ya hemos visto cómo crear menús básicos para nuestras aplicaciones, tanto menús principales como de tipo contextual. Sin embargo, se nos quedaron en el tintero un par de temas que también nos pueden ser necesarios o interesantes a la hora de desarrollar una aplicación. Por un lado veremos los grupos de opciones, y por otro la actualización dinámica de un menú según determinadas condiciones.

Los grupos de opciones son un mecanismo que nos permite agrupar varios elementos de un menú de forma que podamos aplicarles ciertas acciones o asignarles determinadas características o funcionalidades de forma conjunta. De esta forma, podremos por ejemplo habilitar o deshabilitar al mismo tiempo un grupo de opciones de menú, o hacer que sólo se pueda seleccionar una de ellas. Lo veremos más adelante.

Veamos primero cómo definir un grupo de opciones de menú. Como ya comentamos, Android nos permite definir un menú de dos formas distintas: mediante un fichero XML, o directamente a través de código. Si elegimos la primera opción, para definir un grupo de opciones nos basta con colocar dicho grupo dentro de un elemento <group>, al que asignaremos un ID. Veamos un ejemplo. Vamos a definir un menú con 3 opciones principales, donde la última opción abre un submenú con 2 opciones que formen parte de un grupo. A todas las opciones le asignaremos un ID y un texto, y a las opciones principales asignaremos además una imagen.

<menu
  xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/MnuOpc1" android:title="Opcion1"
      android:icon="@android:drawable/ic_menu_preferences"></item>
<item android:id="@+id/MnuOpc2" android:title="Opcion2"
      android:icon="@android:drawable/ic_menu_compass"></item>
<item android:id="@+id/MnuOpc3" android:title="Opcion3"
      android:icon="@android:drawable/ic_menu_agenda">
	<menu>
		<group android:id="@+id/grupo1">

			<item android:id="@+id/SubMnuOpc1"
				  android:title="Opcion 3.1" />
			<item android:id="@+id/SubMnuOpc2"
				  android:title="Opcion 3.2" />

		</group>
	</menu>
</item>

</menu>

Como vemos, las dos opciones del submenú se han incluido dentro de un elemento <group>. Esto nos permitirá ejecutar algunas acciones sobre todas las opciones del grupo de forma conjunta, por ejemplo deshabilitarlas u ocultarlas:

//Deshabilitar todo el grupo
mnu.setGroupEnabled(R.id.grupo1, false);

//Ocultar todo el grupo
mnu.setGroupVisible(R.id.grupo1, false);

Además de estas acciones, también podemos modificar el comportamiento de las opciones del grupo de forma que tan sólo se pueda seleccionar una de ellas, o para que se puedan seleccionar varias. Con esto convertiríamos el grupo de opciones de menú en el equivalente a un conjunto de controles RadioButton o CheckBox respectivamente. Esto lo conseguimos utilizando el atributo android:checkableBehavior del elemento <group>, al que podemos asignar el valor «single» (selección exclusiva, tipo RadioButton) o «all» (selección múltiple, tipo CheckBox). En nuestro caso de ejemplo vamos a hacer seleccionable sólo una de las opciones del grupo:

<group android:id="@+id/grupo1" android:checkableBehavior="single">

	<item android:id="@+id/SubMnuOpc1"
		android:title="Opcion 3.1" />
	<item android:id="@+id/SubMnuOpc2"
		android:title="Opcion 3.2" />

</group>

Si optamos por construir el menú directamente mediante código debemos utilizar el método setGroupCheckable() al que pasaremos como parámetros el ID del grupo y el tipo de selección que deseamos (exclusiva o no). Así, veamos el método de construcción del menú anterior mediante código:

private static final int MNU_OPC1 = 1;
private static final int MNU_OPC2 = 2;
private static final int MNU_OPC3 = 3;
private static final int SMNU_OPC1 = 31;
private static final int SMNU_OPC2 = 32;

private static final int GRUPO_MENU_1 = 101;

private int opcionSeleccionada = 0;

//...

private void construirMenu(Menu menu)
{
     menu.add(Menu.NONE, MNU_OPC1, Menu.NONE, "Opcion1")
        .setIcon(android.R.drawable.ic_menu_preferences);
     menu.add(Menu.NONE, MNU_OPC2, Menu.NONE, "Opcion2")
        .setIcon(android.R.drawable.ic_menu_compass);

     SubMenu smnu = menu.addSubMenu(Menu.NONE, MNU_OPC3, Menu.NONE, "Opcion3")
                        .setIcon(android.R.drawable.ic_menu_agenda);

     smnu.add(GRUPO_MENU_1, SMNU_OPC1, Menu.NONE, "Opcion 3.1");
     smnu.add(GRUPO_MENU_1, SMNU_OPC2, Menu.NONE, "Opcion 3.2");

     //Establecemos la selección exclusiva para el grupo de opciones
     smnu.setGroupCheckable(GRUPO_MENU_1, true, true);

     //Marcamos la opción seleccionada actualmente
     if(opcionSeleccionada == 1)
          smnu.getItem(0).setChecked(true);
     else if(opcionSeleccionada == 2)
          smnu.getItem(1).setChecked(true);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

     construirMenu(menu);

     return true;
}

Como vemos, al final del método nos ocupamos de marcar manualmente la opción seleccionada actualmente, que debemos conservar en algún atributo interno (en mi caso lo he llamado opcionSeleccionada) de nuestra actividad. Esta marcación manual la hacemos mediante el método getItem() para obtener una opción determinada del submenú y sobre ésta el método setChecked() para establecer su estado. ¿Por qué debemos hacer esto? ¿No guarda Android el estado de las opciones de menu seleccionables? La respuesta es sí, sí lo hace, pero siempre que no reconstruyamos el menú entre una visualización y otra. ¿Pero no dijimos que la creación del menú sólo se realiza una vez en la primera llamada a onCreateOptionsMenu()? También es cierto, pero después veremos cómo también es posible preparar nuestra aplicación para poder modificar de forma dinámica un menú según determinadas condiciones, lo que sí podría implicar reconstruirlo previamente a cada visualización. En definitiva, si guardamos y restauramos nosotros mismos el estado de las opciones de menú seleccionables estaremos seguros de no perder su estado bajo ninguna circunstancia.

Por supuesto, para mantener el estado de las opciones hará falta actualizar el atributo opcionSeleccionada tras cada pulsación a una de las opciones. Esto lo haremos como siempre en el método onOptionItemSelected().

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {

        //...
        //Omito el resto de opciones por simplicidad

        case SMNU_OPC1:
            opcionSeleccionada = 1;
            item.setChecked(true);
            return true;
        case SMNU_OPC2:
            opcionSeleccionada = 2;
            item.setChecked(true);
            return true;

        //...
    }
}

Con esto ya podríamos probar cómo nuestro menú funciona de la forma esperada, permitiendo marcar sólo una de las opciones del submenú. Si visualizamos y marcamos varias veces distintas opciones veremos cómo se mantiene correctamente el estado de cada una de ellas entre diferentes llamadas.

menu-checkable

El segundo tema que quería desarrollar en este artículo trata sobre la modificación dinámica de un menú durante la ejecucución de la aplicación de forma que éste sea distinto segun determinadas condiciones. Supongamos por ejemplo que normalmente vamos a querer mostrar nuestro menú con 3 opciones, pero si tenemos marcada en pantalla una determinada opción queremos mostrar en el menú una opción adicional. ¿Cómo hacemos esto si dijimos que el evento onCreateOptionsMenu() se ejecuta una sola vez? Pues esto es posible ya que además del evento indicado existe otro llamado onPrepareOptionsMenu() que se ejecuta cada vez que se va a mostrar el menú de la aplicación, con lo que resulta el lugar ideal para adaptar nuestro menú a las condiciones actuales de la aplicación.

Para mostrar el funcionamiento de esto vamos a colocar en nuestra aplicación de ejemplo un nuevo checkbox (lo llamaré en mi caso chkMenuExtendido). Nuestra intención es que si este checkbox está marcado el menú muestre una cuarta opción adicional, y en caso contrario sólo muestre las tres opciones ya vistas en los ejemplos anteriores.

En primer lugar prepararemos el método construirMenu() para que reciba un parámetro adicional que indique si queremos construir un menú extendido o no, y sólo añadiremos la cuarta opción si este parámetro llega activado.

private void construirMenu(Menu menu, boolean extendido)
{
     menu.add(Menu.NONE, MNU_OPC1, Menu.NONE, "Opcion1")
        .setIcon(android.R.drawable.ic_menu_preferences);
     menu.add(Menu.NONE, MNU_OPC2, Menu.NONE, "Opcion2")
        .setIcon(android.R.drawable.ic_menu_compass);

     SubMenu smnu = menu.addSubMenu(Menu.NONE, MNU_OPC3, Menu.NONE, "Opcion3")
                        .setIcon(android.R.drawable.ic_menu_agenda);

     smnu.add(GRUPO_MENU_1, SMNU_OPC1, Menu.NONE, "Opcion 3.1");
     smnu.add(GRUPO_MENU_1, SMNU_OPC2, Menu.NONE, "Opcion 3.2");

     //Establecemos la selección exclusiva para el grupo de opciones
     smnu.setGroupCheckable(GRUPO_MENU_1, true, true);

     if(extendido)
        menu.add(Menu.NONE, MNU_OPC4, Menu.NONE, "Opcion4")
            .setIcon(android.R.drawable.ic_menu_camera);

     //Marcamos la opción seleccionada actualmente
     if(opcionSeleccionada == 1)
          smnu.getItem(0).setChecked(true);
     else if(opcionSeleccionada == 2)
          smnu.getItem(1).setChecked(true);
}

Además de esto, implementaremos el evento onPrepareOptionsMenu() para que llame a este método de una forma u otra dependiendo del estado del nuevo checkbox.

@Override
public boolean onPrepareOptionsMenu(Menu menu)
{
    menu.clear();

    if(chkMenuExtendido.isChecked())
    	construirMenu(menu, true);
    else
    	construirMenu(menu, false);

    return super.onPrepareOptionsMenu(menu);
}

Como vemos, en primer lugar debemos resetear el menú mediante el método clear() y posteriormente llamar de nuevo a nuestro método de construcción del menú indicando si queremos un menú extendido o no según el valor de la check.

Si ejecutamos nuevamente la aplicación de ejemplo, marcamos el checkbox y mostramos la tecla de menú podremos comprobar cómo se muestra correctamente la cuarta opción añadida.

menu-extendido

Y con esto cerramos ya todos los temas referentes a menús que tenía intención de incluir en este Curso de Programación en Android. Espero que sea suficiente para cubrir las necesidades de muchas de vuestras aplicaciones.

Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este artículo accediendo a la pagina del curso en GitHub.

Curso de Programación Android en PDF

Este curso también está disponible en PDF. Descubre cómo conseguirlo…

¿Te ha sido de utilidad el Curso de Programación Android? ¿Quieres colaborar de forma económica con el proyecto? Puedes contribuir con cualquier cantidad, unos céntimos, unos euros, cualquier aportación será bienvenida. Además, si tu aportación es superior a una pequeña cantidad simbólica recibirás como agradecimiento un documento con la última versión del curso disponible en formato PDF. Sea como sea, muchas gracias por colaborar!

Más información:

You may also like

7 comments

Desarrollo en Android | sgoliver.net blog 06/10/2011 - 16:48

[…] Menús en Android (III): Opciones avanzadas [Nuevo!] […]

Reply
jose 05/04/2012 - 23:33

Tengo un ListView y dependiendo de la cantidad seleccionada quiero deshabilitar una de los items de los submenu… El problema es que no me funciona.

protected void onListItemClick(ListView l, View v, int position, long id) {
super.onListItemClick(l, v, position, id);

int cantidad = 0;

MenuItem item = (MenuItem) findViewById(R.id.menuAdd);

for (int i = 0; i 0)); // Arroja un nullPointerException
}

Reply
jose 05/04/2012 - 23:34

protected void onListItemClick(ListView l, View v, int position, long id) {
super.onListItemClick(l, v, position, id);
int cantidad = 0;
MenuItem item = (MenuItem) findViewById(R.id.menuAgregar);
for (int i = 0; i 0));
}

«se comio parte del codigo!»

Reply
Andrés Rodriguez 23/10/2012 - 22:54

Una vez mas te felicito por el tutorial, muy intuitivo. al principio tuve algunos errores y no entendía por que, pero cuando descargue el código entendí mi error, muchas gracias hombre.

Reply
Juan Manuel 10/05/2013 - 20:01

Como puedo poner un edit text y un textview dentro de un expandablelistview, quiero lograr una vista asi: http://i.stack.imgur.com/kYwcm.gif

Excelente sitio!!

Reply
Iván Rodríguez 12/09/2013 - 22:19

Hola Salvador:

Antes de nada, enhorabuena por el tutorial. Como los demás, es excelente.
Decirte que comentas 2 métodos para deshabilitar y/u ocultar el grupo del submenu.
Dejo aquí un código de ejemplo que funciona por si lo quieres incluir:

public boolean onPrepareOptionsMenu (Menu menu) {
menu.findItem (R.id.MnuOpc3).getSubMenu ().setGroupVisible (R.id.grupo1, true);
menu.findItem (R.id.MnuOpc3).getSubMenu ().setGroupEnabled (R.id.grupo1, false);
return super.onPrepareOptionsMenu (menu);
}

Reply
Paco 05/11/2013 - 17:26

Una preguntita a ver si alguien lo sabe:

¿Como puedo añadir un submenu dinámicamente (por java) a una opcion del menu
que ha sido creada estáticamente?

Reply

Leave a Comment

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies