martes, 10 de enero de 2017

Menús en Android (III): Opciones avanzadas

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<menu
 
<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:
1
2
3
4
5
//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:
1
2
3
4
5
6
7
8
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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().
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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.
1
2
3
4
5
6
7
8
9
10
11
12
@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.

No hay comentarios:

Publicar un comentario