炫酷！MotionLayout 使用介绍 (第一章)

结束位置：

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:tools=“http://schemas.android.com/tools”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<View

android:id=“@+id/button”

android:background=“@color/colorAccent”

android:layout_width=“64dp”

android:layout_height=“64dp”

android:layout_marginEnd=“8dp”

android:text=“Button”

app:layout_constraintBottom_toBottomOf=“parent”

app:layout_constraintEnd_toEndOf=“parent”

app:layout_constraintTop_toTopOf=“parent” />

</android.support.constraint.ConstraintLayout>

使用这两个布局文件可以初始化两个ConstrainSet，并使用他们（使用如果TransitionManager会有动画的平滑过渡）。这种方式有一个问题是转化一旦开始就不会结束，你也不能告诉系统将转换挺在某个位置（你不能通过输入事件控制转换）。MotionLayout解决了这些问题。你可以使用MotionLayout做同样的事，并且复用已存在的布局文件来初始化状态。首先需要为组件创建一个MotionLayout文件（motion_01_basic.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/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”

tools:layout_editor_absoluteX=“147dp”

tools:layout_editor_absoluteY=“230dp” />

</androidx.constraintlayout.motion.widget.MotionLayout>

文件布局引用中了一个MotionScene文件scene_01

<?xml version="1.0" encoding="utf-8"?>

<MotionScene

xmlns:motion=“http://schemas.android.com/apk/res-auto”>

<Transition

motion:constraintSetStart=“@layout/motion_01_cl_start”

motion:constraintSetEnd=“@layout/motion_01_cl_end”

motion:duration=“1000”>

<OnSwipe

motion:touchAnchorId=“@+id/button”

motion:touchAnchorSide=“right”

motion:dragDirection=“dragRight” />

scene_01设置了默认的转换，设置了开始和结束ConstrainSet  （motion_01_cl_start和motion_01_cl_end），并转换为设置了OnSwipe处理。

OnSwipe

---

在scene_01.xml文件中我们在Transition中设置了OnSwipe处理器。处理器通过匹配用户的输入事件控制转换。

有一些属性你需要了解：

• touchAnchorId：需要跟踪的对象

• touchAnchorSide：跟踪手指的一侧（右/左/上/下）

• dragDirection：跟踪手指运动的方向（dragRight / dragLeft / dragUp / dragDown将决定进度值的变化0-1）

示例2：自包含的MotionScene

---

示例1展示了如何快速的创建一个MotionLayout。，使用名单最终已了存在的布局文件MotionLayout还请立即获取iTunes直接在MotionScene文件中定义ConstraintSet。这样做有有以下好处：

• 一个文件可以包含多个 ConstraintSet

• 除了已有的功能外，还可以处理其他的属性和自定义属性

• 面向未来：即将到来的Android Studio MotionEditor可能只支持自包含MotionScene文件

插值属性

MotionScene中文件ConstraintSet元素可以使用的属性不仅所有游戏常用的布局属性，位置除了状语从句：边距下面的属性也。可以在MotionLayout中使用：

alpha

visibility

elevation

rotation, rotation[X/Y]

translation[X/Y/Z]

scaleX/Y

让我们为示例1重新创建一个新的自包含的MotionScene。文件MotionLayout文件除了引用了新的scene_02.xml状语从句：实例1中没有区别：

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.motion.MotionLayout

xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:tools=“http://schemas.android.com/tools”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:id=“@+id/motionLayout”

app:layoutDescription=“@xml/scene_02”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<View

android:id=“@+id/button”

android:background=“@color/colorAccent”

android:layout_width=“64dp”

android:layout_height=“64dp”

android:text=“Button” />

</android.support.constraint.motion.MotionLayout>

MotionScene文件中有明显的区别，Transition的设置相同，但是我们把Start和结束直接定义在了XML文件中。和普通布局文件相比主要的区别是我们没有指定具体的组件，而是把限定属性写在了Constraint元素中。

<?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” />

<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” />

<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

---

只需要将了解ConstrainSet是如何工作的，新的属性将替换到关联的组件上。只需将需要替换的属性全部包含到Constraint中。通常这会清除组件上的所用属性并将新的属性赋值到组件上。MotionLayout的属性

开发在中你可能会用到MotionLayout的下列属性：

• app:layoutDescription=”reference”指定MotionSceneXML文件

• app:applyMotionScene=”boolean” 是否应用MotionScene [default = true]

• app:showPaths=”boolean”是否显示路径[default = false]。记得在发布版本中关闭

• app:progress=”float” 指定转换的进度[0-1]

• app:currentState=”reference” 指定一个ConstraintSet

总结

---

第一篇文章包含了MotionLayout的基础功能，你可以在这里查看源码：https：//github.com/googlesamples/android-ConstraintLayoutExamples

接下来的文章中我们将包含更多的讲解：

• 自定义属性，图片变换，关键帧（第二部分）

• 在现有的布局中使用MotionLayout（CoordinatorLayout，DrawerLayout，ViewPager）（第三部分）

• 关于关键帧的所有！（第四部分）

• MotionLayout作为根布局

• 嵌套MotionLayout＆其他的组件

• MotionLayout和fragments

##读者福利限时分享

Android开发资料+面试架构资料 免费分享 点击链接 即可领取

《Android架构师必备学习资源免费领取（架构视频+面试专题文档+学习笔记）》

最后

最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021BAT 面试真题解析，我把大厂面试中常被问到的技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。

还有 高级架构技术进阶脑图 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。

Android 基础知识点

Java 基础知识点

Android 源码相关分析

常见的一些原理性问题

希望大家在今年一切顺利，进到自己想进的公司，共勉！

Android开发资料+面试架构资料 免费分享 点击链接 即可领取

《Android架构师必备学习资源免费领取（架构视频+面试专题文档+学习笔记）》

最后

最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021BAT 面试真题解析，我把大厂面试中常被问到的技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。

还有 高级架构技术进阶脑图 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。

Android 基础知识点

Java 基础知识点

Android 源码相关分析

常见的一些原理性问题

[外链图片转存中…(img-UwL8po0U-1726046242808)]

希望大家在今年一切顺利，进到自己想进的公司，共勉！