Kotlin 中的 Android 运动布局
什么是 Android 中的运动布局?
运动布局是 Android 中约束布局的子类。它继承了约束布局的属性。此布局用于管理 Android 应用程序内 Widget 的运动和布局动画。运动布局用于在我们的 Android 应用程序中提供手势控制动画，例如向下滑动、向上滑动以及其他类型的动作。
Kotlin 中运动布局的实现
我们将创建一个简单的应用程序，其中只显示两个文本视图。我们将在运动布局中添加这两个文本视图，并添加滑动动画来更改应用程序的背景颜色和文本视图的文本颜色。我们将按照分步指南，使用 Kotlin 在 Android 应用程序中实现动态布局。
步骤 1:在 Android Studio 中创建新项目
如下图所示，导航到 Android Studio。在下方屏幕中，点击"新建项目"以创建一个新的 Android Studio 项目。
点击"新建项目"后，您将看到以下屏幕。
在此屏幕中，我们只需选择"空活动"，然后点击"下一步"。点击"下一步"后，您将看到以下屏幕。
在此屏幕中，我们只需指定项目名称。然后会自动生成软件包名称。
注意− 确保选择 Kotlin 作为语言
完成所有设置后，点击"完成"即可创建一个新的 Android Studio 项目。
项目创建完成后，我们将看到两个打开的文件，即 activity_main.xml 和 MainActivity.kt 文件。
步骤 2:在 build.gradle 文件中添加依赖项以使用此库
导航到 Gradle Scripts>build.gradle 文件，并在依赖项部分添加以下依赖项。
implementation 'androidx.constraintlayout:constraintlayout:2.2.0-alpha05'
添加上述依赖项后，您将在 IDE 的右上角看到"立即同步"选项。只需点击它即可同步您的项目并在项目中安装此依赖项。
步骤 3:使用 activity_main.xml
导航到 activity_main.xml。如果此文件不可见，请打开此文件。在左侧窗格中，导航至 app>res>layout>activity_main.xml 以打开此文件。打开此文件后，将以下代码添加到其中。代码中添加了注释，以便您详细了解。
<?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:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_layout" tools:context=".MainActivity"> <!-- creating a frame layout on below line--> <FrameLayout android:id="@+id/idFLContainer" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- creating a constraint layout on below line--> <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/idConstraintLayout" android:layout_width="match_parent" android:layout_height="0dp" android:background="#353442" /> <!-- creating a text view for heading on below line--> <TextView android:id="@+id/idTVHeading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Motion Layout in Android" android:textSize="25sp" app:layout_constraintBottom_toBottomOf="@id/idFLContainer" app:layout_constraintEnd_toEndOf="@id/idFLContainer" app:layout_constraintStart_toStartOf="@id/idFLContainer" app:layout_constraintTop_toTopOf="@id/idFLContainer" /> <!-- creating a text view for sub heading on below line--> <TextView android:id="@+id/idTVSubHeading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="70dp" android:text="Hello World!" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="@id/idFLContainer" app:layout_constraintEnd_toEndOf="@id/idFLContainer" app:layout_constraintStart_toStartOf="@id/idFLContainer" app:layout_constraintTop_toTopOf="@id/idFLContainer" /> </androidx.constraintlayout.motion.widget.MotionLayout>
说明 - 在上面的代码中，我们将根布局创建为运动布局，并在其中指定运动布局描述作为动画 xml 文件。在这个运动布局中，我们创建了一个框架布局。在这个框架布局下方，我们创建了约束布局，并为其指定了背景颜色。创建此约束布局后，我们创建一个文本视图，在其中指定 ID 并在其中显示应用程序标题。之后，我们再创建一个文本视图，在其中显示应用程序的子标题。
步骤 4:创建一个新的 xml 文件，用于为运动布局添加运动场景。
导航至 app>res>xml>右键单击该文件>新建 XML 资源文件，将其命名为 motion_layout，并向其中添加以下代码。
<?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"> <Transition app:constraintSetEnd="@+id/endTransition" app:constraintSetStart="@+id/startTransition" app:duration="100" app:motionInterpolator="linear"> <OnSwipe app:dragDirection="dragUp" /> </Transition> <ConstraintSet android:id="@id/startTransition"> <Constraint android:id="@id/idTVHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="#FF000000" /> </Constraint> <Constraint android:id="@id/idTVSubHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="#FF000000" /> </Constraint> <Constraint android:id="@id/idConstraintLayout" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@id/endTransition"> <Constraint android:id="@id/idTVHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="@android:color/white" /> </Constraint> <Constraint android:id="@id/idTVSubHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="@android:color/white" /> </Constraint> <Constraint android:id="@id/idConstraintLayout" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
说明 − 在上面的代码中，我们为 Motion Layout 创建了一个 Motion Scene。在这个 Motion Scene 中，我们首先创建一个需要显示的 Transition 动画。在这个 Transition 中，我们添加了约束设置 End、约束设置 Start、持续时间、motionInterpolator，并将 motionInterpolator 设置为线性，并在其中添加了 onSwipe 拖动方向为 dragUp。之后，我们创建一个约束集，并将其添加到 startTransition。
在这个约束集中，我们为标题文本视图创建第一个约束，为副标题文本视图创建第二个约束。在每个约束中，我们添加一个自定义属性。在这个自定义属性中，我们添加文本颜色的键和文本颜色的值。
之后，我们创建一个约束，在其中指定所有边的 ID 和约束作为父项。
同样，我们创建一个用于显示结束 Transition 的约束集。在这个约束集内，我们再次创建 3 个约束，一个用于标题文本视图，第二个用于副标题文本视图，另一个用于约束布局。在这个约束布局中，我们为每个约束更改自定义颜色值，这些约束与我们在第一个约束中添加的其他约束不同。
添加上述代码后，现在只需点击顶部栏中的绿色图标即可在移动设备上运行我们的应用程序。
注意 - 确保您已连接到真实设备或模拟器。
结论
在上面的教程中，我们了解了什么是 Android 中的运动布局，以及如何在 Android 应用程序中使用该运动布局来为 Android 应用程序中的不同小部件显示动画。
