使用 FragmentTransaction 隐藏另一个片段后，在 Android 中为剩余片段设置动画

Question

我在 Android 上遇到了一个 UI 挑战，应该很容易解决，但我仍然很难。

我有一个RelativeLayout，里面有两个水平布局的片段，就像主从流一样。现在，当细节发生问题时，我有理由隐藏 Master-fragment，使 Detail-fragment 全屏显示。

当我使用 FragmentTransaction 隐藏 Master-fragment 时，在动画之后，Detail-fragment 立即捕捉到它现在新的可用宽度。所以总而言之，它只为隐藏部分设置动画，我可以理解，但只有隐藏看起来并不流畅。你会期望剩下的视图，它的上下文，也可以动画来给人一种正确的印象。

我也尝试了自定义动画，方法是在两个片段上使用 fragment.getView()。尽管 x-translation 部分运行良好，但我在细节片段的新宽度方面遇到了问题。当它向左移动时，它的大小应该向右扩展。但相反，它会创建每个动画帧的部分快照，而不是显示流畅的 UI。我还怀疑使用 FragmentTransactions 应该很容易做到这一点。

这是我使用示例 iOS 应用制作的快速 GIF，用于说明我想要实现的目标。注意细节部分是如何随着主人隐藏/显示而增长/收缩的。

https://imgflip.com/gif/r8oui

我在活动中的布局：

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

    <fragment android:name="nl.test.slideit.SplitActivityFragment"
        android:id="@+id/fragment_menu"
        tools:layout="@layout/fragment_menu"
        android:layout_width="240dp"
        android:layout_height="match_parent" />

    <fragment android:name="nl.test.slideit.DetailFragment"
        android:id="@+id/fragment_detail"
        tools:layout="@layout/fragment_menu"
        android:layout_toRightOf="@id/fragment_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

还有我的 FragmentTransaction：

FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out, android.R.animator.fade_in, android.R.animator.fade_out);
if (menuFragment.isHidden()) {
      transaction.show(menuFragment);
} else {
      transaction.hide(menuFragment);
}    
transaction.commit();

Answer 1

已经过了几天，我想出了一个涉及自定义动画的可行解决方案。这相当简单，但我想我很惊讶我无法让 FragmentTransaction 更灵活。

在任何地方，这是我在问题中描述的切换状态的方法。它在一个相对布局中需要 2 个片段。在我的实际项目中，我将所有逻辑都包装在自定义类 SplitViewLayout 中，扩展了 RelativeLayout，因此我的活动和片段不会被它们不负责的代码弄乱。

public void toggle() {
    int animationTime = 300;
    int masterTargetX;
    int detailTargetLeftMargin;
    if (masterIsHidden) {
        masterTargetX = 0;
        detailTargetLeftMargin = (int) getResources().getDimension(R.dimen.master_width);
        masterIsHidden = false;
    } else {
        masterTargetX = 0 - (int) getResources().getDimension(R.dimen.master_width);
        detailTargetLeftMargin = 0;
        masterIsHidden = true;
    }

    final View animatedMasterView = masterFragment.getView();
    ObjectAnimator masterAnimation = ObjectAnimator.ofFloat(animatedMasterView, "x", masterTargetX);
    masterAnimation.setDuration(animationTime);
    masterAnimation.start();

    final View animatedDetailView = detailFragment.getView();
    final RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) animatedDetailView.getLayoutParams();
    ValueAnimator detailAnimation = ValueAnimator.ofInt(params.leftMargin, detailTargetLeftMargin);
    detailAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator)
        {
            params.leftMargin = (Integer) valueAnimator.getAnimatedValue();
            animatedDetailView.requestLayout();
        }
    });
    detailAnimation.setDuration(animationTime);
    detailAnimation.start();
}

这段代码只是为 masterView 的 x 属性设置动画，并为 detailView 的 leftMargin 设置动画。在阅读了此处提到的其中一个条目后，我采用了这种方法：Complete Working Sample of the Gmail Three-Fragment Animation Scenario?

对于想要使用比 FragmentTransaction 提供的更高级动画的人来说，这是一个非常不错的线程，它指向了一些不同的方法。