Android片段转场与共享元素

Question

大家好！我有两个片段。在一个片段中，我有一个小图像在卡片中。在第二个片段中，我有相同的图像在布局的头部。我想实现这个图像从一个片段到另一个片段的共享元素转换，就像这个例子中的http://1.bp.blogspot.com/-Vv4SxVSI2DY/VEqQxAf3PWI/AAAAAAAAA7c/mfq7XBrIGgo/s1600/activity_transitions%2B(1).gif。

2D片段:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f2f4f7">
<CustomScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#f2f4f7">
    <LinearLayout
        android:id="@+id/content_wrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:divider="@drawable/vertical_divider"
        android:showDividers="middle">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:id="@+id/header_wrapper"
                android:layout_width="match_parent"
                android:layout_height="166.7dp">
                <ImageView
                    android:id="@+id/share_image"
                    android:transitionName="imageTransition"
                    android:layout_width="match_parent"
                    android:layout_height="166.7dp"
                    android:src="@drawable/friday"/>

1st fragment:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_marginTop="56dp"
android:background="#ff1e1e23">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:src="@drawable/menuicon1g"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:gravity="center"
    android:textColor="#fff"
    android:textSize="22sp"/>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="300dp"
    android:layout_marginTop="25dp"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="#fff"
    card_view:cardElevation="2dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal">
        <ImageView
            android:id="@+id/share_image"
            android:transitionName="imageTransition"
            android:layout_width="match_parent"
            android:layout_height="92.5dp"
            android:src="@drawable/friday"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:src="@drawable/demo_calendar"/>
        <com.zagum.work.virtualfitness.CustomTextView
            xmlns:com.zagum.work.virtualfitness="http://schemas.android.com/apk/res/com.zagum.work.virtualfitness"
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_marginTop="10dp"
            com.zagum.work.virtualfitness:typeface="fonts/Roboto-Light.ttf"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="40dp"
            android:gravity="center"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textSize="18sp"
            android:textStyle="bold"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

事务：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                View image = mRootView.findViewById(R.id.share_image);

                CurrentWorkoutFragment secondFragment = CurrentWorkoutFragment.newInstance();
                secondFragment.setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.transition_move));

                FragmentTransaction trans = getFragmentManager().beginTransaction();
                trans.replace(R.id.container, secondFragment);
                trans.addToBackStack(null);
                trans.addSharedElement(image, image.getTransitionName());
                trans.commit();
            }

transition_move.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
   <changeImageTransform />
   <changeBounds/>
</transitionSet>

但是没有图像动画发生。它出现在左上角并调整大小。

- zagum

---

那个动画很有趣。我想说，如果你使用一个片段列表，当你点击一个片段时，它会开始一个动画来占据整个屏幕。所有额外的视图已经在片段中了，但由于某种标志的改变它们被隐藏了。 - VirtualProdigy

Answer 1

请查看this的答案。

因为我在两个片段之间共享的View是第二个片段中另一个View（RelativeLayout）的子级，所以您需要将ChangeTransform转换添加到TransitionSet中。

基本上，您需要在transition_move.xml中添加<changeTransform/>

- desmondtzq