用于图像视图的 Android 运动场景

Question

我是MotionLayout 的新手。我遵循了一个简单的示例，其中MotionLayout 包含一个元素，例如Button，这很容易为它生成MotionScene。但是我有一个MotionLayout，其中有几个元素。

布局是这样的-

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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"
    app:layoutDescription="@xml/details_view_scene">

    <ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/details_image"
                style="@style/detailsImage"
                app:layout_constraintDimensionRatio="h,16:9"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/name_label"
                style="@style/textTitle"
                android:text="@string/name"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/details_image" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/name_value"
                style="@style/textSubTitle"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/name_label" />

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/like_button"
                style="@style/floatingButton"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:srcCompat="@drawable/ic_profile_like" />

            <ImageView
                android:id="@+id/like_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_profile_like"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:visibility=“invisible”/>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</androidx.constraintlayout.motion.widget.MotionLayout>

问题是，当按下 ID 为 like_button 的浮动操作按钮时，我希望 ID 为 like_image 的图像视图可见，并且应该从浮动操作按钮转换到 ID 为 details_image 的顶部图像视图。

MotionLayout 可以做到这一点吗？

Answer 1

对于第一个问题：

过渡到结束后，我希望图像不可见。

您应该阅读KeyFrameSet：指定运动序列过程中视图的位置和属性。

在第 0 帧，将图像的 alpha（或可见性）设置为 0.0（不可见）， 在接近最后一帧 99 处，将图像的 alpha（或可见性）设置为 1.0（可见）， 在第 100 帧，将图像的 alpha（或可见性）设置为 0.0（不可见），

所以当你点击按钮时，图像的 alpha 将从 0 -> 1 -> 0.

第二个问题：

在第一次单击按钮时，图像会从下到上移动，这是预期的。在第二次单击按钮时，图像仍停留在顶部，单击图像会将其向下移动。有没有办法在每次开始时重置过渡 -> 结束过渡

将MotionLayout.TransitionListener 添加到您的 MotionLayout，因此当转换完成时，将进度设置为 0（开始状态）。

Answer 2

注意：MotionLayout 仅适用于其直接子级。它不支持嵌套布局层次结构或活动转换。 Read more here

所以把你的 MotionLayout 放在 ScrollView 里面

文件：layout_test_like_button.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/layout_test_like_button_scene">

        <ImageView
            android:id="@+id/details_image"
            android:layout_width="0dp"
            android:layout_height="300dp"
            android:background="@color/colorAccent"
            android:src="@drawable/ic_baseline_broken_image_24"
            app:layout_constraintDimensionRatio="h,16:9"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/name_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="name"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/details_image" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/name_value"
            style="textSubTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name_label" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/like_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@drawable/ic_baseline_check_24" />

        <ImageView
            android:id="@+id/like_image"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorPrimary"
            android:src="@drawable/ic_baseline_image_24" />
    </androidx.constraintlayout.motion.widget.MotionLayout>
</ScrollView>

您希望在按下按钮时，imageView 移动 -> 使用 onClick 动作。 将targetId设置为Button，在constraintSetStart & constraintSetEnd中改变ImageView的布局

文件：layout_test_like_button_scene.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/like_image"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/like_image"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:visibility="visible"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <Transition
        app:constraintSetEnd="@+id/end"
        app:constraintSetStart="@+id/start"
        app:duration="1000">
        <OnClick
            app:clickAction="toggle"
            app:targetId="@id/like_button" />
    </Transition>
</MotionScene>