导航抽屉（menudrawer）Android 5（棒棒糖）风格

Navigation drawer (menudrawer) Android 5 (lollipop) style

提问by adek

I'm using menudrawer library in my project (this one: https://github.com/SimonVT/android-menudrawer).

我在我的项目中使用 menudrawer 库（这个：https: //github.com/SimonVT/android-menudrawer）。

I'm updating my app to be compatible with API21 (Android 5 Lollipop) and Material Design. When you use this library with API21 menudrawer icon looks bad.

我正在更新我的应用程序以与 API21 (Android 5 Lollipop) 和 Material Design 兼容。当您将此库与 API21 menudrawer 图标一起使用时，它看起来很糟糕。

I want to achieve transition you can see in the new Play Store (new menudrawer icon transition to arrow).

我想实现您可以在新 Play 商店中看到的过渡（新的 menudrawer 图标过渡到箭头）。

What's the best way to do that? Is it possible with this library? The only solution I'm thinking at the moment is custom drawable. But maybe I can use native drawable some way?

这样做的最佳方法是什么？这个库可以吗？我目前正在考虑的唯一解决方案是自定义可绘制。但也许我可以以某种方式使用原生可绘制对象？

回答by adek

OK. I spent few hours with new API and I think that the best for me will be rewriting my drawer from lib to native DrawerLayout.

好的。我在新 API 上花了几个小时，我认为对我来说最好的方法是将我的抽屉从 lib 重写为原生 DrawerLayout。

But maybe this will be useful for someone with similar problem. I've created test project with DrawerLayout (Android Studio -> New Project with menudrawer).

但也许这对有类似问题的人有用。我已经使用 DrawerLayout 创建了测试项目（Android Studio -> 带有 menudrawer 的新项目）。

And then I saw the same problem. Wrong icon. If you want to see fancy animation and good icon for Android 5.0 make sure you are using:

然后我看到了同样的问题。错误的图标。如果您想在 Android 5.0 上看到精美的动画和精美的图标，请确保您正在使用：

import android.support.**v7**.app.ActionBarDrawerToggle;

Take note on v7. By default Fragment class has v4 import and then you won't see good icon.

请注意 v7。默认情况下 Fragment 类具有 v4 导入，然后您将看不到好的图标。

Another thing. After changing to v7 you need to fix ActionBarDrawerTogglefunction to new constructor. And that's it. You'll see new drawer icon.

另一件事。更改为 v7 后，您需要将ActionBarDrawerToggle函数修复为新的构造函数。就是这样。你会看到新的抽屉图标。

回答by nirav kalola

First, make sure you update to latest SDK. Create new Project in Android Studio, then add appcompat-v7.21.0.+ and appcompat-v4.21.0.+ libraries in your buid.gradle as gradle dependency.

首先，确保您更新到最新的 SDK。在 Android Studio 中创建新项目，然后在您的 buid.gradle 中添加 appcompat-v7.21.0.+ 和 appcompat-v4.21.0.+ 库作为 gradle 依赖项。

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

Add primaryColor and primarycolorDark in your color.xml file.

在 color.xml 文件中添加 primaryColor 和 primarycolorDark 。

<resources>
<color name="primaryColor">#2196F3</color>
<color name="primaryColorDark">#0D47A1</color>
</resources>

Add drawer open/close string value in your strings.xml file.

在 strings.xml 文件中添加抽屉打开/关闭字符串值。

<resources>
<string name="app_name">Lollipop Drawer</string>
<string name="action_settings">Settings</string>
<string name="drawer_open">open</string>
<string name="drawer_close">close</string>
</resources>

Your activity_my.xml layout file looks like this:

您的 activity_my.xml 布局文件如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">

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


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

    <!-- activity view -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <TextView
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:textColor="#000"
            android:text="Activity Content"
            android:layout_height="wrap_content" />
    </RelativeLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        android:layout_gravity="left|start"
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="#eee"
            android:background="#fff"
            android:dividerHeight="1dp" />
    </RelativeLayout>

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

</LinearLayout>

Your toolbar.xml layout file looks like this:

您的 toolbar.xml 布局文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content">

</android.support.v7.widget.Toolbar>

Your MyActivity.java looks like this: Here your activity must extends ActionBarActivity and set your toolbar as support actionbar.

您的 MyActivity.java 看起来像这样： 这里您的活动必须扩展 ActionBarActivity 并将您的工具栏设置为支持操作栏。

import android.content.res.Configuration;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MyActivity extends ActionBarActivity {

private Toolbar toolbar;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle drawerToggle;
private ListView leftDrawerList;
private ArrayAdapter<String> navigationDrawerAdapter;
private String[] leftSliderData = {"Home", "Android", "Sitemap", "About", "Contact Me"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    nitView();
    if (toolbar != null) {
        toolbar.setTitle("Navigation Drawer");
        setSupportActionBar(toolbar);
    }
    initDrawer();
}

private void nitView() {
    leftDrawerList = (ListView) findViewById(R.id.left_drawer);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    navigationDrawerAdapter=new ArrayAdapter<String>( MyActivity.this, android.R.layout.simple_list_item_1, leftSliderData);
    leftDrawerList.setAdapter(navigationDrawerAdapter);
}

private void initDrawer() {

    drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);

        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);

        }
    };
    drawerLayout.setDrawerListener(drawerToggle);
}

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

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.my, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    if (drawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}
}

Create style.xml file in values-21 folder for android lollipop

在 android 棒棒糖的 values-21 文件夹中创建 style.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

<style name="myAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="android:statusBarColor">@color/primaryColorDark</item>

    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/black</item>
</style>

</resources>

Create your style.xml file in values folder for older versions then android lollipop

在 values 文件夹中为旧版本创建 style.xml 文件，然后是 android 棒棒糖

<resources>

<style name="myAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/black</item>
</style>

</resources>

Your AndroidManifest.xml is looks like this:

您的 AndroidManifest.xml 如下所示：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="nkdroid.com.lollipopdrawer" >

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/myAppTheme" >
    <activity
        android:name=".MyActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

</manifest>

For reference only: you can download complete source codefrom here : click here

仅供参考：您可以从这里下载完整的源代码：点击这里

回答by Pioneer

Check out the new lollipop components released in May 2015 by Android team.

查看 Android 团队于 2015 年 5 月发布的新棒棒糖组件。

Design Support Library

设计支持库

Blog on Design Support Library

设计支持库博客