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())

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

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

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

创建此过渡的最佳方法是什么？我有什么要解决的吗？还是创建自定义过渡的唯一解决方案？

圆角MaterialCardView共享元素过渡

0 个答案: