执行从活动到片段的“共享元素转换”

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


我正在尝试让共享元素为片段转换工作。

项目中有两个 FAB - Feather 和 Plane。“羽化”和“平面”是共享元素。单击“羽化”时,将打开“工作表”对话框,并且“羽化”应以动画形式连接到“平面”对话框。它目前没有这样做,我试图确定原因。

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

谁能告诉我为什么共享元素过渡不起作用?

为了呼应存储库中的内容,有四个重要的文件:

主要活动

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>

工作表对话框

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>

在一个活动和一个片段之间的转换中,是否不可能有一个共享元素?也许只能在活动到活动或片段到片段之间,但不能跨两种类型?也许这就是为什么我无法让它工作的原因?

更新:

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

我现在也尝试过,同时确保两个视图上的两个 transitionName 值都相同。

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


答案 1

快速查看

让我们首先快速回顾一下Android框架如何实现神奇的共享元素过渡

共享元素过渡实际上只是Android框架的谎言之一。事实是,当您进行共享元素转换时,您实际上并没有在它们之间共享任何视图,也就是说,您正在处理两个单独的视图,这是因为每个视图都必须有自己独立的视图树。ActivitiesActivity

哼?!

假设您正在尝试将 由 所标识的视图转换为 in 。该框架的作用是,它首先查找 您的 某些属性,例如 大小 (, ) 和 .然后,它将这些信息传递给 ,将这些属性应用于 ,以便它占据与关闭时完全相同的位置。之后,框架通过反向动画化您的动画来开始过渡。这就是共享视图的错觉是如何创建的。魔法!view_aActivityAview_bActivityBview_awidthheightxyActivityAActivityBview_bview_aActivityAview_bActivityB

演绎

我们可以从上面推断出的是,在开始任何动画之前,必须确保已经创建了 ,否则,这是不可能的。view_bActivityB

使用Fragment

调用将仅计划您的片段事务(片段不会在创建其包含的活动后立即创建)。FragmentTransaction.commit()

因此,在你的情况下,当你被创建时,你的丢失了(如前所述,那是因为它包含的片段还没有被创建)。ActivityBview_b

溶液

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

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

实现此目的的一种方法是将代码更改为类似于以下内容的内容:

活动B

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

片段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;
         }
       });
       ...
    }
}

进一步阅读

活动和片段转换入门


答案 2

您要查找的是此示例:https://github.com/hujiaweibujidao/FabDialogMorph。请注意,您尝试实现的不是标准的Android过渡,您需要基于过渡创建自己的变形过渡。最初,它已经在Plaid中显示,这要归功于Nick Butcher,因此您可以检查它以获取更多提示和背景。ChangeBounds


推荐