在我们潜入之前...

Question

我刚刚提出了一个github项目。您可以在此处查看/克隆/构建它：https://git.io/vMPqb

我正在尝试让共享元素用于片段转换。

项目中有两个FAB - 羽毛和飞机。羽毛和飞机是共享元素。单击“羽化”时，将打开“SheetDialog”，“羽化”应为“平面”对话框设置动画。目前它没有这样做，我试图确定原因。

值得注意的是，我在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>

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和一个片段之间的转换中是否不可能有共享元素？也许只有在Activity to Activity或Fragment to Fragment之间才有可能，但两种类型之间不是这样？也许这就是我无法让它发挥作用的原因？

更新

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

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

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

Answer 1

在我们潜入之前...

让我们首先重点介绍一下有关android框架如何进行神奇共享元素转换的一些观点。

共享元素转换只是android框架的谎言之一。当您进行共享元素转换时，您实际上并未在您的活动之间共享任何视图，例如，每个活动都有一个独立的视图树。

假设您尝试将element标识的element1从Activity1转换为element2中的Activity2。

该框架的作用是查找某些信息，例如{width，height）的大小（x，y）和element1，Activity1） Activity2中的{1}}。然后，它会将这些信息传递给element2，将其应用于element2并通过反向设置Activity2的动画来启动活动转换，从而创建共享元素的错觉。

但是，这需要创建view，在启动任何动画之前找到与element2对应的Fragment。

在使用FragmentTransaction.commit()的情况下，调用Activity2只会安排您的片段交易（片段不会立即创建），所以当您element2创建时element2缺失（正如所解释的那样，因为它的包含片段还没有被创建）。

解决方案

确保在动画开始前创建class Activity2 extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { // ... // Tell the framework to wait. postponeEnterTransition(); } }。因此，您必须找到一种方法来告诉框架不要执行常规操作，而是在创建动画之前等待您的信号。

这样做的一种方法是将代码更改为与此类似的代码：

活性2

class Fragment2 extends Fragment {

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

Fragment2

Data Source=(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST = my_ip )(PORT = 1521))(CONNECT_DATA = (SERVER = DEDICATED)(SERVICE_NAME = xe)));

进一步阅读

Getting Started with Activity & Fragment Transitions

Answer 2

您正在寻找的是这个例子：https://github.com/hujiaweibujidao/FabDialogMorph。请注意，您尝试实现的不是标准的Android转换，您需要根据ChangeBounds转换创建自己的变形转换。最初，它已在Plaid中显示，感谢Nick Butcher，因此您可以查看它以获取更多提示和背景。

Answer 3

只需引用Android Docs：

使用共享元素启动活动

使用android：transitionName属性为两个布局中的共享元素指定一个公用名。

据我所知，您的两个XML都不会共享相同的 android：transitionName 。

尝试将XML布局中的android：transitionName（activity_main.xml＆amp; dialog_sheet.xml）更改为相同的字符串，例如： transition_plane_feather

我自己没有测试过这些代码，但我认为这可能是一个很好的起点。

奖金提示

如果您计划完全实施Material Design而不兼容较低的API级别（Lollipop之前），我强烈建议您查看Google UI / UX Designer制作的示例：https://github.com/nickbutcher/plaid

另外，请查看该示例的优秀补充YouTube视频：https://www.youtube.com/watch?v=EjTJIDKT72M

它向您展示了一些可用于完全实现Material Design以及共享元素转换的最佳技巧和实践。

共享元素转换无效

3 个答案:

在我们潜入之前...

解决方案

活性2

Fragment2

进一步阅读

奖金提示