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

19

我已经创建了一个Github项目,并只包含问题。您可以在此处查看/克隆/构建:https://git.io/vMPqb


我正在尝试使片段转换的共享元素起作用。

该项目中有两个FAB - Feather和Plane。Feather和Plane是共享元素。当单击Feather时,将打开SheetDialog,并且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>

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>添加到应用程序的主题中。

我还尝试确保两个视图上的 transitionName 值相同。

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


你想要转换到的第二个活动是什么? - Anis LOUNIS aka AnixPasBesoin
转换是从MainActivity(一个Activity)到SheetDialog(一个Fragment)。 - atwrk
谢谢你的回答。我现在有其他工作任务,但是今天晚些时候会再次查看你的回答 :) - atwrk
过渡应该将一个视图从一个活动转换到另一个活动。在我看来,这是不可能在一个活动中完成的。你需要自己对视图进行动画处理。 - azizbekian
@azizbekian,从Activity到Fragment无法进行动画吗?你有相关资料吗?我之前一直认为可以,但是尝试后发现不行,或许你说的是对的。 - atwrk
3个回答

23

关于共享元素转换的速成课程

首先,让我们快速回顾一下Android框架是如何实现神奇的共享元素转换的:

实际上,共享元素转换只是Android框架的一个谎言。事实上,在执行共享元素转换时,你并没有在活动之间共享任何视图,但你有这样的错觉。这是因为每个活动都必须拥有自己独立的视图树。

什么?!

让我们举个例子,假设我们有一个从位于ActivityA中的视图view_a到位于ActivityB中的视图view_b的共享元素转换。转换将按照以下方式执行:

  1. 过渡框架首先查找ActivityAview_a的尺寸(widthheight)和位置(xy)(以及其他属性)。
  2. 这些属性被传递给ActivityB,并应用于view_b,使得view_b在屏幕上占据与view_a完全相同的位置。
  3. ActivityA被关闭,view_b出现在view_a的正下方,使得看起来view_a没有跟随ActivityA的其他视图一起移动。
  4. 最后,在view_b上应用一个反向动画,将其移动到在ActivityB中应有的位置。

这就是创建共享视图的幻觉的方法。神奇!

回到你的问题

从上面我们可以推断出,在开始任何动画之前,必须确保在ActivityB上已经创建了view_b,否则这是不可能的。
使用Fragment
调用FragmentTransaction.commit()只会安排您的片段事务(片段不会在其包含的活动创建后立即创建)。
所以,在您的情况下,当ActivityB被创建时,您的view_b是缺失的(如前所述,这是因为它包含的片段尚未创建)。
解决方案
确保在动画开始之前创建了view_b。
为此,您需要找到一种方法告诉框架不要做通常的事情,而是在创建动画之前等待您的信号。
实现这一点的一种方法是将您的代码修改为类似于以下代码:
ActivityB
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;
         }
       });
       ...
    }
}

更多阅读

开始使用活动和片段转场


谢谢您的回答,但我一直无法让它工作。您的答案使用了两个活动和两个片段,而我的项目只有一个。尽管如此,我仍然尝试应用这些概念,但在尝试了几种不同的方法后,我仍然无法让它工作。 - atwrk
Fragment2没有返回任何值,这段代码无法编译。 - Alex Beggs
@AlexBeggs 謝謝您指出這一點,但其餘的代碼完全取決於用戶的需求(在普通情況下,返回已充氣的視圖即可)。 - Anis LOUNIS aka AnixPasBesoin

2

谢谢你的回答。我会试试这个方法,但是我有点怀疑这是否是实现我所需的功能的合适方式。我不想进行任何变形,只是将我的 Activity 中的视图传递到一个 Fragment 中。 - atwrk

0

引用Android Docs的话:

使用共享元素启动活动

  1. 使用android:transitionName属性为两个布局中的共享元素分配一个公共名称。

从我看到的情况来看,你的XML文件都没有共享相同的android:transitionName

尝试将XML布局(activity_main.xml和dialog_sheet.xml)中的android:transitionName更改为相同的字符串,例如:transition_plane_feather

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

额外提示

如果您计划完全实现材料设计而不与较低的API级别(Lollipop之前)兼容,我强烈建议查看由Google UI / UX设计师制作的示例:https://github.com/nickbutcher/plaid

此外,请查看优秀的补充YouTube视频示例:https://www.youtube.com/watch?v=EjTJIDKT72M 它向您展示了一些最佳技巧和实践,您可以使用它们来完全实现Material Design以及共享元素过渡。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接