在添加片段时将动画从汉堡过渡到箭头图标 [英] Transition animation from hamburger to arrow icon on adding fragment

问题描述

我已经实现了主/详细流程，我想在添加片段后获得从汉堡图标到箭头图标的过渡动画（与打开导航抽屉时的动画相同）。

I have implemented master/detail flow and I would like to get transition animation from hamburger icon to arrow icon after adding fragment (the same animation as when opening navigation drawer).

我正在使用如下代码：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    toggle = new ActionBarDrawerToggle(this, drawer, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.setDrawerIndicatorEnabled(true);
    toggle.syncState();

    //Add home page fragment
    FragmentManager fragmentManager = getFragmentManager();
    HabitHomeFragment homePageFragment = new HabitHomeFragment();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.replace(R.id.habit_home, homePageFragment);
    fragmentTransaction.commit();}

同时添加详细信息片段：

While adding details fragment:

public void showDetails() {
        toggle.setDrawerIndicatorEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        fragmentTransaction.replace(R.id.habit_home, habitDetailsFragment).addToBackStack("detail").commit();}

和工具栏：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout> 
....    

当前更改片段后，图标仅更改，没有动画。

Currently after changing fragment the icon is just changed, without animation.

推荐答案

首先解释一下。

1. android.support.v7.app.ActionBarDrawerToggle 使用特殊的可绘制类将汉堡包转换为箭头图标和动画。

1. android.support.v7.app.ActionBarDrawerToggle uses special drawable class for hamburger-to-arrow icons and animation.

该类为 android.support.v7.graphics.drawable.DrawerArrowDrawable

DrawerArrowDrawable 使用方法 setProgress（float progress），其中进度从0（汉堡包）到1（箭头）。

DrawerArrowDrawable implements animation with method setProgress(float progress), where progress is from 0 (hamburger) to 1 (arrow).

ActionBarDrawerToggle使用 private void setPosition（float位置）调用 DrawerArrowDrawable.setProgress（）

ActionBarDrawerToggle uses private void setPosition(float position) that calls DrawerArrowDrawable.setProgress()

ActionBarDrawerToggle使用 public void onDrawerSlide（查看抽屉视图，浮动slideOffset）调用私有 setPosition（）

ActionBarDrawerToggle uses public void onDrawerSlide(View drawerView, float slideOffset) to call private setPosition()

ActionBarDrawerToggle 用其侦听器在构造函数中调用 toolbar.setNavigationOnClickListener（）

ActionBarDrawerToggle calls toolbar.setNavigationOnClickListener() in constructor with it's listener, that is used to toggle drawer.

ActionBarDrawerToggle 跟踪实际的 DrawerArrowDrawable 状态。 工具栏和 ActionBar 不跟踪实际的 DrawerArrowDrawable 状态。 / p>

ActionBarDrawerToggle keep track of actual DrawerArrowDrawable state. Toolbar and ActionBar do not track actual DrawerArrowDrawable state.

因此，您应该在活动中做什么。选项-A，使用ActionBarDrawerToggle。

So, what you should do in activity. Option-A, use ActionBarDrawerToggle.

    // define a variable to track hamburger-arrow state
    protected boolean isHomeAsUp = false;

    protected DrawerLayout drawer;
    protected Toolbar toolbar;
    protected ActionBarDrawerToggle toggle;

    // I've implemented it in setContentView(), but you can implement it in onCreate()
    @Override
    public void setContentView(@LayoutRes int layoutResID) {
        super.setContentView(layoutResID);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.drawer_open, R.string.drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        // overwrite Navigation OnClickListener that is set by ActionBarDrawerToggle
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (drawer.isDrawerOpen(GravityCompat.START)){
                    drawer.closeDrawer(GravityCompat.START);
                } else if (isHomeAsUp){
                    onBackPressed();
                } else {
                    drawer.openDrawer(GravityCompat.START);
                }
            }
        });
    }

    // call this method for animation between hamburged and arrow
    protected void setHomeAsUp(boolean isHomeAsUp){
        if (this.isHomeAsUp != isHomeAsUp) {
            this.isHomeAsUp = isHomeAsUp;

            ValueAnimator anim = isHomeAsUp ? ValueAnimator.ofFloat(0, 1) : ValueAnimator.ofFloat(1, 0);
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    float slideOffset = (Float) valueAnimator.getAnimatedValue();
                    toggle.onDrawerSlide(drawer, slideOffset);
                }
            });
            anim.setInterpolator(new DecelerateInterpolator());
            // You can change this duration to more closely match that of the default animation.
            anim.setDuration(400);
            anim.start();
        }
    }

或者您可以设置 DrawerArrowDrawable 作为带有 toolbar.setNavigationIcon（）的导航图标，并使其动画而不使用 ActionBarDrawerToggle
请参阅选项B： https://stackoverflow.com/a/42024138/1148784

Or you can set a DrawerArrowDrawable as a navigation icon with toolbar.setNavigationIcon() and animate it without ActionBarDrawerToggle See Option-B: https://stackoverflow.com/a/42024138/1148784

这篇关于在添加片段时将动画从汉堡过渡到箭头图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！