java - 从 Activity 到 Fragment 执行 "Shared Element Transition"

Question

我已经做了一个 github 项目，就是这个问题。您可以从这里查看/克隆/构建它:https://git.io/vMPqb

---

我正在尝试让共享元素为 fragment 过渡工作。

项目中有两个 FAB - Feather 和 Plane。 Feather 和 Plane 是共享元素。单击 Feather 时，SheetDialog 被打开，Feather 应该动画到 Plane 对话框。目前它没有这样做，我正在尝试确定原因。

值得注意的是，我在 API 24 上运行它，因此版本 21 以下不支持转换的问题不是问题。

谁能告诉我为什么共享元素转换不起作用？

为了回应 repo 中的内容，有四个重要文件:

主要 Activity

package test.example.fabpop;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.transition.ChangeBounds;
import android.support.transition.Fade;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab_feather;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fab_feather = (FloatingActionButton) findViewById(R.id.initial_fab_feather);
    }

    public void fabClick(View view) {
        SheetDialog dialogFragment = new SheetDialog();

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        // This seemingly has no effect. I am trying to get it to work.
        transaction.addSharedElement(fab_feather, "transition_name_plane");

        dialogFragment.setSharedElementEnterTransition(new ChangeBounds());
        dialogFragment.setSharedElementReturnTransition(new Fade(Fade.OUT));

        dialogFragment.show(transaction, "frag_tag");
    }
}

activity_main.xml 布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="test.example.fabpop.MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:orientation="vertical">
        <TextView
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Transition to a BottomSheetDialogFragment that shares this FAB"
            android:textAlignment="center"/>

        <!--  Feather FAB  -->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/initial_fab_feather"
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:layout_margin="16dp"
            android:layout_gravity="center"
            android:onClick="fabClick"
            android:transitionName="transition_name_feather"
            android:src="@drawable/ic_feather"
            />
    </LinearLayout>


</RelativeLayout>

SheetDialog

package test.example.fabpop;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SheetDialog extends BottomSheetDialogFragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.dialog_sheet, container, false);
    }
}

dialog_sheet.xml 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--  Plane FAB  -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/final_fab_plane"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_margin="16dp"
        android:transitionName="transition_name_plane"
        android:src="@drawable/ic_plane"
        />

</LinearLayout>

在一个 Activity 和一个 Fragment 之间的过渡中不能有一个共享元素吗？也许只有在 Activity 到 Activity 或 Fragment 到 Fragment 之间才有可能，但不能跨越两种类型？也许这就是我无法让它工作的原因？

更新:

我现在尝试添加 <item name="android:windowContentTransitions">true</item>到应用程序的主题。

我现在也在尝试确保两个 View 上的两个 transitionName 值相同。

这些都没有帮助解决问题。

Answer 1

快速回顾

让我们先快速回顾一下android框架是如何实现神奇的Shared Element Transition的。

共享元素转换实际上只是android框架的谎言<​​/strong>之一。事实是，当您进行共享元素转换时，您实际上并没有在 Activity 之间共享任何 View ，也就是说，您正在处理两个单独的 View 那是因为每个 Activity 都必须有自己独立的 View 树。

啊？!

假设您尝试将由 view_a 标识的 View 从 ActivityA 转换为 ActivityB 中的 view_b >。框架所做的是，它首先查找您的 view_a 的某些属性，例如大小(width、height)和位置(x,y) 在 ActivityA 中。然后它将这些信息传递给 ActivityB，在 view_b 上应用这些属性，以便在 ActivityA 时它占据与 view_a 完全相同的位置 被关闭。之后，框架通过将您的 view_b 反向动画到它在 ActivityB 中的外观来开始转换。这就是创建共享 View 的错觉的方式。魔法!

扣除

从上面我们可以推断，在开始任何动画之前，必须确保 view_b 已经在 ActivityB 上创建，否则，这将不可能。

使用 fragment

调用 FragmentTransaction.commit()只会安排您的 fragment 事务( fragment 不会在其包含的 Activity 创建后立即创建)。

因此，在您的情况下，当您的 ActivityB 创建时，您的 view_b 会丢失(如上所述，这是因为尚未创建其包含的 fragment )。

解决方案

确保您的 view_b 在动画开始之前创建。

为此，您必须找到一种方法来告诉框架不要做通常的事情，而是在创建动画之前等待您的信号。

实现这一点的一种方法是将您的代码更改为与此类似的代码:

Activity B

class ActivityB extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        // Tell the framework to wait.
        postponeEnterTransition();
    }
}

fragment B

class FragmentB extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View viewB = getView().findViewById(R.id.view_b);
    sharedview.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
                // Tell the framework to start.
                sharedview.getViewTreeObserver().removeOnPreDrawListener(this);
                getActivity().startPostponedEnterTransition(); 
                return true;
         }
       });
       ...
    }
}

进一步阅读

Getting Started with Activity & Fragment Transitions