support - Librería de diseño de Android CoordinatorLayout, AppBarLayout y DrawerLayout

material design 2 android studio

Question

Estoy usando la biblioteca de diseño de Android en la API 22. Me gustaría:

1. tener una barra de herramientas y un DrawerLayout dentro del cual hay un RecyclerView
2. tener el DrawerLayout debajo de la barra de herramientas; por ejemplo, cuando la barra de herramientas está visible, el contenido principal del cajón debe estar debajo de ella, y el cajón (izquierda) también debe estar debajo de ella para que cuando se expanda, la barra de herramientas aún esté visible
3. hacer que la barra de herramientas se desplace fuera de la pantalla cuando la vista del reciclador se desplaza hacia abajo

¿Es esto posible? Tengo problemas para casarme # 2 y # 3. La forma en que está ahora es que la barra de herramientas está siempre sobre el diseño del cajón, cubriendo la primera entrada en el reciclador, y la parte superior del cajón izquierdo también. Aquí está mi archivo de diseño (incompleto, pero mostrando mi estructura):

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"/>

    </android.support.v4.widget.DrawerLayout>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Toolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

Parece que aunque la configuración de la aplicación RecyclerView: layout_behavior = "@ string / appbar_scrolling_view_behavior" no tiene ningún efecto, porque cuando se elimina, el comportamiento es el mismo.

Intenté agregar un RelativeLayout como un elemento secundario del CoordinatorLayout para definir que el cajón está debajo de la barra de herramientas, pero nada parece funcionar.

¿Es lo que estoy tratando de lograr con la biblioteca?

Answer 1

¡Sí! Es posible.

<android.support.v4.widget.DrawerLayout       xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".StartupActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/Theme.AppCompat.NoActionBar"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/scrollRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

    </android.support.design.widget.CoordinatorLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawer_recycler_view"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@color/WhiteColor"
        android:fitsSystemWindows="true"
        android:scrollbars="vertical"/>

</android.support.v4.widget.DrawerLayout>

Como puede ver, lo que importa es básicamente que configure la app:layout_scrollFlags="scroll|enterAlways" para que la barra de herramientas se oculte cuando se desplaza. El RecyclerView en la parte inferior del código es el que está dentro del DrawerLayout , el de arriba es el que está en su diseño de actividad principal.

Answer 2

Desde la página de desarrolladores :

DrawerLayout actúa como un contenedor de nivel superior para el contenido de la ventana que permite extraer vistas interactivas del "cajón" desde el borde de la ventana.

Al principio, intente colocar DrawerLayout como un contenedor de nivel superior (es decir, diseño primario). Luego coloque el CoordinadorLayout debajo y vea qué sucede.

Además, no ha agregado la NavigationView. Por favor, consulte las instrucciones fundamentales here .

Answer 3

Ha pasado mucho tiempo pero creo que todavía ayuda a alguien. El diseño del cajón debe tener un diseño infantil. Según los documentos de Android, debe ser FrameLayout porque el orden XML implica ordenamiento en z y el cajón debe estar encima del contenido. Visita el siguiente enlace.

Creación de un cajón de navegación

Agregue su AppBarLayout, Toolbar, RecyclerView y todas las demás vistas en FrameLayout y conviértalo en un hijo de Layer Layout. Esperemos que se ejecute.

Answer 4

Intenta esto debería funcionar, funcionó para mí.

    <android.support.design.widget.CoordinatorLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                />

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
            >
          <android.support.v7.widget.RecyclerView
                 android:id="@+id/scrollingRecyclerView"
                 android:layout_width="match_parent"
                 android:layout_height="fill_parent"
        />

            <!-- The navigation drawer -->
            <FrameLayout
                android:id="@+id/right_frame"
                android:layout_height="match_parent"
                android:layout_gravity="start"/> (whatever)

        </android.support.v4.widget.DrawerLayout>

    </android.support.design.widget.CoordinatorLayout>

El comportamiento de desplazamiento debe establecerse en el elemento secundario directo de CoordinatorLayout (a DrawerLayout). Esto debería solucionar sus problemas # 2 , # 3 . Y en caso de que el contenido de su cajón contenga recycler, la barra de herramientas se desplazará nuevamente fuera de la pantalla.

Answer 5

Intente lo siguiente si desea ver la animación del icono y la flecha de la hamburguesa. Si incluye el margen superior (layout_marginTop) para NavigationView, se moverá hacia abajo.

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navigation_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways" />

        </android.support.design.widget.AppBarLayout>

        <!-- main content view -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/background_light"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu"/>

</android.support.v4.widget.DrawerLayout>