用于图像视图的安卓运动场景

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>

问题是当按下 idlike_button

的浮动操作按钮时，我希望 idlike_image的图像视图可见，并且应该从浮动操作按钮过渡到 iddetails_image的顶部图像视图。

这在MotionLayout上可能吗？

Answer 1

对于第一个问题：

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

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

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

因此，当您单击按钮时，图像的alpha将从0 -> 1 -> 0。

对于第二个问题：

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

将 MotionLayout.TransitionListener 添加到 MotionLayout，以便在过渡完成后，将进度设置为 0(开始状态)。

Answer 2

注意：MotionLayout 仅适用于其直接子级。它不支持嵌套布局层次结构或活动过渡。在此处阅读更多内容

所以把你的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>

您希望在按下按钮时，图像视图移动 -> 使用 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>