web-dev-qa-db-fra.com

CoordinatorLayout + AppBarLayout + NavigationDrawer

J'ai un problème de mise en page lorsque je combine CoordinatorLayout avec un AppBarLayout et un NavigationDrawer.

Le problème est que NavigationDrawer et son contenu sont masqués derrière la barre d'outils. J'ai déjà fait beaucoup de recherches et essayé beaucoup de restructuration, mais aucune des "solutions" n'a résolu mon problème.

Une démonstration peut être trouvée dans cette petite vidéo Webm: https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_stackoverflow32523188.webm?dl=

Le style de base est Theme.AppCompat.Light.NoActionBar.

Mon activity_overview.xml ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<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/overview_coordinator_layout"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


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


    </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"
        Android:clickable="true"
        Android:focusableInTouchMode="true">

        <Android.support.v4.widget.NestedScrollView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="@string/lorem_ipsum_long" />
        </Android.support.v4.widget.NestedScrollView>

        <Android.support.design.widget.NavigationView
            Android:id="@+id/nvView"
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_gravity="start"
            Android:background="@Android:color/white"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/navigationdrawer_main" />

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


    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/overview_floating_action_button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="16dp"

        Android:clickable="true"
        Android:src="@drawable/ic_add"
        app:layout_anchor="@id/overview_coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:layout_behavior="@string/fab_onscroll_behavior" />

</Android.support.design.widget.CoordinatorLayout>
androidandroid-layoutandroid-coordinatorlayoutandroid-appbarlayoutandroid-drawer
57
andred

Votre CoordinatorLayout encapsule DrawerLayout et NavigationView, ce qui signifie que le coordinateur contrôle la manière dont tout est organisé. Vous devez imbriquer le coordinateur dans le tiroir, comme suit:

<Android.support.v4.widget.DrawerLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:clickable="true"
    Android:focusableInTouchMode="true">

    <Android.support.design.widget.CoordinatorLayout
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/overview_coordinator_layout"
        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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


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

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

        <Android.support.v4.widget.NestedScrollView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="@string/lorem_ipsum_long" />

        </Android.support.v4.widget.NestedScrollView>

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/overview_floating_action_button"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_margin="16dp"
            Android:clickable="true"
            Android:src="@drawable/ic_add"
            app:layout_anchor="@id/overview_coordinator_layout"
            app:layout_anchorGravity="bottom|right|end"
            app:layout_behavior="@string/fab_onscroll_behavior" />

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

    <Android.support.design.widget.NavigationView
        Android:id="@+id/nvView"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        Android:background="@Android:color/white"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/navigationdrawer_main" />

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

Cela devrait régler le problème!

93
GeordieMatt

Pour compléter la réponse précédente, vous pouvez rendre le nettoyeur DrawerLayout plus transparent en déplaçant les éléments enfants CoordinatorLayout + dans un fichier xml séparé. Et puis utilisez l’option "include" pour ajouter le fichier.

<?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"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:openDrawer="start">

  <!-- Widget Coordinator + child elements go here -->
  <include
    layout="@layout/app_bar_main"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" />

  <Android.support.design.widget.NavigationView
    Android:id="@+id/nav_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

</Android.support.v4.widget.DrawerLayout>
12
zuko