展开动作视图时的导航抽屉图标(汉堡包和箭头)动画

4

我正在使用 AppCompatToolbar

我确保在导航抽屉图标从汉堡包转换为箭头或反之亦然时,会有动画效果。

我使用以下技术:https://dev59.com/iV8d5IYBdhLWcg3wxUfC#26469738

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <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>

</resources>

当我点击导航抽屉时,会出现动画效果来滑入和滑出菜单。但是,这并不是很有用。根据材料设计指南,导航抽屉片段应该是全高度的。因此,在开始滑出时,它会阻挡导航抽屉图标。
我更感兴趣的是在处理我的搜索按钮(action_search)时执行动画,它作为我的工具栏操作视图。

main_menu.xml

<item android:id="@+id/action_search"
    android:title="Search me"
    android:icon="@drawable/ic_add_white_24dp"
    app:showAsAction="always|collapseActionView"
    app:actionLayout="@layout/collapsible_searchtext" />

<item android:id="@+id/action_settings" android:title="@string/action_settings"
    android:orderInCategory="100" app:showAsAction="never" />

collapsible_searchtext.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >
    <android.widget.AutoCompleteTextView
        android:id="@+id/search"
        android:dropDownWidth="match_parent"
        android:completionThreshold="1"
        android:inputType="textNoSuggestions"
        android:imeOptions="actionSearch|flagNoExtractUi"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true"
        android:hint="Search stock"
        android:layout_gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>
  1. 当我点击action_search时,搜索图标将展开为AutoCompleteTextView同时,汉堡图标将动画变为箭头图标
  2. 当我点击箭头图标时,箭头图标将动画变回汉堡图标。

我尝试通过阅读https://dev59.com/noTba4cB1Zd3GeqP6HPw#26480439后使用以下代码来实现目标1。

private void animateHamburgerToArrow() {
    ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float slideOffset = (Float) valueAnimator.getAnimatedValue();
            actionBarDrawerToggle.onDrawerSlide(drawerLayout, slideOffset);
        }
    });
    anim.setInterpolator(new DecelerateInterpolator());
    // You can change this duration to more closely match that of the default animation.
    anim.setDuration(500);
    anim.start();
}

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

    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        animateHamburgerToArrow();
        return true;
    } else if (id == R.id.action_search) {
        animateHamburgerToArrow();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

当我按下 'action_search' 按钮时,汉堡图标确实变成了箭头图标。但是,没有动画效果。请问我是否有什么遗漏的地方?
更新:
我怀疑导航抽屉所使用的左箭头和搜索操作视图所使用的左箭头不同。它们是两个不同的实例。
这是因为如果我点击 "action_settings",我可以观察到动画。然而,如果我点击 "action_search",我将无法观察到动画。我怀疑搜索操作视图使用的左箭头会 "阻止" 导航抽屉的图标(汉堡和箭头)。

你能解决这个问题吗?我也遇到了同样的问题。 - user2056563
我仍在实验中。我的主要参考是https://dev59.com/Kl4c5IYBdhLWcg3wv8pm#27680449。关键思想是避免`app:actionViewClass`的默认行为。相反,我们创建自己的自定义视图并拥有自己的自定义代码,以在工具栏中显示自定义视图。我仍在尝试中https://github.com/yccheok/toolbar-experiment(未完成的工作)。但是,我认为@Mike给出的方向相当不错。 - Cheok Yan Cheng
好的,我正在研究这个问题,如果我成功了,我会告诉你。 - user2056563
1个回答

1
我没有使用自定义的SearchView就实现了这种效果。事实上,汉堡和返回箭头有两个独立的按钮。因此,虽然我们可以通过公共方法setHomeAsUpIndicator()访问汉堡按钮,但只能通过反射访问返回按钮。然后,我们也在其上设置所需的可绘制对象,并同时播放两个按钮可绘制对象的动画,无论特定按钮是否可见。这是有效的,因为两个按钮在布局中的位置完全相同。
有关详细信息,请参见http://choruscode.blogspot.com/2015/09/morphing-animation-for-toolbar-back.html

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接