如何从Android appcompat v7 21库实现DrawerArrowToggle


97

因此,既然发布了Android 5.0,我想知道如何实现动画的操作栏图标。

该库在这里实现它为我好,但由于程序兼容性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>

但是当崩溃时会说颜色类型错误。我想念什么?

Answers:


243

首先,您现在应该知道已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>

然后可以呈现动画。

希望这可以帮到你。


12
我遇到了让汉堡包图标显示的问题。打电话mDrawerToggle.syncState();修好了。
aheuermann 2014年

1
对我来说,getSupportActionBar()返回null。。可能是什么原因?
Ramesh_D 2014年

2
Android Studio说Cannot resolve method setSupportActionBar(android.widget.Toolbar)。我也尝试过android.support.v7.toolbar。有谁知道为什么会这样吗?
pez 2014年

1
我使用setSupportActionBar(mToolbar);并定义了<item name="spinBars">true</item>动画,但是动画不起作用
SweetWisher 2015年

2
如果将工具栏设置为活动的ActionBar,则应使用ActionBarDrawerToggle(Activity,DrawerLayout,int,int)。
Peter Zhao

24

如果您按照创建导航抽屉培训中的建议使用支持的DrawerLayout提供的支持库,则可以使用新添加的android.support。V7 .app.ActionBarDrawerToggle(注:从现在反对的不同。android.support V4 .app.ActionBarDrawerToggle):

关闭抽屉时显示汉堡图标,打开抽屉时显示箭头。当抽屉打开时,它会在这两种状态之间设置动画。

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


我在我的应用程序中使用v4 bc,在api 15之前我不需要支持设备。因此,如果我希望此功能正常工作,我将不得不使用v7 actionbar抽屉开关?如果这样做,我是否不必将所有样式都转换为AppCompat并将片段活动片段转换为动作栏活动等等?或者我可以仅从v7实现抽屉切换。现在,我使用v7查看名片。如果我不支持低于15的api,我应该使用v4吗?我想我需要v7才能查看卡。
比格纳达德2014年

材料设计的所有支持库兼容性都在v7-appcompat中实现,如果要在<5.0设备上支持该样式,建议使用该兼容性。AppCompat是基于v4建立的,因此完全取决于您是否要使用AppCompat。如果您已经在使用FragmentActivity,那么您已经非常接近了-样式上的差异现在很小(主要是将android:属性替换为非命名空间属性)。
ianhanniballake

更新了问题,如果您不介意请看一下
Bignadad 2014年

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

1
@mraviator -yep:更改XML,然后创建并附加v7 ActionBarDrawerToggle。AppCompat制造商的规范答案提供了一个完整的示例,说明如何构造XML。
ianhanniballake 2014年

17

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

主要活动

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>

1
这很完美,但是我不想使用Title,那么我该如何处理呢?因为如果我使用Theme.AppCompat.Light.NoActionBar,它肯定会在getSupportActionBar上
SweetWisher 2015年

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

setSupportActionBar(toolbar); 也评论了。
Thirumalvalavan

9

要回答问题的更新部分:要为抽屉图标/箭头设置样式,您有两个选择:

设置箭头本身的样式

为此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 /工具栏

像这样用您自己的主题(您可能应该从中派生)覆盖全局应用程序主题的android:actionBarThemeactionBarThemefor appcompat)属性ThemeOverlay.Material.ActionBar/ThemeOverlay.AppCompat.ActionBar

<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,而不是股票的动作条的实施(例如,如果您使用的是DrawerLayout- NavigationView- Toolbar组合来实现材料式抽屉效果,即它在半透明的状态栏是可见的),该actionBarTheme属性是obviosly不自动拾取(因为AppCompatActivity默认情况下ActionBar,它应该由照顾),因此对于您的自定义而言Toolbar,不要忘记手动应用主题:

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

- ThemeOverlay.AppCompat.ActionBar如果您在派生主题中设置属性,它将解析为AppCompat的默认值或您的替代值。

附言:关于drawerArrowStyle覆盖和spinBars属性的一些注释-很多资料来源建议将其设置true为获取抽屉/箭头动画。spinBars事实是true 在AppCompat中,它是默认设置(签出Base.Widget.AppCompat.DrawerArrowToggle.Common样式),您完全不必重写actionBarTheme即可使动画正常工作。即使您确实覆盖了动画并将属性设置为false,也可以得到动画,它只是一个不同的,更少扭曲的动画。这里重要的是要使用ActionBarDrawerToggle,这是将精美的动画可绘制对象拉进去的原因。


2

我想更正上面的代码

    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"到抽屉内容的根布局


getSupportActionBar()扩展时如何使用Activity
wzieba 2014年

根本就不能,您必须延长ActionBarActivity
Nitin Misra 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.