如何从 Android appcompat v7 21 库中实现 DrawerArrowToggle

Posted 2023-04-18

【中文标题】如何从 Android appcompat v7 21 库中实现 DrawerArrowToggle

【英文标题】：How to implement DrawerArrowToggle from Android appcompat v7 21 library

【发布时间】：2014-12-13 14:19:38

【问题描述】：

现在 android 5.0 发布了，我想知道如何实现动画操作栏图标。

这个库 here 对我来说实现得很好，但是既然 appcompat v7 库有它，它怎么实现呢？

库在themes.xml中引用它

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

在这种风格下

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

更新

我使用 v7 DrawerToggle 实现了这一点。但是我无法设置它的样式。请帮忙

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

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

但这样做时会崩溃并显示颜色类型错误。我错过了什么？

【参考方案1】：

首先，您现在应该知道 android.support.v4.app.ActionBarDrawerToggle 已被弃用。

您必须将其替换为 android.support.v7.app.ActionBarDrawerToggle。

这是我的示例，我使用新的 Toolbar 替换 ActionBar。

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上的文档

这个属性是实现菜单到箭头动画的关键。

public static int DrawerArrowToggle_spinBars在过渡期间条形是否应旋转必须是布尔值，“true”或“false”。

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

然后就可以呈现动画了。

希望对你有帮助。

【讨论】：

我在显示汉堡包图标时遇到了问题。调用mDrawerToggle.syncState(); 修复它。

对我来说 getSupportActionBar() 返回 null.. 可能是什么原因？

Android Studio 说Cannot resolve method setSupportActionBar(android.widget.Toolbar)。我也试过android.support.v7.toolbar。有谁知道为什么会这样？

我使用了 setSupportActionBar(mToolbar); 并且还定义了 <item name="spinBars">true</item> 但动画不起作用

如果您将 Toolbar 设置为 Activity 的 ActionBar，则应使用 ActionBarDrawerToggle(Activity, DrawerLayout, int, int)。

【参考方案2】：

如果您使用Creating a navigation drawer training 中建议的DrawerLayout 提供的支持库，则可以使用新添加的android.support.v7.app.ActionBarDrawerToggle（注意：不同于现在已弃用的android.support.v4.app.ActionBarDrawerToggle）：

在抽屉关闭时显示汉堡图标，在抽屉打开时显示箭头。当抽屉打开时，它会在这两种状态之间进行动画处理。

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

【讨论】：

我在我的应用程序中使用 v4，因为我不需要支持 api 15 之前的设备。所以如果我想让它工作，我必须使用 v7 操作栏抽屉切换？如果我这样做了，我是否必须将所有样式转换为 AppCompat 并将片段活动转换为操作栏活动等等？或者我可以只实现 v7 中的抽屉切换吗？现在我使用 v7 来查看卡片。如果我不支持低于 15 的 api，我什至应该使用 v4 吗？而且我想我需要 v7 来查看卡片。

材料设计的所有支持库兼容性都在 v7-appcompat 中实现，如果您想在

如果您不介意看一下，请更新问题

这确实是一个关于样式的完全独立的问题。我建议将该部分作为一个完整的其他问题提交（随时添加带有链接的评论）。

@mraviator - 是的：更改 XML，然后创建并附加 v7 ActionBarDrawerToggle。来自 AppCompat 制造商的 canonical answer 提供了一个完整的示例，您的 XML 应该如何构建。

【参考方案3】：

我创建了一个具有类似功能的小应用程序

主活动

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

我的那个 Activity 的 XML

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    tools:context=".MyActivity"
    android:id="@+id/drawer"
    >

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_
        android:layout_ >
        <include layout="@layout/toolbar_custom"/>
    </FrameLayout>
    <!-- The navigation drawer -->
    <ListView
        android:layout_marginTop="?attr/actionBarSize"
        android:id="@+id/left_drawer"
        android:layout_
        android:layout_
        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_
    android:layout_
    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_
        android:layout_
        />
</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>

【讨论】：

这很完美，但我不想使用 Title 那么我该如何处理呢？因为如果我使用 Theme.AppCompat.Light.NoActionBar，它肯定会在 getSupportActionBar

给我 NULL

我使用了上面的代码。我得到了异常：这个活动已经有一个由 setsupportactionbar(toolbar) 行中的窗口装饰提供的操作栏。我用 getSupportActionBar().hide();之前 setContentView(R.layout.activity_main);现在它正在工作。

setSupportActionBar(工具栏);也评论了。

【参考方案4】：

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

设置箭头本身的样式

为此，请在您的主题中覆盖 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 本身应该与箭头具有一致的样式，因此，您很可能需要选项二：

为操作栏/工具栏设置主题

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

<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 属性显然不会自动拾取（因为默认ActionBar 应该由AppCompatActivity 处理），所以对于您的自定义Toolbar不要忘记手动应用您的主题：

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

-- 这将解析为 AppCompat 的默认 ThemeOverlay.AppCompat.ActionBar 或您在派生主题中设置属性时的覆盖。

PS 关于drawerArrowStyle 覆盖和spinBars 属性的一点评论——许多消息来源建议应将其设置为true 以获得抽屉/箭头动画。问题是，spinBars 它是 AppCompat 中的true 默认（查看Base.Widget.AppCompat.DrawerArrowToggle.Common 样式），您根本不需要覆盖actionBarTheme 来使动画正常工作。即使您确实覆盖它并将属性设置为false，您也会获得动画，这只是一个不同的、不那么扭曲的动画。这里重要的是使用ActionBarDrawerToggle，它会拉入精美的动画drawable。

【参考方案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"添加到抽屉内容的根布局

【讨论】：

当你扩展Activity时你如何使用getSupportActionBar()？

根本不行，必须从ActionBarActivity扩展