wake-up-neo.com

CoordinatorLayout + AppBarLayout + NavigationDrawer

Ich habe ein Layoutproblem beim Kombinieren von CoordinatorLayout mit einem AppBarLayout und einem NavigationDrawer.

Das Problem ist, dass der NavigationDrawer und sein Inhalt hinter der Symbolleiste versteckt sind. Ich habe bereits viel recherchiert und eine Menge Umstrukturierungen versucht, aber keine der "Lösungen" hat mein Problem behoben.

Eine Demonstration finden Sie in diesem kleinen Webm-Video: https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_stackoverflow32523188.webm?dl=

Der Basisstil ist Theme.AppCompat.Light.NoActionBar.

Meine activity_overview.xml sieht so aus:

<?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

Ihr CoordinatorLayout umhüllt Ihr DrawerLayout und die Navigationsansicht. Dies bedeutet, dass der Coordinator die Kontrolle über das Layout hat. Sie müssen den Koordinator wie folgt in die Schublade schachteln:

<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>

Das sollte es regeln!

93
GeordieMatt

Um die vorherige Antwort zu ergänzen, können Sie das DrawerLayout übersichtlicher gestalten, indem Sie die untergeordneten CoordinatorLayout + -Elemente in eine separate XML-Datei verschieben. Verwenden Sie dann einfach die Option "include", um die Datei hinzuzufügen.

<?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