顶部 ActionBar 上的 Android 导航抽屉

Android Navigation Drawer on top ActionBar

提问by lemycanh

I'm trying to make the navigation drawer over the action bar when it was slide to the right like this app: [Removed]

当它像这个应用程序一样向右滑动时，我试图在操作栏上制作导航抽屉：[已删除]

This is my main activity's layout:

这是我的主要活动的布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout ...>
    <RelativeLayout android:orientation="vertical" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">
        ...
    </RelativeLayout>
    <fragment android:name="com...." 
        android:layout_gravity="start" 
        android:id="@id/navigation" 
        android:layout_width="@dimen/navigation_menu_width" 
        android:layout_height="fill_parent" />
</android.support.v4.widget.DrawerLayout>

Some other questions on stackoverflow are similar such as this questionbut all answers are recommend to use sliding menu lib. But this app they still use android.support.v4.widget.DrawerLayout and they succeed. Don't ask me how I know they use the standard navigation drawer but I sure about it.

stackoverflow 上的其他一些问题与此问题类似， 但建议所有答案都使用滑动菜单库。但是这个应用他们仍然使用 android.support.v4.widget.DrawerLayout 并且他们成功了。不要问我怎么知道他们使用标准导航抽屉，但我确定。

Would be really appreciate for your helps.

非常感谢您的帮助。

---

---

HERE IS THE FINAL SOLUTION: many thanks to @Peter CaiTHIS WORKS PERFECTLY. https://github.com/lemycanh/DrawerOnTopActionBar

这是最终解决方案：非常感谢@Peter Cai，这非常有效。 https://github.com/lemycanh/DrawerOnTopActionBar

采纳答案by Peter Cai

I have a tiny "trick" learnt from https://github.com/jfeinstein10/SlidingMenuto implement the effect you required.

我从https://github.com/jfeinstein10/SlidingMenu学到了一个小“技巧”来实现你需要的效果。

You only need to remove the first child of the window's decor view, and add the first child to your drawer's content view. After that, you only need to add your drawer to the window's decor view.

您只需要删除窗口装饰视图的第一个子项，并将第一个子项添加到抽屉的内容视图中。之后，您只需要将抽屉添加到窗口的装饰视图中。

Below is some detailed steps for you to do that.

下面是一些详细的步骤，供您执行此操作。

First, create a xml named "decor.xml" or anything you like. Only put the DrawerLayout and the drawer in. The "FrameLayout" below is just a container. We will use it to wrap your activity's content.

首先，创建一个名为“decor.xml”或您喜欢的任何名称的 xml。只把DrawerLayout和抽屉放进去。下面的“FrameLayout”只是一个容器。我们将使用它来包装您的活动内容。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout ...>
    <FrameLayout android:id="@+id/container"
        android:orientation="vertical" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"/>
    <fragment android:name="com...." 
        android:layout_gravity="start" 
        android:id="@id/navigation" 
        android:layout_width="@dimen/navigation_menu_width" 
        android:layout_height="fill_parent" />
</android.support.v4.widget.DrawerLayout>

and then remove the DrawerLayout in your main layout. Now the layout of your main activity should look like

然后删除主布局中的 DrawerLayout。现在你的主要活动的布局应该是这样的

<RelativeLayout android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">
    ...
</RelativeLayout>

we assume that the main activity's layout is named "main.xml".

我们假设主要活动的布局被命名为“main.xml”。

in your MainActivity, write as the following:

在您的 MainActivity 中，编写如下：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // Inflate the "decor.xml"
    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    DrawerLayout drawer = (DrawerLayout) inflater.inflate(R.layout.decor, null); // "null" is important.

    // HACK: "steal" the first child of decor view
    ViewGroup decor = (ViewGroup) getWindow().getDecorView();
    View child = decor.getChildAt(0);
    decor.removeView(child);
    FrameLayout container = (FrameLayout) drawer.findViewById(R.id.container); // This is the container we defined just now.
    container.addView(child);

    // Make the drawer replace the first child
    decor.addView(drawer);

    // Do what you want to do.......

}

Now you've got a DrawerLayout which can slide over the ActionBar. But you might find it covered by status bar. You might need to add a paddingTop to the Drawer in order to fix that.

现在你有了一个可以在 ActionBar 上滑动的 DrawerLayout。但是您可能会发现它被状态栏覆盖。您可能需要向 Drawer 添加 paddingTop 以解决该问题。

回答by Richard Lindhout

UPDATE: How to overlay the actionbar with nav drawer. (With the new Toolbar) Use these in your dependencies in your build.gradle

更新：如何用导航抽屉覆盖操作栏。（使用新工具栏）在 build.gradle 的依赖项中使用这些

compile 'com.android.support:appcompat-v7:21.0.0'
compile 'com.android.support:support-v4:21.0.0'

This as your drawerlayout

这是你的抽屉布局

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/layout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <include layout="@layout/toolbar"/>
    <!-- As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"/>

    </LinearLayout>
    <fragment android:id="@+id/navigation_drawer"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/list_background"
         />

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

Make new toolbar.xml file in your layout folder.

在您的布局文件夹中创建新的 toolbar.xml 文件。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

Go to you activity which extend the navigation drawer. and add this after SetContentView()

转到扩展导航抽屉的活动。并在 SetContentView() 之后添加它

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Don't forget to extend your theme NoActionBar in your values folder.

不要忘记在您的值文件夹中扩展您的主题 NoActionBar。

<style name="Theme.Whtsnxt" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <!-- colorPrimary is used for the default action bar background -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:textColorPrimary">@color/white</item>
    <item name="colorPrimary">@color/splashscreen</item>
    <item name="colorPrimaryDark">@color/holo_blue_light</item>

    <item name="android:windowBackground">@color/white</item>
    <item name="android:colorBackground">@color/white</item>

</style>

回答by fupduck

If you do not want to use a lib or this hack:

如果您不想使用 lib 或此 hack：

1. Extend "Theme.AppCompat.NoActionBar"
2. Move the first Element of your DrawerLayout into a LinearLayout.

3. Add a Toolbar to this LinearLayout.

   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:minHeight="?attr/actionBarSize"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:titleTextColor="@android:color/white"
       android:background="?attr/colorPrimary">
   </android.support.v7.widget.Toolbar>
   

4. in Activity add following line after setContentView

   setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
   

5. now it should work.

1. 扩展“Theme.AppCompat.NoActionBar”
2. 将 DrawerLayout 的第一个 Element 移动到 LinearLayout 中。

3. 向此 LinearLayout 添加一个工具栏。

   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:minHeight="?attr/actionBarSize"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:titleTextColor="@android:color/white"
       android:background="?attr/colorPrimary">
   </android.support.v7.widget.Toolbar>
   

4. 在 Activity 中，在 setContentView 之后添加以下行

   setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
   

5. 现在它应该工作了。

回答by Andranik

I have posted a trick that makes this possible in prior Android L versions. You can find my solution in this post. Hope it can be useful to someone.

我已经发布了一个技巧，可以在之前的 Android L 版本中实现这一点。你可以在这篇文章中找到我的解决方案 。希望它对某人有用。