安卓5.0的材料设计风格的导航抽屉奇巧 [英] Android 5.0 material design style navigation drawer for KitKat

问题描述

我看到的Andr​​oid推出新的抽屉式导航栏图标，抽屉图标和后退箭头图标。我们如何使用，在奇巧支持的应用程序。见谷歌最新的报亭应用，它拥有最新的导航抽屉的图标和动画版本。我们怎样才能实现呢？

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和新的 ActionBarDrawerToggle 就是在这个图书馆为好。

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

添加的摇篮依赖于你的摇篮文件：

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帖子

<一个href="http://android-developers.blogspot.co.uk/2014/10/appcompat-v21-material-design-for-$p$p.html">The官方Android的博客文章。

如果你想显示的抽屉在工具栏下的状态栏，请参阅<一个href="http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st">this问题。

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/

这篇关于安卓5.0的材料设计风格的导航抽屉奇巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！