Android 棒棒糖游戏商店中的抽屉指示器

Question

提问by Jason Hocker

I am using a Nexus 7 with the Android 5.0 preview build.

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

On this page http://developer.android.com/tools/support-library/index.html

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

I see

我懂了

Changes for v7 appcompat library: Updated ActionBarDrawerToggle, which contains the menu-to-arrow animation

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

Is this what the Google Play app uses? Am I reading too much into this statement? What do I need to change to get this behavior - I can't find it in the API documentation.

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

Answer 1

回答by Pierre-Antoine LaFayette

I've posted a sample app here that uses the new Toolbar class and ActionBarToggle to provide an ActionBar with the Play Store style animating icon:

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

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

The no-v7-support branch uses the ActionBarToggle with a framework Activity and Toolbar. The master branch uses the v7 Toolbar and an ActionBarActivity.

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

The setup for not using an ActionBarActivity looks like this:

不使用 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);
    }
}

Note that you have to disable the window actionbar and title bar in your theme like so:

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

<?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>

I imagine the sample code for the latest v7 appcompat library will be released soon enough making this post obsolete.

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

Chris Renke from Square published an alternate backport of the up icon animation. The code is on GitHub here: https://github.com/ChrisRenke/DrawerArrowDrawableand he wrote a blog about it at http://chrisrenke.com/drawerarrowdrawable.

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

Answer 2

回答by Damian Piwowarski

It is very easy.

这很容易。

Your layout with DrawerLayout looks the same as always. You use android.support.v4.widget.DrawerLayout and create drawers and content area:

你的 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" />

Main changes are in your java code. In your Activity, where you use drawer layout, you have to extend it for ActionBarActivity from v7. Then you create variables for DrawerLayout and ActionBarDrawerToggle. Your imports should look like this:

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

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

and then just connect everything. Remember that new drawer layout does not have icon! You just dont pass it where you normally should be. Code for my activity:

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

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

}

And it should work.

它应该工作。

Answer 3

回答by Steve

Check out here

在这里查看

enter image description here

在此处输入图片说明

MainActivity.java:

主活动.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:

活动_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>

Answer 4

回答by TWiStErRob

You seem to have a working drawer as I read it, if not, the Documentation on "Creating a Navigation Drawer"is pretty good.

当我读到它时，您似乎有一个可以工作的抽屉，如果没有，“创建导航抽屉”的文档非常好。

Updated ActionBarDrawerToggle, which contains the menu-to-arrow animation

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

enter image description here

在此处输入图片说明

The above quote refers to Create a new ActionBarDrawerToggle with arrow and hamburger menucommit. As a related one: setDrawerIndicatorEnabledwas added in Add ability to disable drawer indicator in new ArrowDrawer.

上面的引用是指使用箭头和汉堡菜单提交创建一个新的 ActionBarDrawerToggle。作为相关的一个：setDrawerIndicatorEnabled在添加功能中添加了在新的 ArrowDrawer 中禁用抽屉指示器。

So make sure setDrawerIndicatorEnabledis not called with falseand use

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

import android.support.v7.app.ActionBarDrawerToggle;

instead of

代替

import android.support.v4.app.ActionBarDrawerToggle;

which should be pretty obvious from deprecation warnings anyway:

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

@deprecated Please use ActionBarDrawerToggle in support-v7-appcompat.

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

Probably also need

大概还需要

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

Answer 5

回答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

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

Android 棒棒糖游戏商店中的抽屉指示器

提问by Jason Hocker

回答by Pierre-Antoine LaFayette

回答by Damian Piwowarski

回答by Steve

回答by TWiStErRob

回答by nirav kalola

相关推荐

最近更新

标签

Android 棒棒糖游戏商店中的抽屉指示器

提问by Jason Hocker

回答by Pierre-Antoine LaFayette

回答by Damian Piwowarski

回答by Steve

回答by TWiStErRob

回答by nirav kalola

相关推荐

Cocos2d-x android 无法解析 coscos2dx 库

Android 处理多个表的最佳实践

android.graphics.drawable.ColorDrawable 不能转换为 android.support.v7.widget.RoundRectDrawableWithShadow

Android 是否可以检查通知是否可见或已取消？

相关推荐

最近更新

标签