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

时间:2015-05-17 09:28:52

标签: android animation

我正在使用AppCompatToolbar

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

我使用以下技术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>

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

在处理我的搜索按钮(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. 当我按箭头图标时,箭头图标将动画回汉堡包图标。
  3. 我尝试在阅读https://stackoverflow.com/a/26480439/72437

    后使用以下代码实现目标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,我将不会观察动画。我怀疑搜索操作视图使用左箭头,&#34;阻止&#34;导航抽屉的图标(包括汉堡包和箭头)

1 个答案:

答案 0 :(得分:1)

我在不展开自己的自定义SearchView的情况下实现了此效果。 事实是,汉堡和后箭有两个单独的按钮。因此,虽然我们可以使用公共方法setHomeAsUpIndicator()访问汉堡按钮,但只能通过反射来访问后退按钮。然后我们也在它上面设置所需的drawable,并同时在两个按钮drawable上播放动画,而不管特定按钮是否可见。这适用于两个按钮完全位于布局中的相同位置。

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