Question

我想要进行与this one相同的转换，它来自材料设计。

我遵循了一些教程，展示了如何做到这一点，但绝大多数使用Activitys，因为我必须使用片段。最后我得到了一个粗略的结果，但它仍然不是我想要的。我得到的结果是this one。

如您所见，转换忽略了CardView，只有图像出现在我们面前。以下是我目前的代码。

MainFragment

public class MainFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        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);
        propertyImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sharedTransition(propertyImage);
            }
        });

    }

    public void sharedTransition(ImageView imageView) {
        SharedMainFragment simpleFragmentB = new SharedMainFragment();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            TransitionSet transitionSet = new TransitionSet();
            transitionSet.setOrdering(TransitionSet.ORDERING_TOGETHER);
            transitionSet.addTransition(new ChangeBounds())
                    .addTransition(new ChangeTransform())
                    .addTransition(new ChangeImageTransform());

            simpleFragmentB.setSharedElementEnterTransition(transitionSet);
            simpleFragmentB.setSharedElementReturnTransition(transitionSet);
        }

        getActivity().getSupportFragmentManager()
                .beginTransaction()
                .addSharedElement(imageView, ViewCompat.getTransitionName(imageView))
                .addToBackStack("SHARED")
                .replace(R.id.fragment_container, simpleFragmentB)
                .commit();
    }
}

fragment_main.xml （仅限cardview部分及其内容）

<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">

        <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:layout_marginLeft="16dp"
                android:layout_marginTop="16dp"
                android:text="@string/propriedades"
                android:textColor="@android:color/black"
                android:textSize="18sp" />

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

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

fragment_shared_main.xml （已打开的片段）

<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">

    <!-- TODO: Update blank fragment layout -->
    <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"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/propertyImageView"
        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"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/propertyTextShop"
        android:layout_marginLeft="16dp"/>

</android.support.constraint.ConstraintLayout>

感谢收听。

Answer 1

可能为时已晚，但是我相信如果您希望cardView包含在过渡动画中，您需要具备：

第二个片段内的cardView
使用另一个唯一的TransitionName设置cardView，并像使用imageView for SharedElements一样设置cardView

共享元素cardview转换

1 个答案: