Menús

Menús

  • Permiten añadir funcionalidades a la pantalla sin sacrificar espacio.
  • Existen 3 tipos de menús:
    • Option Menu
    • Submenu
    • Context Menu

Crear menús

  • En resources bajo la carpeta res/menu
  • Fichero xml con la raíz <menu>
  • Puede contener elementos <item>
  • Puede contenter otros elementos <menu> (submenús)
  • Puede contener grupos (contenedores invisibles) <group>

 

  • Atributos más comunes:
    • android:icon
    • android:id
    • android:title
    • android:showAsAction
    • app:showAsAction (AppCompat)

Inflar menús

  • Inflar un menú --> convertir de xml a objeto programable
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.first_menu, menu);
    return true;
}

Options menu

  • Menú que aparece al pulsar la tecla de menú
    • Hasta Android 2.3 el menú aparecía en la parte inferior de nuestra app
    • A partir de Android 3.0 el options menú se incluye en la Action Bar (o Toolbar actualmente).
    • Por defecto, se incluyen en el Menu Overflow 

Options menu (II)

  • Para gestionar la selección del usuario usamos:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle item selection
    switch (item.getItemId()) {
        case R.id.pizza:
            giveMeAPizza();
            return true;
        case R.id.burger:
            giveMeABurger();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

Options menu (III)

  • Se pueden modificar en tiempo de ejecución.
  • Para ello usamos el método onPrepareOptionsMenu() que se llama siempre que se muestra el menú.
  • Se puede usar menu.add y menu.remove para modificarlo.

Context Menu

  • Menús para acciones específicas de una vista
  • Se puede entender como el menú del botón derecho en Windows.
  • Se muestra al presionar un elemento durante un cierto periodo de tiempo.
  • Se pueden crear para cualquier elemento gráfico
  • Se debe inflar en onCreateContextMenu(...)

Context Menu(II)

  • Hay que asignar el context menu a un elemento view
    • registerForContextMenu(ElementoView)
@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
    super.onCreateContextMenu(menu, v, menuInfo);
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.context_menu, menu);
}
  • Tenemos que implementar el comportamiento:
@Override
public boolean onContextItemSelected(MenuItem item) {
    AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getMenuInfo();
    switch (item.getItemId()) {
        case R.id.edit:
            editNote(info.id);
            return true;
        case R.id.delete:
            deleteNote(info.id);
            return true;
        default:
            return super.onContextItemSelected(item);
    }
}

Context Menu (III)

  • El contextual action mode menu, es otro menú contextual para tratar uno o más items a la vez.
  • Muestra una action bar contextual con acciones que serán aplicadas a los items seleccionados.

Floating context menu y contextual action mode

Más info en: developer.android.com

Submenus y groups

  • Se crean añadiéndolos como un elemento más a XML.
  • Los submenus se gestionan igual que los OptionMenu.
  • Los grupos nos permiten agrupar los elementos, como puede ser un grupo de elementos seleccionables.
  • Ejemplo XML con un grupo,  para que sea seleccionable  hay que definir el atributo:

android:checkableBehaviour="none|all|single"

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item android:id="@+id/red"
            android:title="@string/red" />
    
        <item android:id="@+id/blue" 
            android:title="@string/blue" />
    </group>
</menu>

Submenus y groups

  • Otros métodos disponibles:
    • setGroupVisible()
    • setGroupEnable()
    • setGroupCheckable()
  • Para un item:
    • setChecked()

ActionBar y Toolbar 

  • Con la llegada de Material y Android 5.0 reemplazamos la (no tan vieja) Action Bar por la nueva ToolBar.
  • Viene incluida en la librería de soporte appcompat-v7
    • (Que ya viene por defecto en el gradle).
  • Es mucho más flexible que la ActionBar
  • Es una vista dentro de nuestra jerarquía, por tanto, es más fácil para:
    • Intercalar
    • Animar
    • Coordinar con otras vistas.
  • Ahora, la Action Bar se convierte en un tipo de Toolbar.

 

 

ActionBar 

  • Si no queremos Action Bar, basta con escoger un tema que no la use:
  • En tiempo de ejecución:
  • En tiempo de ejecución (Support)
ActionBar actionBar = getActionBar();
actionBar.hide();
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
ActionBar actionBar = getSupportActionBar();
actionBar.hide();

Toolbar (I)

  • Para usar la nueva Toolbar, tenemos que desactivar la Action Bar:
    • Usar el tema AppCompat que no use Action Bar
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Recordad que hemos de tener en gradle la librería appcompat-v7 añadida!

Si usamos un tema que no sea AppCompat, tenemos que añadir:

<!-- Quitamos el título -->
<item name="android:windowNoTitle">true</item>
<!-- Desactivamos la Action Bar por defecto-->
<item name="android:windowActionBar">false</item>

Toolbar (II)

  • Añadimos la Toolbar al Layout de nuestra Activity
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</android.support.v7.widget.Toolbar>
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}
  • Inflamos Toolbar desde la Activity:
Made with Slides.com