展开动作视图时的导航抽屉图标（汉堡和箭头）动画 [英] Navigation drawer icons (hamburger & arrow) animation when expand action view

问题描述

我正在使用 AppCompat 和工具栏。

I'm using AppCompat and Toolbar.

当导航抽屉图标从汉堡过渡到箭头或反之时，我确保会出现动画。

I ensure there will be animation, when the navigation drawer icon transits from hamburger to arrow, or vice-verse.

我使用以下技术 https://stackoverflow.com/a/26469738/72437

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

当我按下导航抽屉并滑入&滑出菜单。但是，它不是很有用。根据材料设计指南，导航抽屉的碎片应为全高。因此，当它开始滑出时，它将阻止导航抽屉图标。

Animation happens when I press the navigation drawer, to slide in & slide out the menu. However, it isn't very useful. As according to material design guideline, the navigation drawer fragment should be full height. Hence, it will block the navigation drawer icon, when it starts to slide out.

在处理搜索按钮（ action_search ），用作我的工具栏的操作视图。

I'm more interested to perform animation, when dealing with my search button (action_search), which acts as action view of my toolbar.

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

<?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. 当我按下箭头图标时，箭头图标将动画化为汉堡包图标。

1. When I press action_search, the search icon will expand to AutoCompleteTextView. At the same time, hamburger icon will animate to arrow icon
2. When I press arrow icon, arrow icon will animate back to hamburger icon.

我尝试通过阅读 https://stackoverflow.com/a/26480439/72437

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 ，汉堡图标确实变为箭头图标。但是，没有动画。我可以知道我错过了什么吗？

When I press action_search, hamburger icon does change to arrow icon. However, there's no animation. May I know is there anything I had missed?

我怀疑，导航抽屉，与搜索操作视图使用的左箭头不同。它们是2个不同的实例。

I suspect that, the left arrow used by navigation drawer, is different from the left arrow used by search action view. They are 2 different instances.

这是因为如果单击 action_settings ，则可以观察动画。但是，如果单击 action_search ，我将看不到动画。我怀疑搜索操作视图使用了向左箭头，即阻止导航抽屉的图标（均为汉堡包和箭头）

This is because if I click action_settings, I can observe the animation. However, if I click action_search, I will not observe the animation. I suspect the left arrow used by search action view, "block" navigation drawer's icons (both hamburger & arrow)

推荐答案

I在不展开我自己的自定义SearchView的情况下实现了这种效果。
问题是，汉堡和后退箭头确实有两个单独的按钮。因此，尽管我们可以使用公共方法setHomeAsUpIndicator（）访问汉堡按钮，但只能通过反射来访问后退按钮。然后，我们也只需在其上设置所需的可绘制对象，并在两个按钮可绘制对象上同时播放动画，而不管特定按钮是否可见。这是因为两个按钮都在布局中完全位于同一位置。

I achieved this effect without unrolling my own custom SearchView. The thing is, there are really two separate buttons for burger and back arrow. So, while we can access the burger button with the public method setHomeAsUpIndicator(), the back button can only be reached with reflection. Then we just set the desired drawable on it as well, and play the animation on both button drawables simultaneously irrespective of whether the specific button is visble or not. This works as both buttons are positioned exactly in the same position in the layout.

有关详细信息，请参见帖子 http://choruscode.blogspot.com/2015/09/morphing-animation-for-toolbar-back.html

For details see the post http://choruscode.blogspot.com/2015/09/morphing-animation-for-toolbar-back.html

这篇关于展开动作视图时的导航抽屉图标（汉堡和箭头）动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！