如何使用CoordinatorLayout设置Toolbar下方的DrawerLayout

Question

我有一个这样的XML，在展示抽屉布局时，它会覆盖Toolbar，我希望我的抽屉布局在Toolbar下面，但我不知道如何做到这一点，我尝试了很多方法，整整一天都没有解决。如何在不重叠Toolbar的情况下使用CoordinatorLayout和DrawerLayout？

这是我的ActionBar样式：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <item name="colorAccent">@color/ColorPrimary</item>
</style>

这是我的布局：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        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"
            app:elevation="0dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/ColorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <TextView
                    android:id="@+id/toolBarTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textColor="@color/white"
                    android:textSize="18dp"/>

            </android.support.v7.widget.Toolbar>

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


        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            app:elevation="4dp"
            app:fabSize="normal"
            app:layout_behavior="com.frt.poppcar.utils.FabBehavior"/>

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

    <ScrollView
        android:id="@+id/drawerList"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@color/white">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/mainTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/main"
                android:textColor="@color/five"
                android:textSize="18dp"/>

        </LinearLayout>

    </ScrollView>

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

- Mike

Answer 1

这对我非常有效。您需要将协调布局设置为父布局，并为抽屉布局设置布局行为。

<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    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/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

<!-- to make toolbar scroll and hide towards upside include this line
app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
<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/drawer_layout"
    android:layout_marginTop="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--<include layout="@layout/navigation_drawer_content"/>-->
    <FrameLayout
        android:id="@+id/content_frame"
        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"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />

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

- Amit Tumkur

---

它能够工作是因为协调布局旨在处理不同的动画或交互，如侧边菜单等。https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html - sgelves

Answer 2

我认为现在可能有点晚了，但你可能想知道问题出在哪里或者你能做些什么。无论如何。

新的Support Design Library包含了NavigationDrawer，你可以像这个答案一样使用它：https://stackoverflow.com/a/34921695/4409113

<!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/activity_main_drawer" />

现在，在添加和编辑一些错误后，这应该可以正常工作：

<?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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/root_coorinator"
        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"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <TextView
                    android:id="@+id/toolBarTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textSize="18dp" />

            </android.support.v7.widget.Toolbar>

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


        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="10dp"
            app:elevation="4dp"
            app:fabSize="normal"
            app:layout_anchor="@id/root_coorinator"
            app:layout_anchorGravity="bottom|end|right" />

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

    <!--<ScrollView
        android:id="@+id/drawerList"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/mainTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="main"
                android:textSize="18dp" />

        </LinearLayout>

    </ScrollView>-->

    <!--Don't use it like that, Use NavigationDrawer instead-->
</android.support.v4.widget.DrawerLayout>

另外，您可以单独使用Toolbar，而无需将TextView添加为标题。

此外，您可以在NestedScrollView中使用该布局。

- ʍѳђઽ૯ท

Answer 3

首先，不建议这样做，因为Material Design Style Guide。所以，您应该首先在工具栏布局中定义android:minHeight="?attr/actionBarSize"，然后在NavigationView布局中定义android:layout_marginTop="?attr/actionBarSize"。这是一个技巧。

- user3846697

---

这是一个技巧，没错，但ActionBar仍然在抽屉阴影中，我不想要那个，我怎么可能做到这一点？你还有什么更好的想法吗？非常感谢。 - Mike

@mike 看这个 - user3846697

@milad.molafi，我不想失去阴影。 - Mike

@mike 通过使用minimumHeight和frameLayout的技巧来去掉阴影。 - user3846697