棒棒糖商店中的抽屉指示器答案

【问题标题】：Drawer indicator in lollipop play store棒棒糖商店中的抽屉指示器
【发布时间】：2014-10-17 18:10:11
【问题描述】：

我使用的是带有 Android 5.0 预览版的 Nexus 7。

在这个页面上 http://developer.android.com/tools/support-library/index.html

我明白了

v7 appcompat 库的更改：更新 ActionBarDrawerToggle，其中包含菜单到箭头的动画

这是 Google Play 应用使用的吗？我对这个声明读得太多了？我需要更改什么才能获得此行为 - 我在 API 文档中找不到它。

【问题讨论】：

是的，您只需要使用 appcompat-v7 中的 ActionBarDrawerToggle（不是 support-v4 中的旧版本）和默认的向上指示器。

标签： android android-actionbar navigation-drawer android-5.0-lollipop

【解决方案1】：

我在这里发布了一个示例应用程序，它使用新的 Toolbar 类和 ActionBarToggle 来提供带有 Play 商店风格动画图标的 ActionBar：

https://github.com/03lafaye/LollipopDrawerToggle

no-v7-support 分支使用带有框架 Activity 和 Toolbar 的 ActionBarToggle。 master 分支使用 v7 Toolbar 和 ActionBarActivity。

不使用 ActionBarActivity 的设置如下所示：

package com.plafayette.lollipop;

import android.app.Activity;
import android.support.v4.widget.DrawerLayout;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class ToolbarActivity extends Activity {
    private ActionBarDrawerToggle toggle;

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

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

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close);
        toggle.setDrawerIndicatorEnabled(true);
        drawerLayout.setDrawerListener(toggle);
    }

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

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (toggle.onOptionsItemSelected(item))
            return true;

        int id = item.getItemId();
        return id == R.id.action_settings || super.onOptionsItemSelected(item);
    }
}

请注意，您必须像这样禁用主题中的窗口操作栏和标题栏：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

我想最新的 v7 appcompat 库的示例代码将很快发布，从而使这篇文章过时。

Square 的 Chris Renke 发布了向上图标动画的替代反向移植。代码在 GitHub 上：https://github.com/ChrisRenke/DrawerArrowDrawable，他在http://chrisrenke.com/drawerarrowdrawable 写了一篇关于它的博客。

【讨论】：

如何让抽屉图标在选择抽屉项目时不变为后退箭头？我希望图标在所有抽屉片段中保持不变。

【解决方案2】：

这很容易。

您的 DrawerLayout 布局看起来和往常一样。您使用 android.support.v4.widget.DrawerLayout 并创建抽屉和内容区域：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0"
    android:orientation="vertical" >
</RelativeLayout>

<ListView
    android:id="@+id/leftDrawer"
    android:layout_width="290dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#f0f"
    android:choiceMode="singleChoice"
    android:clickable="true"
    android:divider="@null"
    android:dividerHeight="0dp"
    android:scrollbars="none" />

主要更改在您的 java 代码中。在您使用抽屉布局的 Activity 中，您必须从 v7.3 开始为 ActionBarActivity 扩展它。然后为 DrawerLayout 和 ActionBarDrawerToggle 创建变量。您的导入应如下所示：

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.ActionBarActivity;

然后连接一切。请记住，新的抽屉布局没有图标！你只是没有通过它通常应该在的地方。我的活动代码：

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.ActionBarActivity;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle drawerToggle;

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

        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name) {};

        drawerLayout.setDrawerListener(drawerToggle);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    }

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

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

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

}

它应该可以工作。

【讨论】：

是否需要使用兼容性ActionBarActivity？
如果您使用支持库中的Toolbar 小部件和NoActionBar 主题，您也应该使用ActionBarActivity，以使用setActionBar(Toolbar) 方法。如果您想支持旧版本，则在这两种情况下都应该使用。

【解决方案3】：

查看here

MainActivity.java：

package com.poliveira.apps.materialtests;

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity implements NavigationDrawerCallbacks {

    private Toolbar mToolbar;
    private NavigationDrawerFragment mNavigationDrawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        mNavigationDrawerFragment = (NavigationDrawerFragment) getFragmentManager().findFragmentById(R.id.fragment_drawer);
        mNavigationDrawerFragment.setup(R.id.fragment_drawer, (DrawerLayout) findViewById(R.id.drawer), mToolbar);
    }

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

    @Override
    public void onNavigationDrawerItemSelected(int position) {
        Toast.makeText(this, "Menu item selected -> " + position, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onBackPressed() {
        if (mNavigationDrawerFragment.isDrawerOpen())
            mNavigationDrawerFragment.closeDrawer();
        else
            super.onBackPressed();
    }
}

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbar_actionbar"
        layout="@layout/toolbar_default"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_actionbar">

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:clickable="true"
            android:layout_height="match_parent"/>

        <!-- android:layout_marginTop="?android:attr/actionBarSize"-->
        <fragment
            android:id="@+id/fragment_drawer"
            android:name="com.poliveira.apps.materialtests.NavigationDrawerFragment"
            android:layout_width="@dimen/navigation_drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:layout="@layout/fragment_navigation_drawer"/>
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

【讨论】：

在我看来这是这个问题的最佳答案，用干净的项目链接直接进入重点
如果您需要从这个活动转移到另一个活动，您是否需要使用相同的布局和相同的类实现？例如，如果我想在新活动中显示操作栏，是否需要将新活动扩展为基于操作栏？
@Maya 我没听懂你。你必须以正确的方式实施才能得到预期的结果
对不起，我没有很好地解释自己 :) 我已经按原样实现了上面的 ActionBar 代码，它运行良好，正是我想要的，然后我尝试在多个活动中使用它而不重新创建我使用的每个活动布局中的 ActionBar，所以我创建了一个包含操作栏实现的 BaseActivity，并且我扩展了所有活动以使用 BaseActivity，但是每次从一个活动跳转到另一个活动时，我都会遇到初始化片段的问题。不确定是否有使用 ActionBar 进行多项活动的示例。
我不知道我能不能把代码贴在这里或者PM你在哪里

【解决方案4】：

当我读到它时，你似乎有一个工作抽屉，如果没有，Documentation on "Creating a Navigation Drawer" 相当不错。

更新了 ActionBarDrawerToggle，其中包含菜单到箭头的动画

以上引用指的是Create a new ActionBarDrawerToggle with arrow and hamburger menucommit。作为相关的：setDrawerIndicatorEnabled 被添加到Add ability to disable drawer indicator in new ArrowDrawer。

所以请确保setDrawerIndicatorEnabled 没有被false 调用并使用

import android.support.v7.app.ActionBarDrawerToggle;

而不是

import android.support.v4.app.ActionBarDrawerToggle;

无论如何，从弃用警告中应该很明显：

@deprecated 请在 support-v7-appcompat 中使用 ActionBarDrawerToggle。

可能还需要

// <item name="displayOptions">showHome|homeAsUp</item>
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

【讨论】：

【解决方案5】：

首先，确保您更新到最新的 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'

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

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

在您的 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>

您的 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>

您的 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>

您的 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);
}
}

在 values-21 文件夹中为 android lollipop 创建 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>

在旧版本的值文件夹中创建你的 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>

您的 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>

仅供参考：你可以从这里下载完整的源代码：click here

【讨论】：