Android Fragments 执行从Activity到Fragment的“共享元素转换”

s3fp2yjn  于 2023-08-06  发布在  Android
关注(0)|答案(3)|浏览(190)

我做了一个github项目,就是为了解决这个问题。你可以从这里看到它/克隆它/构建它:https://git.io/vMPqb
我正在尝试让共享元素为Fragment转换工作。
项目中有两个FAB--羽毛和飞机。Feather和Plane是共享元素。单击“羽化”时,“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和一个Fragment之间的转换上有一个共享元素是不可能的吗?也许只有Activity到Activity或Fragment到Fragment之间才有可能,而不是跨越这两种类型?也许这就是为什么我不能让它工作。
更新:
我现在已经尝试将<item name="android:windowContentTransitions">true</item>添加到应用程序的主题中。
我现在还尝试确保两个视图上的transitionName值相同。
这两种方法都没有帮助解决这个问题。

vshtjzan

vshtjzan1#

共享元素转换速成

让我们首先快速回顾一下Android框架是如何完成神奇的 * 共享元素转换 * 的:
共享元素转换实际上只是android框架的一个谎言。事实上,当执行一个 * 共享元素转换 * 时,你并没有在你的活动之间共享任何视图,但是你有这样做的错觉。这是因为每个Activity都必须有自己独立的视图树。
啊!
让我们使用一个例子:假设我们有一个视图view_aActivityAActivityB中的view_b的转换。框架所做的是首先查找维度(widthheight)和位置ActivityAview_a的(xy)(沿着其他属性),然后将这些属性传递给ActivityB,将它们应用于view_b,以便当ActivityA关闭时,view_bview_a占据完全相同的点。之后,框架通过将view_b的动画反转到ActivityB中的外观来开始转换。这就是如何创建共享视图的错觉。魔法!

回到您的问题

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

使用Fragment

调用FragmentTransaction.commit()只会调度您的片段事务(片段不会在其包含的Activity创建后立即创建)。
因此,在您的例子中,当创建ActivityB时,view_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;
         }
       });
       ...
    }
}

延伸阅读

Getting Started with Activity & Fragment Transitions

von4xj4u

von4xj4u2#

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

9w11ddsr

9w11ddsr3#

引用Android Docs

使用共享元素启动活动

1.使用android:transitionName属性为两个布局中的共享元素分配一个公共名称。
在我看来,您的两个XML并不共享相同的android:transitionName
尝试将XML布局(activity_main.xml & dialog_sheet.xml)中的android:transitionName更改为相同的字符串,例如:transition_plane_feather
我自己还没有测试过这些代码,但我认为这可能是一个很好的起点。

奖励提示

如果你打算完全实现Material Design,但不兼容较低的API级别(前Lollipop),我强烈建议你查看Google UI/UX设计师制作的示例:https://github.com/nickbutcher/plaid
此外,请查看该示例的优秀补充YouTube视频:https://www.youtube.com/watch?v=EjTJIDKT72M
它向您展示了一些最佳技巧和实践,您可以使用这些技巧和实践来完全实现Material Design以及共享元素过渡。

相关问题