Programación android, Cómo usar un Menú

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0

Menú en Android
En esta ocasión vamos a explicar cómo usar el menú en las aplicaciones Android. En algún ejemplo que hemos hecho en Proyecto Simio, la lógica de la interfaz era “poco útil”, por ejemplo en el último que hicimos sobre Preferencias de Usuario, para llamar a las preferencias lo hacíamos a través de un botón, sin embargo, si pensamos en la optimización de la experiencia del usuario que vaya a utilizar nuestra aplicación, éste esperará encontrar las preferencias a partir de un menú.
Como siempre, vamos a utilizar un pequeño ejemplo para configurar y utilizar nuestro menú, esta vez utilizaremos un Layout con un simple TextView que va a mostrar la opción del menú que se ha seleccionado.

Inflar el menú

En primer lugar, recordemos que siempre que creamos una nueva Activity en Eclipse, nos aparece una estructura con 2 métodos, el primero onCreate(), a partir del que inicializamos todos los objetos que necesitamos en la Activity, o al menos la mayoría, y otro método que se llama onCreateOptionsMenu(Menu menu):

public class ExampleMenuActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.example_menu);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.example_menu, menu);
		return true;
	}

}

Este segundo método se lanza automáticamente al pulsar el botón de menú de nuestro dispositivo, y es el encargado de inflar la vista para mostrar nuestro menú. También podemos ver en la estructura de nuestro proyecto, que cada vez que creamos una Activity (utilizando el gestor de Eclipse para hacerlo), al igual que se crea un nuevo archivo.xml que representa al Layout de la nueva Activity, también se crea un nuevo archivo.xml en la carpeta res/menu/ que representa al menú de la nueva Activity. En resumen, para poder visualizar el menú en nuestra aplicación, sólo debemos tener en cuenta que en nuestra Activity contenemos el método onCreateOptionsMenu(Menu menu), y que existe el archivo.xml que contiene la estructura de nuestro menú.

Configurar el menú

El siguiente paso es crear la estructura del menú que deseamos mostrar al usuario, si abrimos el archivo.xml de nuestro menú por defecto, veremos que tiene la siguiente información:

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

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="@string/action_settings"/>

</menu>

Esta es una configuración por defecto que mostrará una única opción, que corresponde al item que tiene configurado.
En nuestro caso vamos a crear un menú con 3 opciones, y la tercera opción nos mostrará a su vez un submenú de dos opciones. Este submenú, que aparecerá cuando el usuario pulse la tercera de las opciones, se mostrará en forma de una ventana flotante, que contendrá las 2 opciones del submenú. Para ello el XML sería así:

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

    <item
        android:id="@+id/Menu_Opcion1"
        android:icon="@android:drawable/ic_menu_preferences"
        android:title="@string/Menu_Opcion1">
    </item>
    <item
        android:id="@+id/Menu_Opcion2"
        android:icon="@android:drawable/ic_menu_compass"
        android:title="@string/Menu_Opcion2">
    </item>
    <item
        android:id="@+id/Menu_Opcion3"
        android:icon="@android:drawable/ic_menu_agenda"
        android:title="@string/Menu_Opcion3">
        <menu>
            <item
                android:id="@+id/SubMenu_Opcion1"
                android:title="@string/subMenu_Opcion3_1"/>
            <item
                android:id="@+id/SubMenu_Opcion2"
                android:title="@string/subMenu_Opcion3_2"/>
        </menu>
    </item>

</menu>

Como podemos ver, hemos definido 2 etiquetas item, que se cierran en la misma etiqueta, y después hemos creado una etiqueta item que no hemos cerrado, y que a su vez contiene un menú. Esto hará que el sistema, automáticamente, nos muestre el submenú que deseamos, sin necesidad de tener que hacer nada más. Sin embargo debemos tener en cuenta que no podemos hacer un segundo submenú a partir de una de las opciones de un submenú, creando así tres niveles, sino que sólo podemos manejar 2 niveles, menú y submenú, aunque sí podemos crear un submenú por cada item del menú principal sin ningún problema.

Otro dato a tener en cuenta es que el icono que identifiquemos no se va a mostrar necesariamente. Por ejemplo, en el caso de dispositivos con versiones a partir de 4.0 de Android, el icono sólo se mostrará en el caso de que mostremos el item en la parte superior, en la ActionBar. Cómo hacer esto lo explicaremos más adelante. El resultado sería:

Menú Android
Menú
Menú Android
Submenú

En Android Developers se pueden ver todos los atributos que puede contener la etiqueta item, además de los 3 mostrados en el código (con nombres bastante autodescriptivos).

Manejar el menú

El siguiente paso, una vez que tenemos el menú creado, será, desde el código Java de nuestra Activity, identificar la opción que se ha seleccionado, para reaccionar en función a ella. Para eso necesitamos sobreescribir el método onOptionsItemSelected(MenuItem item), y dentro del método identificaremos el item y la acción que debemos llevar a cabo:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	String text = "Opción seleccionada: ";
	switch (item.getItemId()) {
	case R.id.Menu_Opcion1:
		text += "Opción 1";
		break;
	case R.id.Menu_Opcion2:
		text += "Opción 2";
		break;
	case R.id.SubMenu_Opcion1:
		text += "Opción 3.1";
		break;
	case R.id.SubMenu_Opcion2:
		text += "Opción 3.2";
		break;
	default:
		// En caso de que seleccionemos el 3º item del menú principal
		// también se va a lanzar este método, por lo que para evitar que
		// cambie el texto en este caso lo que haremos será recoger el valor
		// actual del TextView.
		text = tvOptionText.getText().toString();
		break;
	}

	tvOptionText.setText(text);

	return super.onOptionsItemSelected(item);
}

Y con esto ya podemos ver cómo nuestra aplicación cambia el texto de nuestro TextView en función de la opción elegida.

Mostrar el menú en la ActionBar

Por último nos falta explicar qué hacer para mostrar nuestro menú en la ActionBar de la aplicación. Para, esto en los items, existe un atributo android:showAsAction, que puede tomar los siguientes valores:

  • never: Nunca mostrará el item del menú en la ActionBar.
  • ifRoom: Mostrará el item en el menú siempre y cuando haya espacio, de lo contrario aparecerá cuando se pulse el botón de menú del dispositivo.
  • always: Se mostrará siempre el item en el ActionBar. No se aconseja utilizar demasiado este valor, ya que si no existe espacio suficiente para todos los items en el ActionBar se puede producir solapamiento.
  • withText: Muestra también el texto definido en el atributo android:title.
  • collapseActionView: Indica que el la vista asociada a la opción de este item puede ocultarse.

Además, podemos utilizar varios valores al mismo tiempo en el atributo android:showAsAction, por ejemplo si quisiéramos mostrar el item en el ActionBar, y además usar el texto utilizaríamos android:showAsAction=”ifRoom|withText”.

En el caso de que el item del ActionBar contenga un submenú, ya no se mostrará la ventana como en el caso anterior con las opciones del submenú, sino que se desplegará el submenú en la parte superior derecha del terminal, debajo de los items del menú del ActionBar.

En una próxima entrada haremos un sencillo ejemplo sobre cómo programar en 2 horas un robot que realice una operación a corazón abierto.

Descargas

Puedes descargar el proyecto completo aquí.

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0
The following two tabs change content below.
Reborn as IT Developer. Desarrollador Android y fundador de Proyecto Simio. "En realidad, yo no puedo enseñar nada a nadie, sólo puedo hacerles pensar." - Sócrates.

Deja un comentario