Android Motion Layout

什么是Android中的Motion Layout

Motion Layout是Android中Constraint Layout的一个子类。它继承了Constraint Layout的属性。这个布局是用来管理安卓应用程序中小部件的运动和布局动画的。Motion Layout用于提供手势控制动画，如擦拭、向上滑动和其他类型的运动，在我们的Android应用程序中。

在Kotlin中实现Motion Layout

我们将创建一个简单的应用程序，其中我们将简单地显示两个文本视图。我们将在我们的Motion Layout中添加这些文本视图，并添加一个滑动动画来改变应用程序的背景颜色和文本视图的文本颜色。我们将按照一步一步的指南，使用Kotlin在我们的Android应用程序中实现Motion Layout。

第1步：在Android Studio中创建一个新项目

导航到Android studio，如下图所示。在下面的屏幕上点击新项目来创建一个新的Android Studio项目。

点击新项目后，你会看到下面的屏幕。

在这个屏幕中，我们必须简单地选择空活动并点击下一步。点击下一步后，你会看到下面的屏幕。

在这个屏幕上，我们必须简单地指定项目名称。然后包的名称将被自动生成。

注意 - 确保将语言选择为Kotlin。

在指定了所有的细节之后，点击完成，创建一个新的Android studio项目。

一旦我们的项目被创建，我们将看到两个文件被打开，即 activity_main.xml 和 MainActivity.kt 文件。

第2步：在build.gradle文件中添加依赖性以使用这个库

导航到Gradle Scripts>build.gradle文件，在dependencies部分添加以下依赖。

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，在这里面我们指定我们的Motion Layout描述为我们的动画xml文件。在这个Motion Layout中，我们正在创建一个框架布局。在这个框架布局的下面，我们正在创建我们的约束布局，我们正在指定一个背景颜色。在创建了这个约束布局后，我们正在创建一个文本视图，在里面我们指定了ID并显示了我们的应用程序的标题。之后，我们再创建一个文本视图，在其中显示我们应用程序的副标题。

第4步：创建一个新的xml文件来为我们的Motion Layout添加运动场景。

导航到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创建一个运动场景。在这个运动场景中，我们首先创建了一个我们必须要显示的过渡动画。在这个过渡动画中，我们要添加constraintSetEnd, constraintSetStart, duration, motionInterpolator为线性，在这里面我们要添加onSwipe拖动方向为dragUp。之后，我们正在创建一个约束集，我们正在为startTransition添加这个约束集。

在这个约束集中，我们正在为标题文本视图创建第一个约束，为副标题文本视图创建第二个约束。在每个约束中，我们将添加一个自定义属性。在这个自定义属性中，我们将键添加为文本颜色，并将其值添加为我们必须为文本添加的颜色。

然后，我们创建一个约束，在这个约束中，我们指定id和约束的所有方面为父。

同样地，我们正在创建一个更多的约束集，我们正在为终端过渡显示。在这个约束集中，我们再次创建了3个约束，一个用于标题文本视图，第二个用于副标题文本视图，另一个用于我们的约束布局。在这个约束布局中，我们正在为每个约束改变我们的自定义颜色值，这与我们在第一个约束中添加的其他约束不同。

添加完上述代码后，现在我们只需点击顶部栏的绿色图标，就可以在移动设备上运行我们的应用程序。

注意 - 确保你已经连接到你的真实设备或模拟器上。

总结

在上面的教程中，我们学习了什么是安卓中的Motion Layout，以及我们如何在安卓应用中使用Motion Layout来为安卓应用中的不同小部件显示动画。