如何使用DrawerLayout显示在动作条/工具栏，并在状态栏？ [英] How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?

问题描述

我已经看到了新材料设计的侧面导航规范，您可以显示抽屉在操作栏和状态栏的后面。我怎样才能实现呢？

I've seen in the new material design Side Nav spec that you can display the drawer over the action bar and behind the status bar. How can I implement this?

推荐答案

在框架和支持库中的新功能允许正是这一点。有三个片拼图：

New functionality in the framework and support libs allow exactly this. There are three 'pieces of the puzzle':

1. 使用栏，让你可以嵌入你的动作条到您的看法层次结构。
2. 制作<一个href="https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html">DrawerLayout fitsSystemWindows 使其奠定了后面的系统吧。
3. 禁用 Theme.Material 的正常状态栏着色，使DrawerLayout可以借鉴同去。

1. Using Toolbar so that you can embed your action bar into your view hierarchy.
2. Making DrawerLayout fitsSystemWindows so that it is layed out behind the system bars.
3. Disabling Theme.Material's normal status bar coloring so that DrawerLayout can draw there instead.

我会假设你将使用新的appcompat。

I'll assume that you will use the new appcompat.

首先，你的布局应该是这样的：

First, your layout should look like this:

<!-- The important thing to note here is the added fitSystemWindows -->
<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"
    android:fitsSystemWindows="true">

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

        <!-- We use a Toolbar so that our drawer can be displayed
             in front of the action bar -->
        <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 your content view -->

    </LinearLayout>

    <!-- Your drawer view. This can be any view, LinearLayout
         is just an example. As we have set fitSystemWindows=true
         this will be displayed under the status bar. -->
    <LinearLayout
        android:layout_width="304dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true">

        <!-- Your drawer content -->

    </LinearLayout>

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

然后在你的活动/片段：

Then in your Activity/Fragment:

public void onCreate(Bundled savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Your normal setup. Blah blah ...

    // As we're using a Toolbar, we should retrieve it and set it
    // to be our ActionBar
    Toolbar toolbar = (...) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

    // Now retrieve the DrawerLayout so that we can set the status bar color.
    // This only takes effect on Lollipop, or when using translucentStatusBar
    // on KitKat.
    DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
    drawerLayout.setStatusBarBackgroundColor(yourChosenColor);
}

然后，你需要确保该DrawerLayout是状态栏的后面可见。你可以通过改变自己的价值观-V21主题：

Then you need to make sure that the DrawerLayout is visible behind the status bar. You do that by changing your values-v21 theme:

值-V21 /的themes.xml

<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

请注意： 如果＆LT;片段机器人：名称=fragments.NavigationDrawerFragment＆GT; 用于代替

Note: If a <fragment android:name="fragments.NavigationDrawerFragment"> is used instead of

<LinearLayout
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start"
    android:fitsSystemWindows="true">

    <!-- Your drawer content -->

</LinearLayout>

实际布局，期望的效果就会如果调用来实现在您从 onCreateView C $ C>方法。

the actual layout, the desired effect will be achieved if you call fitsSystemWindows(boolean) on a view that you return from onCreateView method.

@Override
public View onCreateView(LayoutInflater inflater, 
                         ViewGroup container,
                         Bundle savedInstanceState) {
    View rootView = inflater.inflate(
        R.layout.fragment_navigation_drawer, container, false);
    mDrawerListView.setFitsSystemWindows(true);
    return mDrawerListView;
}

这篇关于如何使用DrawerLayout显示在动作条/工具栏，并在状态栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！