android - 圆角 MaterialCardView 的共享元素过渡

Question

我正在尝试在 2 个活动之间创建共享元素转换。

共享元素是图像和按钮。

这些是 2 个活动的 2 个布局：

1-来源

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

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card"
        android:layout_width="250dp"
        android:layout_height="340dp"
        android:layout_gravity="center"
        android:transitionName="card"
        app:cardCornerRadius="16dp">

        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:transitionName="frame"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?selectableItemBackground"
                android:scaleType="centerCrop"
                android:src="@mipmap/test"
                android:transitionName="image" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/button"
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center"
                android:layout_marginBottom="12dp"
                android:text="Button"
                android:transitionName="button"
                app:cornerRadius="100dp" />
        </FrameLayout>
    </com.google.android.material.card.MaterialCardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

2- 目标

<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".TestActivity">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:transitionName="card"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/test"
            android:transitionName="image" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/button"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:text="Button"
        android:textColor="@color/colorAccent"
        android:transitionName="button"
        app:backgroundTint="@color/colorPrimary"
        app:cornerRadius="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

如前所述，元素是卡片内的图像和按钮。图像向上移动，按钮向下移动。第二个活动中的按钮背景和文本颜色不同。

这就是我构建过渡的方式：

val intent = Intent(this, TestActivity::class.java)
            startActivity(intent, ActivityOptionsCompat.makeSceneTransitionAnimation(
                this,
                Pair<View, String>(card, "card"),
                Pair<View, String>(button, "button")
            ).toBundle())

主要问题是，我不得不移动整张卡片，因为仅移动图像会使圆角消失并以一种非常奇怪的方式重新出现。

但是移动整张卡片会产生另一个奇怪的动画。图像现在在进入和退出时在底部有一个边距。

还有一个问题是按钮仅从一个位置移动到另一个位置，没有更改其他属性。

创造这种转变的最佳方式是什么？我需要做些什么来修复它吗？或者是创建自定义过渡的唯一解决方案？

标签： android