android - programacion - ¿Cómo agregar un indicador de "menú" al lado del ícono de la barra de acción?

manual android studio avanzado

Question

Al menos las aplicaciones de Gmail y Youtube de Android usan un menú lateral (¿ cajón de navegación ?) Que se abre al deslizar o haciendo clic en el icono de la aplicación (botón de inicio):

¿El indicador / icono de menú en la captura de pantalla de arriba es una parte ya preparada del SDK de Android? (¿O un ícono personalizado que Google usa en sus aplicaciones?) En cualquier caso, ¿cuál es la forma más fácil de hacer que su botón de inicio se vea así , es decir, que abre un menú?

( targetSdkVersion 18; minSdkVersion 14)

Resolución

Finalmente lo tengo funcionando . Lo que faltaba para mí era 1) el icono real y 2) la llamada diferida a syncState() en el ActionBarDrawerToggle .

Answer 1

La palabra clave aquí es NavigationDrawer ; Hay un ejemplo completo de código de trabajo en el sitio de desarrolladores de Android.

LEA EL FINAL DEL ENLACE DADO : Abrir y cerrar con el ícono de la aplicación

El siguiente código se copia desde allí.

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    ...

    public void onCreate(Bundle savedInstanceState) {
        ...

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer icon to replace ''Up'' caret */
                R.string.drawer_open,  /* "open drawer" description */
                R.string.drawer_close  /* "close drawer" description */
                ) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item)) {
          return true;
        }
        // Handle your other action bar items...

        return super.onOptionsItemSelected(item);
    }

    ...
}

Algunos archivos están disponibles como descarga y las 3 líneas pequeñas con el efecto de animación están completamente ejemplificadas.

Tienes que copiar estos archivos en la carpeta de drawable correspondiente. Dependiendo del tema que uses, oscuro o claro tienes un conjunto diferente de iconos.

En mi caso, simplemente copié el drawer_shadow.9.png y ic_drawer.png en la carpeta de ic_drawer.png y seguí el ejemplo y todo funciona bien.

Los iconos están disponibles en el enlace que proporcioné, pero NO están en el "Paquete de iconos de la barra de acción", están en la aplicación de muestra en las carpetas res / drawable correspondientes .

Answer 2

Para crear una implementación / aspecto similar en su aplicación, debe usar ActionBarDrawerToggle y configurar su icono personalizado como indicador al lado del botón de inicio de la barra de acción. Por ejemplo :

import android.app.ActionBar;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;

private void setUpDrawerToggle(){
    ActionBar actionBar = getActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeButtonEnabled(true);

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the navigation drawer and the action bar app icon.
    mDrawerToggle = new ActionBarDrawerToggle(
            this,                             /* host Activity */
            mDrawerLayout,                    /* DrawerLayout object */
            R.drawable.ic_drawer,             /* nav drawer image to replace ''Up'' caret */
            R.string.navigation_drawer_open,  /* "open drawer" description for accessibility */
            R.string.navigation_drawer_close  /* "close drawer" description for accessibility */
    ) {
        @Override
        public void onDrawerClosed(View drawerView) {
            invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }
    };

    // Defer code dependent on restoration of previous instance state.
    // NB: required for the drawer indicator to show up!
    mDrawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

    mDrawerLayout.setDrawerListener(mDrawerToggle);
}

Donde R.drawable.ic_drawer es en realidad el ícono para usar como indicador. Lo puedes encontrar en Android Asset Studio ; vea el indicador del cajón de navegación .

Referencias

1. ActionBarDrawerToggle
2. Creación de un cajón de navegación

Answer 3

Android-Developer y HpTerm me ayudaron en la dirección correcta, por

1. Indicar que esto es específico de NavigationDrawer (que ya estaba usando como en el ejemplo de Google)
2. Indicar dónde encontrar el icono ic_drawer.png (→ Android Asset Studio )

Ahora, desafortunadamente, crear ActionBarDrawerToggle como a continuación parece no ser suficiente. Al menos en mi dispositivo de prueba Nexus 7 (API 18).

drawerToggle = new ActionBarDrawerToggle(this, 
                       drawerLayout, 
                       R.drawable.ic_navigation_drawer, 
                       R.string.side_menu_open, 
                       R.string.side_menu_closed) {
    // ...
};

Solución parcial (nivel API 18+)

Sin embargo, encontré una forma de hacer que el indicador se mostrara: setHomeAsUpIndicator() . El inconveniente: ese método fue agregado en el nivel API 18.

@Override
protected void onCreate(Bundle savedInstanceState) {
    // ...
    getActionBar().setDisplayHomeAsUpEnabled(true); // also required
    if (Build.VERSION.SDK_INT >= 18) {
        getActionBar().setHomeAsUpIndicator(
            getResources().getDrawable(R.drawable.ic_navigation_drawer));
    }
}

Así que ahora queda la pregunta: ¿cómo hacer que esto funcione (en mi caso) para los niveles de API 14 a 17?

ic_drawer en un dispositivo 4.1.2 (API 16) que el icono ic_drawer no se muestra. Con setDisplayHomeAsUpEnabled(true) , obtengo el ícono "de inicio" normal (flecha pequeña apuntando a la izquierda) y sin él, el espacio que queda a mi ícono de la aplicación permanece en blanco.

Solución final

Lo tengo funcionando usando la versión editada de la respuesta del desarrollador de Android .

Curiosamente, lo que faltaba en mi código de inicialización ActionBarDrawerToggle era esto:

   // Defer code dependent on restoration of previous instance state.
   drawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

Con eso incluido, no es necesario llamar a setHomeAsUpIndicator() .