MotionLayout
是一种布局类型,可帮助您管理应用中的运动和微件动画。MotionLayout
是 ConstraintLayout
的子类,并基于其丰富的布局功能构建。作为 ConstraintLayout
库的一部分,MotionLayout
可用作支持库。
MotionLayout
弥合了布局转场和复杂运动处理之间的差距,结合了属性动画框架、TransitionManager
和 CoordinatorLayout
的特性。
除了描述布局之间的转场,MotionLayout
还允许您对任何布局属性进行动画处理。此外,它固有地支持 可查找转场。这意味着您可以根据某些条件(例如触摸输入)即时显示转场中的任何点。MotionLayout
还支持关键帧,从而实现完全自定义的转场以满足您的需求。
MotionLayout
完全是声明式的,这意味着您可以在 XML 中描述任何转场,无论其多么复杂。
设计注意事项
MotionLayout
用于移动、调整大小和为用户交互的界面元素(如按钮和标题栏)添加动画。不要将运动在应用中用作不必要的特殊效果。使用它来帮助用户了解您的应用正在做什么。有关使用运动设计应用的更多信息,请参阅 Material Design 的理解运动部分。
开始使用
按照以下步骤开始在您的项目中使用 MotionLayout
。
-
添加
ConstraintLayout
依赖项:要在项目中使用MotionLayout
,请将ConstraintLayout
2.0 依赖项添加到您的应用build.gradle
文件中。如果您使用的是 AndroidX,请添加以下依赖项Groovy
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.1" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.1") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1") }
-
创建
MotionLayout
文件:MotionLayout
是ConstraintLayout
的子类,因此您可以通过替换布局资源文件中的类名将任何现有的ConstraintLayout
转换为MotionLayout
,如下例所示AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
Support 库
<!-- 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>
Support 库
<?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>
-
创建 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:constraintSetStart
和motion: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
可见性
高程
rotation
、rotationX
、rotationY
translationX
、translationY
、translationZ
scaleX
、scaleY
自定义属性
在 <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 所示。
将 <CustomAttribute>
元素添加到每个 ConstraintSet
元素中,如下面的代码片段所示
<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
的更多信息,请参阅以下资源
- Kotlin 高级 Android 03.2:使用 MotionLayout 添加动画
- MotionLayout 示例
- MotionLayout/ConstraintLayout 示例(位于 GitHub)
- MotionLayout 简介(第一部分)
- MotionLayout 简介(第二部分)
- MotionLayout 简介(第三部分)
- MotionLayout 简介(第四部分)