数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究Kotlin 中的 Android Motion Layout
什么是 Android 中的 Motion Layout？
Motion Layout 是 Android 中 Constraint Layout 的子类。它继承了 Constraint Layout 的属性。此布局用于管理 Android 应用程序中小部件的运动和布局动画。Motion Layout 用于提供手势控制动画，例如向下滑动、向上滑动以及 Android 应用程序中的其他类型的运动。
Kotlin 中 Motion Layout 的实现
我们将创建一个简单的应用程序，在其中我们将简单地显示两个 TextView。我们将把这些 TextView 添加到我们的 Motion Layout 中，并添加一个滑动动画来更改应用程序的背景颜色和 TextView 的文本颜色。我们将按照分步指南在我们的 Android 应用程序中使用 Kotlin 实现 Motion Layout。
步骤 1：在 Android Studio 中创建新项目
导航到 Android Studio，如下面的屏幕所示。在下面的屏幕中，单击“新建项目”以创建新的 Android Studio 项目。
单击“新建项目”后，您将看到下面的屏幕。
在此屏幕中，我们只需选择“空活动”并单击“下一步”。单击“下一步”后，您将看到下面的屏幕。
在此屏幕中，我们只需指定项目名称。然后包名将自动生成。
注意 - 确保选择 Kotlin 作为语言
指定所有详细信息后，单击“完成”以创建新的 Android Studio 项目。
项目创建完成后，我们将看到 2 个打开的文件，即 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>
说明 - 在上面的代码中，我们将根布局创建为 Motion Layout，并在其中指定运动布局描述作为我们的动画 xml 文件。在此 Motion Layout 中，我们正在创建一个 FrameLayout。在该 FrameLayout 下，我们创建了 ConstraintLayout，并为其指定了背景颜色。创建此 ConstraintLayout 后，我们在其中创建了一个 TextView，并在其中指定 id 并显示应用程序标题。之后，我们创建了另一个 TextView，在其中显示应用程序的副标题。
步骤 4：创建一个新的 xml 文件以添加 Motion Layout 的 Motion Scene。
导航到 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 中，我们添加了 constraintSetEnd、constraintSetStart、duration、motionInterpolator 为线性，并在其中添加了 onSwipe 拖动方向为 dragUp。之后，我们创建了一个 ConstraintSet。我们将此 ConstraintSet 添加到 startTransition。
在此 ConstraintSet 中，我们为标题 TextView 创建第一个 Constraint，为副标题 TextView 创建第二个 Constraint。在每个 Constraint 中，我们添加一个自定义属性。在此自定义属性中，我们添加了键为 textColor，并为其添加了要添加到文本的颜色作为值。
之后，我们创建了一个 Constraint，在其中指定了 id 和来自所有侧面的约束作为父级。
类似地，我们创建了另一个 ConstraintSet，我们将其显示为 endTransition。在此 ConstraintSet 中，我们再次创建了 3 个 Constraint，一个用于标题 TextView，第二个用于副标题 TextView，另一个用于 ConstraintLayout。在此 ConstraintLayout 中，我们更改了每个 Constraint 的自定义颜色值，这与我们在第一个 Constraint 中添加的不同。
添加上述代码后，我们现在只需单击顶部的绿色图标即可在移动设备上运行应用程序。
注意 - 确保您已连接到您的真实设备或模拟器。
结论
在上面的教程中，我们学习了什么是 Android 中的 Motion Layout，以及如何在 Android 应用程序中使用 Motion Layout 来显示 Android 应用程序中不同小部件的动画。
744 次查看
