使用 MotionLayout 管理运动和微件动画

MotionLayout 是一种布局类型,可帮助您管理应用中的运动和微件动画。MotionLayoutConstraintLayout 的子类,以其丰富的布局功能为基础构建而成。MotionLayoutConstraintLayout 库的一部分,可用作支持库。

MotionLayout 缩小了布局过渡与复杂动作处理之间的差距,在属性动画框架TransitionManagerCoordinatorLayout 之间提供了多项功能。

图 1.基本的触控运动。

除了描述布局之间的转换之外,MotionLayout 还可让您为任何布局属性添加动画效果。此外,它本身就支持可搜索过渡。这意味着,您可以根据某种条件(例如触控输入)立即显示过渡中的任何点。MotionLayout 还支持关键帧,从而实现完全自定义的过渡以满足您的需求。

MotionLayout 是完全声明式的,这意味着您可以在 XML 中描述任何转换,无论有多复杂。

设计注意事项

MotionLayout 旨在移动与用户交互的界面元素(如按钮和标题栏)、调整其大小并为其添加动画效果。不要将应用中的动作用作不必要的特殊效果。您可以用它来帮助用户了解您的应用正在执行的操作。如需详细了解如何设计包含运动的应用,请参阅 Material Design 的了解运动部分。

开始使用

请按照以下步骤开始在您的项目中使用 MotionLayout

  1. 添加 ConstraintLayout 依赖项:如需在项目中使用 MotionLayout,请将 ConstraintLayout 2.0 依赖项添加到应用的 build.gradle 文件中。如果您使用的是 AndroidX,请添加以下依赖项:

    Groovy

    dependencies {
        implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha13"
        // To use constraintlayout in compose
        implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13"
    }
    

    Kotlin

    dependencies {
        implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13")
        // To use constraintlayout in compose
        implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")
    }
    
  2. 创建 MotionLayout 文件MotionLayoutConstraintLayout 的子类,因此您可以通过替换布局资源文件中的类名称,将任何现有的 ConstraintLayout 转换为 MotionLayout,如以下示例所示:

    AndroidX

    <!-- before: ConstraintLayout -->
    <androidx.constraintlayout.widget.ConstraintLayout .../>
    <!-- after: MotionLayout -->
    <androidx.constraintlayout.motion.widget.MotionLayout .../>
              

    支持库

    <!-- before: ConstraintLayout -->
    <android.support.constraint.ConstraintLayout .../>
    <!-- after: MotionLayout -->
    <android.support.constraint.motion.MotionLayout .../>
              

    下面是一个 MotionLayout 文件的完整示例,它定义了图 1 中所示的布局:

    AndroidX

    <?xml version="1.0" encoding="utf-8"?>
    <!-- activity_main.xml -->
    <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/scene_01"
        tools:showPaths="true">
    
        <View
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="@color/colorAccent"
            android:text="Button" />
    
    </androidx.constraintlayout.motion.widget.MotionLayout>
            

    支持库

    <?xml version="1.0" encoding="utf-8"?>
    <!-- activity_main.xml -->
    <android.support.constraint.motion.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/scene_01"
        tools:showPaths="true">
    
        <View
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="@color/colorAccent"
            android:text="Button" />
    
    </android.support.constraint.motion.MotionLayout>
            
  3. 创建 MotionScene:在前面的 MotionLayout 示例中,app:layoutDescription 属性引用了运动场景。运动场景是一种 XML 资源文件。在其 <MotionScene> 根元素中,运动场景包含相应布局的所有运动描述。为了将布局信息与运动描述分开,每个 MotionLayout 都引用一个单独的运动场景。运动场景中的定义优先于 MotionLayout 中的任何类似定义。

    下面的运动场景文件示例描述了图 1 中的基本水平运动:

    <?xml version="1.0" encoding="utf-8"?>
    <MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:motion="http://schemas.android.com/apk/res-auto">
    
        <Transition
            motion:constraintSetStart="@+id/start"
            motion:constraintSetEnd="@+id/end"
            motion:duration="1000">
            <OnSwipe
                motion:touchAnchorId="@+id/button"
                motion:touchAnchorSide="right"
                motion:dragDirection="dragRight" />
        </Transition>
    
        <ConstraintSet android:id="@+id/start">
            <Constraint
                android:id="@+id/button"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginStart="8dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </ConstraintSet>
    
        <ConstraintSet android:id="@+id/end">
            <Constraint
                android:id="@+id/button"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginEnd="8dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </ConstraintSet>
    
    </MotionScene>
        

    请注意以下几点:

    • <Transition> 包含运动的基本定义。

      • motion:constraintSetStartmotion:constraintSetEnd 是对运动端点的引用。这些端点在运动场景中稍后的 <ConstraintSet> 元素中定义。

      • motion:duration 指定完成运动所需的毫秒数。

    • <OnSwipe> 可用于创建动作的触控操作。

      • motion:touchAnchorId 是指用户可以滑动和拖动的视图。

      • motion:touchAnchorSide 表示从右侧拖动视图。

      • motion:dragDirection 是指拖动的进度方向。例如,motion:dragDirection="dragRight" 表示进度会随着视图向右拖动而增加。

    • <ConstraintSet> 用于定义描述运动的各种约束条件。 在此示例中,为运动的每个端点都定义了一个 <ConstraintSet>。这些端点使用 app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent" 垂直居中。在水平方向上,端点位于屏幕的最左侧和最右侧。

    如需详细了解运动场景支持的各种元素,请参阅 MotionLayout 示例

插入的属性

在运动场景文件中,ConstraintSet 元素可以包含在过渡期间插入的其他属性。除了位置和边界之外,MotionLayout 还插入了以下属性:

  • alpha
  • visibility
  • elevation
  • rotationrotationXrotationY
  • translationXtranslationYtranslationZ
  • scaleXscaleY

自定义属性

<Constraint> 中,您可以使用 <CustomAttribute> 元素为不仅仅与位置或 View 属性相关的属性指定过渡。

<Constraint
    android:id="@+id/button" ...>
    <CustomAttribute
        motion:attributeName="backgroundColor"
        motion:customColorValue="#D81B60"/>
</Constraint>

一个 <CustomAttribute> 本身包含两个属性:

  • motion:attributeName 是必需的,并且必须与具有 getter 和 setter 方法的对象匹配。getter 和 setter 与特定模式匹配。例如,支持 backgroundColor,因为视图具有底层 getBackgroundColor()setBackgroundColor() 方法。
  • 您必须提供的另一个属性基于值类型。请从以下支持的类型中进行选择:
    • motion:customColorValue 适用于颜色
    • motion:customIntegerValue 适用于整数
    • motion:customFloatValue 适用于浮点值
    • motion:customStringValue 适用于字符串
    • motion:customDimension 适用于尺寸
    • motion:customBoolean 适用于布尔值

指定自定义属性时,请在开始和结束 <ConstraintSet> 元素中定义端点值。

更改背景颜色

以前面的示例为基础,假设您希望视图的颜色在运动过程中发生变化,如图 2 所示。

图 2.视图会在移动过程中更改其背景颜色。

为每个 ConstraintSet 元素添加一个 <CustomAttribute> 元素,如以下代码段所示:

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginStart="8dp"
        motion:layout_constraintBottom_toBottomOf="parent"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="#D81B60" />
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginEnd="8dp"
        motion:layout_constraintBottom_toBottomOf="parent"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="#9999FF" />
    </Constraint>
</ConstraintSet>

其他 MotionLayout 属性

除了前面示例中的属性之外,MotionLayout 还有您可能想要指定的其他属性:

  • app:applyMotionScene="boolean" 指示是否应用运动场景。此属性的默认值为 true
  • app:showPaths="boolean" 指示是否在运动进行时显示动画路径。此属性的默认值为 false
  • app:progress="float" 可让您明确指定转换进度。您可以使用从 0(过渡的开始)到 1(过渡的结束)之间的任何浮点值。
  • app:currentState="reference" 可让您指定具体的 ConstraintSet
  • app:motionDebug 可让您显示有关该运动的其他调试信息。可能的值包括 "SHOW_PROGRESS""SHOW_PATH""SHOW_ALL"

其他资源

如需详细了解 MotionLayout,请参阅以下资源: