两个活动之间的Android共享元素转换无法工作

Question

在我的应用程序中，我尝试使用新引入的元素共享功能在不同活动之间共享元素。如果共享的元素具有固定位置（例如android:layout_gravity="top"），则一切运作得很好，但当该视图被锚定时，问题就出现了。

我的第一个活动看起来像这样：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    xmlns:auto="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        ...
    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/play_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="24dp"/>

</android.support.design.widget.CoordinatorLayout>

我的第二个活动长这样

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:auto="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:elevation="10dp"
        android:src="@drawable/ic_action_play"
        auto:layout_anchor="@+id/appbar"
        android:transitionName="fab_button"
        auto:layout_anchorGravity="bottom|right" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp">
        ...
    </android.support.design.widget.AppBarLayout>

    ...

</android.support.design.widget.CoordinatorLayout>

我使用的代码如下：

Intent intent = ...;
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, view, "fab_button");
startActivity(intent, options.toBundle());

如果我使用layout_anchor和layout_anchorGravity属性，两个浮动操作按钮之间的转换将没有任何动画效果。如果第二个浮动操作按钮是固定位置的，则可以完美地工作。我做错了什么？

- Kiril Aleksandrov

---

我认为你没有做错任何事情。我的应用程序与你的非常相似，对于这两个活动，我也遇到了同样的问题。我认为共享元素转换框架无法获取锚定元素的位置...但我希望有人能找到解决方案。 - Louis CAD

我看到有一些应用程序可以很好地运作这种行为。我猜他们正在使用一些自定义逻辑来实现这种效果。 - Kiril Aleksandrov

谢谢你的报告，我已经为此苦苦思索了数小时。当我移除了app:layout_anchor时，过渡变得非常顺畅。这个问题为什么这么难发现，而且还没有被报告呢...得了吧。 - FrancescoC

你应该在 android 的 bug 追踪器 下的支持库中报告此错误。 - Louis CAD

Answer 1

可能有点晚了，但我找到了解决这个问题的方法。你需要将共享元素放入一个布局中，并在该布局上放置锚点：

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        auto:layout_anchor="@+id/appbar"
        auto:layout_anchorGravity="bottom|right">

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:elevation="10dp"
            android:src="@drawable/ic_action_play"
            android:transitionName="fab_button" />

<FrameLayout/>

- Habib Okanla

---

协调布局（coordinatorLayout） + 共享转场有 bug 吗？ 但它完美地工作 :) - Harshit

Answer 2

活动共享元素转换：

按照以下步骤操作。

1. 启用窗口内容过渡
2. 指定公共转换名称
3. 启动活动
4. 多个共享元素
5. 自定义共享元素转换

我认为您没有按照第二步操作。您在第二个Activity中给出了android:transitionName="fab_button"，但在第一个Activity中未给出。

XML第一个Activity的内容（添加了android:transitionName="fab_button"）：

<android.support.design.widget.FloatingActionButton

        android:transitionName="fab_button"

        android:id="@+id/play_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="24dp"/>

以上链接可能会对您有所帮助。

- Pratik Butani

---

不对，那不是它。第一个活动视图是一个ImageView，目标是一个锚定的FAB。如果我将目标FAB设置为非锚定，则一切都正常工作。 - Andy

Answer 3

你在接收活动中也应该有转换名称。看看我的代码。

第一个活动

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_register"
        android:transitionName="@string/transition"/>

</android.support.design.widget.CoordinatorLayout>

第二个活动的 XML

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:transitionName="@string/transition"
tools:context="com.example.shoppingappdemo.RegiserActivity">

- H Raval

---

与我所给出的答案相同。 - Pratik Butani

抱歉...实际上我的网速很慢，所以在我发布了答案之后才看到你的答案...对此感到抱歉。 - H Raval

那不是问题。请阅读问题，如果目标FAB未固定，一切都正常工作。问题似乎出现在目标FAB被固定时。 - Andy