如何使DrawerLayout在工具栏下方显示？

Question

如何使抽屉布局位于操作栏/工具栏下方？我正在使用v7:21应用程序兼容库和新的ToolBar视图。

我看到的示例看起来像是：

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

<!-- drawer view -->
<LinearLayout
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start">

    <!-- drawer content -->

</LinearLayout>

<!-- normal content view -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- The toolbar -->
    <android.support.v7.widget.Toolbar  
        android:id="@+id/my_awesome_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <!-- The rest of content view -->

</LinearLayout>  

但是，工具栏将被抽屉隐藏，这使得动画汉堡图标（如v7.ActionBarDrawerToggle）无用，因为它在抽屉下方不可见，但我仍想使用新的ToolBar视图以更好地支持Material主题。

那么如何实现呢？是否可能将DrawerLayout作为非顶层视图?

- user1309971

---

http://www.journaldev.com/12648/navigationview-android - AnupamChugh

@AnupamChugh - 你提供的链接（journaldev.com/12648/navigationview-android）确实是我在寻找的。谢谢！ - SilSur

很高兴它能帮到你，Shore！ - AnupamChugh

Answer 1

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <!-- The toolbar -->
    <android.support.v7.widget.Toolbar  
        android:id="@+id/my_awesome_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

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

        <!-- drawer view -->
        <LinearLayout
            android:layout_width="304dp"
            android:layout_height="match_parent"
            android:layout_gravity="left|start">

            <!-- drawer content -->

        </LinearLayout>

        <!-- normal content view -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">



            <!-- The rest of content view -->

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

</LinearLayout>  

- Alexander Mamutov

---

欢迎来到SO！请在您的答案中添加一些解释。 - Tim Zimmermann

这对我有帮助，一旦实施就显而易见了。工具栏需要放在抽屉布局的上面，而不是里面，然而在Android Developers中，抽屉默认情况下是放在根目录上面作为操作栏的。 - NathofGod

值得注意的是，根据Material Design清单，Google今天发布了http://android-developers.blogspot.com/2014/10/material-design-on-android-checklist.html：“签名元素：如果应用程序使用导航抽屉，则遵循更新的材料设计交互和样式（图7）。抽屉出现在应用栏前面。它还会半透明地出现在状态栏后面。” - Eric Farraro

考虑到按下汉堡图标打开抽屉后的动画效果，清单中的那个项目并不是很有意义。 - iamreptar

我觉得他们会制作一个很好的箭头旋转动画，改变标题和更新菜单，却只是为了被抽屉遮盖掉，有点奇怪。希望他们能解释一下背后的逻辑，而不是只给我们提供指南。 - Chris

Answer 2

当使用自定义工具栏时，我认为你无法这样做。

但是一个解决方法是将抽屉设置一个顶部边距。 （谷歌应用商店上也是同样的情况！）

<!-- drawer view -->
<LinearLayout
    android:layout_marginTop="?attr/actionBarSize"
...

如果你发现了更好的解决方案，也告诉我一声吧 ;)

- EC84B4

---

一种看起来可行的解决方案是重新排列布局，使用LinearLayout作为布局方式，将ToolBar和DrawerLayout作为子视图。 - user1309971

这是更好的解决方案。谢谢，伙计。 - Darshn

非常简单！我觉得这个答案应该被采纳。 - Luis Artola

Answer 3

我的解决方案：使用Android Studio 2.1.2生成模板，选择抽屉式导航模板：

只需要进行三个更改：在NavigationView视图中设置顶部边距，并删除style.xml中的状态栏重叠。

<item name="android:windowDrawsSystemBarBackgrounds">false</item>

android:fitsSystemWindows="false"

布局文件main.xml中设置上边距的方法是获取actionbar高度并作为上边距，具体实现如下：

android:layout_marginTop="?attr/actionBarSize"

<?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="false"
    tools:openDrawer="start">

    <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:layout_marginTop="?attr/actionBarSize"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

- Codelaby

---

“android:windowDrawsSystemBarBackgrounds” 样式设置仅适用于 API 级别 21 及更高版本。我总是在 API 级别 17 的基础上编写我的应用程序。因此，这个解决方案对我不起作用... - SilSur

尝试在values-21/styles.xml中放入值。 - Codelaby

当您将其放入values-21/styles.xml中时，它适用于我的API级别17应用程序，但是系统窗口顶部不再遵循应用程序主题，而是具有黑色背景，这绝对不是我想要的应用程序外观。 我尝试了这个解决方案https://www.journaldev.com/12648/navigationview-android，它对我完美地起作用。 - SilSur

Answer 4

更改抽屉布局样式如下：

RelativeLayout
 ----Toolbar
 ----DrawerLayout
     ---ContentView
     ---DrawerList 

- Mahendran Candy

Answer 5

我发现了一个更简单的解决方案： 设置 DrawerLayout 和 NavigationView 属性：

android:fitsSystemWindows="false"

然后给导航视图设置 marginTop。

"?actionBarSize"

也许在这种情况下，您的状态栏背景将变为透明。在styles.xml中添加相应内容即可。

<item name="android:statusBarColor">@color/colorPrimaryDark</item>

使用属性获取回正常颜色或其他任何你想要的颜色...

- Pemba Tamang

Answer 6

我在使用这个功能时遇到了问题，最终它成功显示了。这是我使用的布局：

<LinearLayout...[add your namespaces, etc]
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:fitsSystemWindows="true">

    <android.support.v7.widget.Toolbar [your custom toolbar] />
    <android.support.v4.widget.DrawerLayout [your drawer layout] />
        <LinearLayout>
            [content here]
        </LinearLayout>
     <android.support.design.widget.NavigationView />
</LinearLayout>

小心移动设计部件，如果一个部件位于错误的根标签下面，你会得到一个

"没有layout_gravity_left"

异常。

- mwieczorek

Answer 7

这里是 Kotlin 的解决方案：

在包含 DrawerLayout 的布局文件中...

• 将 android:keepScreenOn="true" 添加到 DrawerLayout 中
• 将 android:layout_marginTop="?android:attr/actionBarSize" 添加到 NavigationView 中

完整的 XML 代码应该如下所示：

<com.mullr.neurd.Miscellaneous.CustomDrawerLayout
android:id="@+id/clipped_drawer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keepScreenOn="true"
tools:openDrawer="start"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_marginTop="?android:attr/actionBarSize"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</com.mullr.neurd.Miscellaneous.CustomDrawerLayout>

应该就可以了（忽略我的裁剪导航抽屉）。

- Banjoe