Fragment间Material Design风格Shared Element CardView过渡实现问题

我明白你现在遇到的尴尬情况——Fragment切换时只有图片有过渡效果，CardView完全没参与进来。这是因为你只把ImageView设为了共享元素，而CardView本身也需要加入共享元素流程里。咱们一步步来修复：

1. 给源Fragment的CardView添加TransitionName #

首先在fragment_main.xml里，给你的CardView加上唯一的transition名称：

<android.support.v7.widget.CardView
    android:id="@+id/propertyCardShop"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:cardBackgroundColor="@color/backgroundCardYou"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/transportCardShop"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="4dp"
    android:transitionName="@string/transition_card_string"> <!-- 新增这一行 -->

    <!-- 内部LinearLayout和控件保持不变 -->
</android.support.v7.widget.CardView>

2. 改造目标Fragment的布局，加入对应CardView #

现在你的fragment_shared_main.xml里没有CardView，过渡自然没法生效。把所有内容放到CardView里，并设置相同的transitionName：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/baseLayout"
    tools:context="SharedMainFragment">

    <android.support.v7.widget.CardView
        android:id="@+id/propertyCardShop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/backgroundCardYou"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp"
        android:transitionName="@string/transition_card_string" <!-- 和源CardView同名 -->
        app:layout_constraintTop_toTopOf="parent"
        android:layout_margin="16dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/propertyImageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:src="@drawable/property_photo"
                android:transitionName="@string/transition_property_string"/>

            <TextView
                android:id="@+id/propertyTextShop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/propriedades"
                android:textColor="@android:color/black"
                android:textSize="18sp"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="16dp"/>

            <TextView
                android:id="@+id/propertyDescShop"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/compre_casas"
                android:textColor="@color/greyTextColor"
                android:textSize="12sp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginBottom="16dp"/>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

3. 修改MainFragment代码，同时传递两个共享元素 #

更新你的点击事件和过渡方法，把CardView也加入共享元素事务：

public class MainFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        final View v = inflater.inflate(R.layout.fragment_market, container, false);
        return v;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        final ImageView propertyImage = view.findViewById(R.id.propertyImageView);
        final CardView propertyCard = view.findViewById(R.id.propertyCardShop); // 获取CardView引用

        propertyImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sharedTransition(propertyImage, propertyCard); // 传递两个控件
            }
        });
    }

    public void sharedTransition(ImageView imageView, CardView cardView) {
        SharedMainFragment simpleFragmentB = new SharedMainFragment();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            TransitionSet transitionSet = new TransitionSet();
            transitionSet.setOrdering(TransitionSet.ORDERING_TOGETHER);
            // 补充CardView过渡需要的类型
            transitionSet.addTransition(new ChangeBounds())
                    .addTransition(new ChangeTransform())
                    .addTransition(new ChangeImageTransform())
                    .addTransition(new ChangeClipBounds());
            simpleFragmentB.setSharedElementEnterTransition(transitionSet);
            simpleFragmentB.setSharedElementReturnTransition(transitionSet);
        }
        getActivity().getSupportFragmentManager()
                .beginTransaction()
                .addSharedElement(imageView, ViewCompat.getTransitionName(imageView))
                .addSharedElement(cardView, ViewCompat.getTransitionName(cardView)) // 加入CardView作为共享元素
                .addToBackStack("SHARED")
                .replace(R.id.fragment_container, simpleFragmentB)
                .commit();
    }
}

最后补充：定义Transition名称字符串 #

在strings.xml里添加两个唯一的过渡名称：

<string name="transition_property_string">property_image_transition</string>
<string name="transition_card_string">property_card_transition</string>

这样修改后，CardView和ImageView就会一起参与过渡动画了。如果使用AndroidX库，记得把android.support.v7.widget.CardView替换成androidx.cardview.widget.CardView哦。

内容的提问来源于stack exchange，提问作者Kelton