在添加片段

时间:2016-07-12 17:14:49

标签: android android-fragments animation

我已经实现了主/细节流,我希望在添加片段后获得从汉堡包图标到箭头图标的过渡动画(与打开导航抽屉时相同的动画)。

我使用的代码如下:

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();}

添加细节片段时:

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

目前在更改片段后,图标只是更改,没有动画。

2 个答案:

答案 0 :(得分:5)

首先是一些解释。

  1. android.support.v7.app.ActionBarDrawerToggle使用特殊的drawable类来制作汉堡包到箭头的图标和动画。

  2. 该课程为android.support.v7.graphics.drawable.DrawerArrowDrawable

  3. DrawerArrowDrawable使用方法setProgress(float progress)实现动画,其中进度从0(汉堡包)到1(箭头)。

  4. ActionBarDrawerToggle使用调用private void setPosition(float position)的{​​{1}}

  5. ActionBarDrawerToggle使用DrawerArrowDrawable.setProgress()来调用私人public void onDrawerSlide(View drawerView, float slideOffset)

  6. setPosition()在构造函数中使用它的侦听器调用ActionBarDrawerToggle,用于切换抽屉。

  7. toolbar.setNavigationOnClickListener()跟踪实际的ActionBarDrawerToggle州。 DrawerArrowDrawableToolbar不会跟踪实际的ActionBar州。

  8. 那么,你应该在活动中做些什么。选项-A,使用ActionBarDrawerToggle。

    DrawerArrowDrawable

    或者您可以使用 // 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()的情况下为其设置动画 见选项-B:https://stackoverflow.com/a/42024138/1148784

答案 1 :(得分:3)

请参阅我的另一个答案以获得解释https://stackoverflow.com/a/42023946/1148784。这是选项-B。 Activity类的代码。我们这里不使用ActionBarDrawerToggle

    protected boolean isHomeAsUp = false;
    DrawerArrowDrawable homeDrawable;
    protected Toolbar toolbar;
    protected DrawerLayout drawer;

    @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);

        homeDrawable = new DrawerArrowDrawable(toolbar.getContext());
        toolbar.setNavigationIcon(homeDrawable);

        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);
                }
            }
        });
    }

    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();
                    homeDrawable.setProgress(slideOffset);
                }
            });
            anim.setInterpolator(new DecelerateInterpolator());
            anim.setDuration(400);
            anim.start();
        }
    }