如何使用支持库动画显示和隐藏Android Fragment

Question

我正在尝试在我的活动中显示一个包含菜单的片段，它应该从屏幕的右侧滑入，直到用户再次按按钮或按返回按钮解除它为止，然后它应该滑回到它来的地方，当然，这两个操作都包括一个动画。问题是，片段滑入了，但我无法使它使用动画滑出，它只是突然消失了。我已经阅读了一些类似的帖子，但我没有找到任何适用于我的情况的解决方案。

以下代码应该完成这个工作：

private void showMenuFragment() {

    if (this.frMenu == null) {
        this.frMenu = new MenuFragment();               
        FragmentTransaction transaction = this.getSupportFragmentManager()
                .beginTransaction();                    
        transaction.setCustomAnimations(R.anim.slide_in_right, R.anim.slide_out_right);
        transaction.replace(R.id.fr_side_menu, this.frMenu);
        transaction.addToBackStack(MenuFragment.class.getName());
        transaction.commit();
    }
    else {
        this.frMenu = null;
        this.onBackPressed();
    }       
}

动画效果：

文件 slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromXDelta="100%"
        android:toXDelta="0%" >
    </translate>

</set>

文件 slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0%"
        android:toXDelta="100%" >
    </translate>

</set>

请帮忙！

提前感谢。

- Alejandro Casanova

---

你是如何移除Fragment的？你只是通过onBackPressed()弹出了返回栈吗？ - Sam Dozor

是的，那是正确的。 - Alejandro Casanova

Answer 1

Android文档解释了setCustomAnimations(int enter, int exit)的含义：

当弹出后退栈时，这些动画不会播放。

因此，您必须使用更长的形式，该形式具有额外的参数popEnter和popExit：

transaction.setCustomAnimations(R.anim.slide_in_right, 
                                R.anim.slide_out_right, 
                                R.anim.slide_in_left, 
                                R.anim.slide_out_left);

要让这看起来正确，您可能需要定义slide_in_left和slide_out_left，但这取决于您的目标是什么...

- Sam Dozor

---

如果你尝试使用getSupportFragmentManager().popBackStack()而不是onBackPressed()，会发生什么？ - Sam Dozor

我根据你的回答更新了我的代码，但它仍不能正常工作。当我使用popBackStack时也是如此。animation slide_in_left是：android: fromXDelta =“-100％”到android: toXDelta =“0”，slide_out_left是android: fromXDelta =“100％”到android: fromXDelta =“100％”。它们各自应该做什么？我想这就是我仍然没有理解的地方。谢谢。 - Alejandro Casanova

Answer 2

经过一些研究，我找到了一个非常简单的解决方案，使用完全不同的方法，希望能对某些人有所帮助。

事情是在没有片段的情况下，为包含先前在片段中的信息的布局进行动画化。最初，布局可见性设置为“消失”，并在响应用户操作（如滑动或按按钮）时显示。

这是完整的示例：

1-处理用户操作的活动：

public class MainActivity extends Activity {

    private LinearLayout ll;
    private float startX;
    private Animation animLeft;
    private Animation animRight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ll = (LinearLayout) findViewById(R.id.slider);
        ll.setVisibility(View.GONE);

        animLeft = AnimationUtils.loadAnimation(this, R.anim.anim_left);
        animRight = AnimationUtils.loadAnimation(this, R.anim.anim_right);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            startX = event.getX();
            break;
        }
        case MotionEvent.ACTION_UP: {
            float endX = event.getX();

            if (endX < startX) {
                System.out.println("Move left");
                ll.setVisibility(View.VISIBLE);
                ll.startAnimation(animLeft);
            } 
            else {
                ll.startAnimation(animRight);
                ll.setVisibility(View.GONE);
            }
        }

        }
        return true;
    }

}

2 - 包含滑动“菜单”的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright" >

    <LinearLayout
        android:id="@+id/slider"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="@android:color/darker_gray"
        android:content="@+id/content"
        android:gravity="bottom|center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@id/content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Surviving with android" />
    </LinearLayout>

</RelativeLayout>

- Alejandro Casanova