适用于 KitKat 的 Android 5.0 Material Design 风格导航抽屉 [英] Android 5.0 material design style navigation drawer for KitKat

问题描述

我看到 Android 引入了新的导航抽屉图标、抽屉图标和后退箭头图标.我们如何在 Kitkat 支持的应用程序中使用它.查看 Google 最新版 Newsstand 应用程序，其中包含最新的导航抽屉图标和动画.我们如何实施?

I see that Android introduced new navigation drawer icons, drawer icon and back arrow icon. How can we use that in Kitkat supported apps. See Google's latest version of Newsstand app, which has the latest navigation drawer icons and animations. How can we implement that?

我曾尝试将 minSDK 设置为 19 并将 complileSDK 设置为 21，但它使用的是旧样式图标.这是自我实现的吗?

I have tried setting the minSDK to 19 and complileSDK to 21 but it's using the old style icons. Is that self implemented?

推荐答案

您需要使用 appcompat v21 中的新 Toolbar 以及该库中的新 ActionBarDrawerToggle.

You need to use the new Toolbar in the appcompat v21 and the new ActionBarDrawerToggle that is in this library as well.

将 gradle 依赖项添加到您的 gradle 文件中:

Add the gradle dependency to your gradle file:

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

你的 activity_main.xml 布局看起来像这样:

Your activity_main.xml layout would look something like that:

<!--I use android:fitsSystemWindows because I am changing the color of the statusbar as well-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true">

    <include layout="@layout/toolbar"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Main layout -->
        <FrameLayout
            android:id="@+id/main_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Nav drawer -->
        <fragment
            android:id="@+id/fragment_drawer"
            android:name="com.example.packagename.DrawerFragment"
            android:layout_width="@dimen/drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="left|start" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

您的工具栏布局如下所示:

Your Toolbar layout would look something like that:

<?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"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"/>

您的活动必须来自:

ActionBarActivity

当您在活动中找到您的视图(抽屉和工具栏)时，将工具栏设置为支持操作栏并设置 setDrawerListener:

When you find your views (drawer and toolbar) in the activity the set the toolbar as the support action bar and set the setDrawerListener:

setSupportActionBar(mToolbar);
mDrawerToggle= new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.app_name, R.string.app_name);
mDrawerLayout.setDrawerListener(mDrawerToggle);

之后你只需要处理菜单项和 drawerToogle 状态:

After that you just need to take care of the menu items and drawerToogle state:

 @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = new MenuInflater(this);
    inflater.inflate(R.menu.menu_main,menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public void onBackPressed() {
    if(mDrawerLayout.isDrawerOpen(Gravity.START|Gravity.LEFT)){
        mDrawerLayout.closeDrawers();
        return;
    }
    super.onBackPressed();
}

实现与工具栏之前的一样，您可以免费获得箭头动画.没有头痛.更多信息请关注:

The implementation is the same as It was before the Toolbar and you receive the arrow animation for free. No headaches. For more information follow:

• 文档.

ChrisBanes 帖子

安卓官方博文.

如果要在工具栏上方和状态栏下方显示抽屉，请参考这个问题.

If you want to display the drawer over the Toolbar and under the status bar, please refer to this question.

使用支持设计库中的 NavigationView.在此处学习如何使用的教程:http://antonioleiva.com/navigation-view/

Use NavigationView from the support design library. Tutorial to learn how to use in here: http://antonioleiva.com/navigation-view/

这篇关于适用于 KitKat 的 Android 5.0 Material Design 风格导航抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！