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

Posted 2023-04-13

技术标签:

【中文标题】如何使 DrawerLayout 显示在工具栏下方？【英文标题】：How do I make DrawerLayout to display below the Toolbar? 【发布时间】：2014-12-15 08:34:30 【问题描述】：

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

我看到的例子看起来像

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

<!-- drawer view -->
<LinearLayout
    android:layout_
    android:layout_
    android:layout_gravity="left|start">

    <!-- drawer content -->

</LinearLayout>

<!-- normal content view -->
<LinearLayout
    android:layout_
    android:layout_
    android:orientation="vertical">

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

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

</LinearLayout>

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

那么如何实现呢？是否可以将 DrawerLayout 作为非***视图？

【问题讨论】：

journaldev.com/12648/navigationview-android @AnupamChugh - 您在上面提供的链接 (journaldev.com/12648/navigationview-android) 确实是我想要的。谢谢！！很高兴它帮助了你！ 【参考方案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_
android:layout_>

    <!-- The toolbar -->
    <android.support.v7.widget.Toolbar  
        android:id="@+id/my_awesome_toolbar"
        android:layout_
        android:layout_
        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_
    android:layout_>

        <!-- drawer view -->
        <LinearLayout
            android:layout_
            android:layout_
            android:layout_gravity="left|start">

            <!-- drawer content -->

        </LinearLayout>

        <!-- normal content view -->
        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical">



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

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

</LinearLayout>

【讨论】：

欢迎来到 SO！请为您的答案添加一些解释。这是为我做的，一旦实施就显得如此明显。工具栏需要位于抽屉布局的上方而不是内部，但在 Android 开发人员上的抽屉示例中，抽屉位于根部，因为默认情况下操作栏会位于顶部。值得注意的是，根据谷歌今天发布的材料设计清单android-developers.blogspot.com/2014/10/…：“签名元素：如果应用程序使用导航抽屉，它将遵循更新的材料设计交互和样式（图 7）。抽屉出现在应用栏前面。它在状态栏后面也显示为半透明。" 清单中的那一项没有多大意义，因为按下汉堡图标打开抽屉后产生的动画。我也觉得有点奇怪，他们会创建一个漂亮的箭头旋转动画，更改标题并更新菜单，以便它可以被抽屉覆盖......希望他们会解释它背后的逻辑，而不是给我们提供指导......【参考方案2】：

我不认为你可以在使用 custom toolbar

但解决方法是将top_margin 设置为抽屉。（在 google play store 上也是一样！）

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

如果你找到更好的解决方案也告诉我；）

【讨论】：

一种似乎可行的解决方案是重新排序布局，使用 LinearLayout 作为布局，将 ToolBar 和 DrawerLayout 作为子级。这是更好的解决方案。谢谢老哥太简单了！我觉得这应该是公认的答案。【参考方案3】：

如下改变你的抽屉布局样式

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

【讨论】：

【参考方案4】：

我的解决方案：使用 Android Studio 2.1.2 生成模板，抽屉模板：

只需要三处改动：在视图NavigationView中设置margin top，在style.xml中删除overloap statusbar

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

android:fitsSystemWindows="false"

layout main.xml set margin top get size actionbar value 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_
    android:layout_
    android:fitsSystemWindows="false"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_
        android:layout_ />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_
        android:layout_
        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>

【讨论】：

false 样式设置仅适用于 API 级别 21 及更高级别。我总是在 API 级别 17 的基础上编写我的应用程序。所以这个解决方案对我不起作用...... 尝试放入 values-21/styles.xml 当您将其放入 values-21/styles.xml 时，它适用于我的 API 级别 17 应用程序，但随后系统窗口的顶部不再遵循应用程序主题，而是有一个黑色背景，这绝对不是我想要的应用程序外观。我尝试了这个解决方案 journaldev.com/12648/navigationview-android，它非常适合我。【参考方案5】：

我在让它工作时遇到了问题，它终于正确显示了。这是我使用的布局：

<LinearLayout...[add your namespaces, etc]
  android:layout_
  android:layout_
  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”

异常。

【讨论】：

【参考方案6】：

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

android:fitsSystemWindows="false"

然后将 marginTop 赋予导航视图

"?actionBarSize"

也许你的状态栏背景会在styles.xml add中变得透明

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

属性恢复正常颜色或者你想要的任何其他颜色...

【讨论】：

【参考方案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_
android:layout_
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_
        android:layout_ />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_
        android:layout_
        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>

应该这样做（忽略我剪裁的导航抽屉）。

【讨论】：

以上是关于如何使 DrawerLayout 显示在工具栏下方？的主要内容，如果未能解决你的问题，请参考以下文章

使用 DrawerLayout 实现 Material Design风格的侧滑

让 DrawerLayout 在 ActionBar 上滑动

使用 Google 设计库时如何使工具栏卡入视图或隐藏？

如何使内容出现在固定的 DIV 元素下方？

Default.png 显示在状态栏区域下方，想要使其全屏显示

如何仅使用 html 和 css 使 <options> 显示在 <select> 下拉标题下方