android - studio - Cómo implementar un DrawerLayout con un identificador visible

navigation drawer android studio material design

Question

Implementé con éxito un NavigationDrawer para mi aplicación.

Mi aplicación muestra un cajón que se abre a la izquierda de la pantalla.

Mi problema es que necesito agregar un botón a la izquierda. Se puede hacer clic en ese botón o pasarlo para abrir el cajón izquierdo. Eso puedo hacer

Pero se supone que el botón parece que es una parte del cajón que se desborda en la pantalla.

Eso significa que el botón debe deslizarse simultáneamente a medida que el cajón se abre y se cierra.

ESTADO CERRADO:

ESTADO APERTURA

Traté de agregar el botón en el diseño del cajón izquierdo, pero parece que no puedes hacer que las cosas aparezcan fuera de sus límites, y el cajón siempre quedará completamente oculto cuando lo cierres.

Ahora intento agregarlo para agregar un botón al DrawerLayout principal y alinearlo a la derecha del cajón izquierdo ... Pero no tuve suerte ... Parece que un DrawerLayout no puede tener más de dos hijos ... .

Cualquier ayuda será apreciada.

Estoy usando la biblioteca de soporte (v4)

[EDITAR] Y apoyo el nivel 8 de la API ... No puedo usar ImageView.setTranslationX o View.OnAttachStateChangeListener

Answer 1

Encontré una forma de hacerlo bastante fácil gracias a la biblioteca Aniqroid escrita por Mobistry (SO pseudo)

Utilizo la clase SlidingTray, que es una copia de android SlidingDrawer, pero le permite colocar el cajón en cualquier esquina de la pantalla.

Declaré el elemento a través de xml

<com.sileria.android.view.SlidingTray 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="270dp"
    android:content="@+id/content"
    android:handle="@+id/handle" >

    <ImageView
        android:id="@+id/handle"
        android:layout_width="320dp"
        android:layout_height="24dp"
        android:background="@drawable/tray_btn" />

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="fill_vertical"
        android:orientation="vertical" >
    </LinearLayout>

</com.sileria.android.view.SlidingTray>

Y solo tuve que llamar

Kit.init(this);

en mi Activity principal antes de inflar el diseño.

¡Agradezco a los desarrolladores de Android!

https://code.google.com/p/aniqroid/

Answer 2

Es bastante complicado.

Creo que esto es similar a lo que se hace con el identificador del cajón en la nueva aplicación Google Maps. No tomes mi palabra, no estoy seguro. :)

He escrito alternar que se mantiene al borde de la vista de contenido de la Activity . Cuando se arrastra DrawerLayout , DrawerLayout la vista en el eje x por la cantidad del elemento secundario mínimo (que es la vista de contenido de DrawerLayout ) menos la sombra (si corresponde). Dado que la vista sombreada + contenido del DrawerLayout proporciona el ancho total medido de todo el cajón.

Rápidamente multiplico el desplazamiento deslizado y el niño mínimo y encuentro la x traducción.

[Editar: el código se ha eliminado para facilitar su lectura y se ha movido al siguiente enlace]

En tu actividad:

mDrawerToggle = new DrawerLayoutEdgeToggle(
    this, 
    mDrawerLayout, 
    R.drawable.ic_launcher, 
    R.drawable.ic_launcher,
    Gravity.LEFT, 
    true) {

        @Override
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view); //must call super
        }

        @Override
        public void onDrawerOpened(View view) {
            super.onDrawerOpened(view); //must call super
        }

        @Override
        public void onDrawerSlide(View view, float slideOffset) {
            super.onDrawerSlide(view, slideOffset); //must call super

        }
    };
mDrawerLayout.setDrawerListener(mDrawerToggle);

Incremento de la creatividad: puede agregar más cosméticos, como la distancia desde ActionBar, que puede establecer como margen en el mango.

También puede imitar el "efecto de cremallera simple" moviendo el mango hacia arriba / abajo a la izquierda / derecha simplemente traduciendo en el eje Y. :)

Editar: está disponible en mi GitHub aquí

Edición 2 : para aquellos que no pueden obtener el asa aparecer al principio simplemente use mDrawerToggle.setVerticalPostionOffset(0)