如何使用协调器布局在工具栏下方设置抽屉布局

Question

我有一个这样的 xml，当我显示抽屉布局时，它覆盖了Toolbar，我想要我的抽屉布局在我的Toolbar 下面，我不知道该怎么做，我尝试了很多东西，我试过了整天。如何在不重叠 Toolbar 的情况下将 CoordinatorLayout 与 DrawerLayout 一起使用？

这是我的操作栏样式：

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

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>

Answer 2

首先不建议这样做，因为Material Design Style Guide
那么，您应该首先在工具栏布局中定义android:minHeight="?attr/actionBarSize"。之后在 NavigationView 布局中定义 android:layout_marginTop="?attr/actionBarSize"。这是一种诡计。

Answer 3

我认为为时已晚，但您可能想知道问题出在哪里或您能做什么。无论如何。

新的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 中使用该布局。