如何从Android appcompat v7 21库实现DrawerArrowToggle

所以，现在Android 5.0发布了，我想知道如何实现animation操作栏图标。

这个库在这里实现对我来说很好，但是由于appcompat v7库有它，它如何实现？

库在themes.xml中引用它

<item name="drawerArrowStyle">@style/Widget.AppCompat.DrawerArrowToggle</item> 

在这种风格下

  <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat"> 

UPDATE

我用v7 DrawerToggle实现了这个function。 但是我无法devise它。 请帮忙

我在v7 styles_base.xml中find了它的样式

 <style name="Base.Widget.AppCompat.DrawerArrowToggle" parent=""> <item name="color">?android:attr/textColorSecondary</item> <item name="thickness">2dp</item> <item name="barSize">18dp</item> <item name="gapBetweenBars">3dp</item> <item name="topBottomBarArrowSize">11.31dp</item> <item name="middleBarArrowSize">16dp</item> <item name="drawableSize">24dp</item> <item name="spinBars">true</item> </style> 

我将这添加到我的风格，并没有工作。 也添加到我的attr.xml

 <declare-styleable name="DrawerArrowToggle"> <!-- The drawing color for the bars --> <attr name="color" format="color"/> <!-- Whether bars should rotate or not during transition --> <attr name="spinBars" format="boolean"/> <!-- The total size of the drawable --> <attr name="drawableSize" format="dimension"/> <!-- The max gap between the bars when they are parallel to each other --> <attr name="gapBetweenBars" format="dimension"/> <!-- The size of the top and bottom bars when they merge to the middle bar to form an arrow --> <attr name="topBottomBarArrowSize" format="dimension"/> <!-- The size of the middle bar when top and bottom bars merge into middle bar to form an arrow --> <attr name="middleBarArrowSize" format="dimension"/> <!-- The size of the bars when they are parallel to each other --> <attr name="barSize" format="dimension"/> <!-- The thickness (stroke size) for the bar paint --> <attr name="thickness" format="dimension"/> </declare-styleable> 

但这样做时崩溃并说色彩types错误。 我错过了什么？

Answer 1

首先，你应该知道android.support.v4.app.ActionBarDrawerToggle已经被弃用了。

你必须用android.support.v7.app.ActionBarDrawerTogglereplace它。

这里是我的例子，我使用新的Toolbar来replaceActionBar 。

MainActivity.java

 public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle( this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close ); mDrawerLayout.setDrawerListener(mDrawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); mDrawerToggle.syncState(); } 

styles.xml

 <style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> </style> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">@android:color/white</item> </style> 

您可以阅读AndroidDocument＃DrawerArrowToggle_spinBars上的文档

该属性是实现菜单到箭头animation的关键。

公共静态诠释DrawerArrowToggle_spinBars

转换过程中是否旋转
必须是一个布尔值，“true”或“false”。

所以，你可以设置： <item name="spinBars">true</item> 。

然后可以呈现animation。

希望这可以帮到你。

Answer 2

如果按照创build导航抽屉培训中的build议使用支持库提供的DrawerLayout ，则可以使用新添加的android.support。 v7 .app.ActionBarDrawerToggle （注意：与现在弃用的android.support。v4 .app.ActionBarDrawerToggle不同 ）：

当抽屉closures时显示汉堡图标，抽屉打开时显示箭头。 它在抽屉打开时在这两个状态之间animation。

虽然培训尚未更新以考虑弃用/新类，但您应该可以使用几乎完全相同的代码 – 实现它的唯一区别是构造函数。

Answer 3

我创build了一个具有类似function的小应用程序

主要活动

 public class MyActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer); android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar); ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle( this, drawerLayout, toolbar, R.string.open, R.string.close ) { public void onDrawerClosed(View view) { super.onDrawerClosed(view); invalidateOptionsMenu(); syncState(); } public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); invalidateOptionsMenu(); syncState(); } }; drawerLayout.setDrawerListener(actionBarDrawerToggle); //Set the custom toolbar if (toolbar != null){ setSupportActionBar(toolbar); } getSupportActionBar().setDisplayHomeAsUpEnabled(true); actionBarDrawerToggle.syncState(); } } 

我的XML活动

 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MyActivity" android:id="@+id/drawer" > <!-- The main content view --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" > <include layout="@layout/toolbar_custom"/> </FrameLayout> <!-- The navigation drawer --> <ListView android:layout_marginTop="?attr/actionBarSize" android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#457C50"/> </android.support.v4.widget.DrawerLayout> 

我的自定义工具栏XML

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbar" android:background="?attr/colorPrimaryDark"> <TextView android:text="U titel" android:textAppearance="@android:style/TextAppearance.Theme" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </android.support.v7.widget.Toolbar> 

我的主题风格

 <resources> <style name="AppTheme" parent="Base.Theme.AppCompat"/> <style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primaryDarker</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/white</item> </style> <color name="primary">#457C50</color> <color name="primaryDarker">#580C0C</color> </resources> 

我的风格值-V21

 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="AppTheme.Base"> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> <item name="android:windowSharedElementExitTransition">@android:transition/move</item> </style> </resources> 

Answer 4

要回答您问题的更新部分：要设置抽屉图标/箭头的样式，您有两个select：

样式箭头本身

为此， drawerArrowStyle在您的主题中重写drawerArrowStyle ，如下所示：

 <style name="AppBaseTheme" parent="Theme.AppCompat.Light"> <item name="drawerArrowStyle">@style/MyTheme.DrawerArrowToggle</item> </style> <style name="MyTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="color">@android:color/holo_purple</item> <!-- ^ this will make the icon purple --> </style> 

这可能不是你想要的 ，因为ActionBar本身应该与箭头一致的样式，所以，最有可能的是，你需要选项二：

主题的ActionBar /工具栏

用你自己的主题（你可能应该从ThemeOverlay.Material.ActionBar/ThemeOverlay.AppCompat.ActionBar派生）覆盖全局应用程序主题的android:actionBarTheme actionBarTheme（actionBarTheme for appcompat）属性，如下所示：

 <style name="AppBaseTheme" parent="Theme.AppCompat.Light"> <item name="actionBarTheme">@style/MyTheme.ActionBar</item> </style> <style name="MyTheme.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar"> <item name="android:textColorPrimary">@android:color/white</item> <!-- ^ this will make text and arrow white --> <!-- you can also override drawerArrowStyle here --> </style> 

这里需要注意的一点是，当使用Toolbar而不是库存ActionBar实现来使用自定义布局时（例如，如果您使用DrawerLayout – NavigationView – Toolbar组合来实现在半透明状态栏下可见的Material-style抽屉效果），则actionBarTheme属性显然不是自动拾取的（因为它是由AppCompatActivity为默认的ActionBar所照顾的），所以对于您的自定义Toolbar ，不要忘记手动应用您的主题：

 <!--inside your custom layout with DrawerLayout and NavigationView or whatever --> <android.support.v7.widget.Toolbar ... app:theme="?actionBarTheme"> 

– 这将parsing为AppCompat的默认ThemeOverlay.AppCompat.ActionBar或如果您在派生主题中设置属性覆盖。

PS关于drawerArrowStyle覆盖和spinBars属性的一点评论 – 许多来源build议应该设置为true来获取抽屉/箭头animation。 事情是， spinBars在AppCompat中是默认的（检查Base.Widget.AppCompat.DrawerArrowToggle.Common风格），你根本不需要重写Base.Widget.AppCompat.DrawerArrowToggle.Common来获得animation的工作。 即使您重写animation并将其属性设置为false ，也会获得animation，这只是一个不同的animation。 这里最重要的是使用ActionBarDrawerToggle ，这是拉动花式animation绘制。

Answer 5

我想稍微纠正一下上面的代码

  public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle( this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close ); mDrawerLayout.setDrawerListener(mDrawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); } 

所有其他的事情将保持不变

对于那些有问题的Drawerlayout覆盖工具栏

将android:layout_marginTop="?attr/actionBarSize"添加到抽屉内容的根布局