Styling Android的常规读者可能已经猜到我喜欢动画的东西。 MotionLayout为动画提供了惊人的范围，并且可以使用它创建一些非常有趣的动画。我们之前在Styling Android上看过how to implement a Collapsing Toolbar，但我们不仅限于模仿可以使用其他Android API实现的现有行为，MotionLayout给了我们一些真正的范围来获得时髦。在本文中，我们将略微突破界限并探索一些我们可以与MotionLayout一起使用的有趣技术。原文
在我们开始之前，值得指出的是，在动画方面很容易超越顶部。虽然很容易在动画中添加越来越多的复杂组件，但有时知道何时停止添加其他组件，甚至删除那些不适合整体流程的组件，是实现感觉自然的动画的关键。此外，最有效的动画通常是那些结合了非常简单的组件动画的动画，这些动画相互补充，并创造出比实际更难实现的动画。
让我们首先看看我们将要实现的整体效果。这是一个工具栏，可能会出现在一个体育应用程序中，该应用程序显示正在进行的足球比赛(美国足球比赛)的信息：
(我应该指出，我对2019年F.A.杯决赛的结果并不感到痛苦。没有丝毫。)
虽然动画中有很多东西在进行，但各种动作都在一起，因此整体效果感觉非常流畅。实际的绿色矩形块Toolbar实际上并没有改变大小，但是当前的匹配时间文本(89.59)移动到Toolbar的边界之外，并且有一种从Toolbar底部扩展的气泡形状以包含它。这是动画中可能最有趣的部分，因此本文的大部分内容都将关注这一点。
我不打算完整描述MotionLayout的机制，因为previous article已经涵盖了。关键是我们有效地定义了两个静态，每个静态表示为ConstraintSet。展开状态如下所示：
崩溃的州看起来像这样：
MotionLayout本身声明如下：
RES/布局/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:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/collapsing_toolbar"
tools:context=".MainActivity">
<View
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorPrimary" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/event_name"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" />
<TextView
android:id="@+id/score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/score"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />
<ImageView
android:id="@+id/man_city_logo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:src="@drawable/man_city" />
<TextView
android:id="@+id/man_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/man_city"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_constraintBaseline_toBaselineOf="@id/score"
app:layout_constraintEnd_toStartOf="@id/man_city_logo"/>
<ImageView
android:id="@+id/watford_logo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:src="@drawable/watford" />
<TextView
android:id="@+id/watford"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/watford"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_constraintBaseline_toBaselineOf="@id/score"
app:layout_constraintStart_toEndOf="@id/watford_logo"/>
<View
android:id="@+id/toolbar_extension"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/bubble"
android:backgroundTint="@color/colorPrimary"
app:layout_constraintEnd_toEndOf="@id/time"
app:layout_constraintStart_toStartOf="@id/time" />
<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="24dp"
android:paddingEnd="24dp"
android:text="@string/time"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" />
<FrameLayout
android:id="@+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/toolbar_extension" />
</androidx.constraintlayout.motion.widget.MotionLayout>
虽然MotionLayout是ConstraintLayout的子类，但是在此布局文件中没有声明约束 - 它们都在名为@xml/collapsing_toolbar的layoutDescriptor文件中声明。
这个文件包含我们MotionLayout的MotionScene：
RES/XML/collapsing_toolbar.xml
<?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/collapsed"
app:constraintSetStart="@id/expanded">
<OnSwipe
app:dragDirection="dragUp"
app:touchAnchorId="@id/recyclerview"
app:touchAnchorSide="top" />
</Transition>
<ConstraintSet android:id="@+id/collapsed">
...
</ConstraintSet>
<ConstraintSet android:id="@+id/expanded">
...
</ConstraintSet>
</MotionScene>
这将在其自己的ConstraintSet中声明扩展和折叠的约束，并将其关联为拖动手势，以便拖动两个状态之间的过渡。 对于不熟悉这一点的人：earlierMotionLayoutarticle更详细地介绍了这一点。
我们应用于各个视图的大多数动画都在缩放它们。 如果你看看早期的动画GIF显示动画的外观，并专注于顶部的文本F.A. Cup Final 2019，它只是变得越来越小，ConstraintSets中的约束是：
RES/XML/collapsing_toolbar.xml
<?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">
...
<ConstraintSet android:id="@+id/collapsed">
...
<Constraint android:id="@id/title">
<Transform
android:scaleX="0.5"
android:scaleY="0.5" />
<Layout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@id/score"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/toolbar" />
</Constraint>
...
</ConstraintSet>
<ConstraintSet android:id="@+id/expanded">
...
<Constraint android:id="@id/title">
<Transform
android:scaleX="1.0"
android:scaleY="1.0" />
<Layout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</Constraint>
...
</ConstraintSet>
</MotionScene>
尽管layout_constraint*属性存在一些细微差别，但这里的关键是Transform，它将在collpased和expanded状态之间缩放文本。 MotionLayout将自动为我们进行这种缩放。 我们免费获得的是，如果我们将其他View限制在View的底部，他们将随着缩放应用于此View而移动。 所以视觉效果是它下面的View随着它的增长和收缩而移动。 在GIF中查看团队名称和分数如何随着标题文本的大小变化而移动。
我们使用相同的技术来缩放团队徽标和匹配时间文本(89:59)。 我不会单独介绍这些内容，但请查看accompanying source code以查看此内容。
但是匹配时间文本值得一看：
RES/XML/collapsing_toolbar.xml
<?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">
...
<ConstraintSet android:id="@+id/collapsed">
...
<Constraint android:id="@id/toolbar">
<Layout
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</Constraint>
...
<Constraint android:id="@id/time">
<Transform
android:scaleX="0.5"
android:scaleY="0.5" />
<Layout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@id/toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/score" />
</Constraint>
...
</ConstraintSet>
<ConstraintSet android:id="@+id/expanded">
...
<Constraint android:id="@id/toolbar">
<Layout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/time"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</Constraint>
...
<Constraint android:id="@id/time">
<Transform
android:scaleX="1.0"
android:scaleY="1.0" />
<Layout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/score"
android:layout_marginTop="8dp"/>
</Constraint>
...
</ConstraintSet>
</MotionScene>
正在进行相同类型的缩放，但在折叠状态下它位于Toolbar内部，但在展开状态下它位于其下方。
就其自身而言，这对于扩展状态来说效果不佳，因为文本本身很轻，而Toolbar下面的背景也很轻。 因此，我们需要将绿色“泡沫"降至Toolbar以下，以确保文本具有对比鲜明的背景。
泡沫本身就是一个VectorDrawable：
RES/抽拉/bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="16dp"
android:viewportWidth="150"
android:viewportHeight="50">
<path
android:fillColor="@android:color/white"
android:pathData="M0,0 a 25,25 0 0 1 25,25 a 25,25 0 0 0 25,25 h 50 a 25,25 0 0 0 25,-25 a 25,25 0 0 1 25,-25 Z" />
</vector>
它由一些弧线和水平线组成，实际上看起来像这样：
形状应该在我们之前看到的静态展开状态图像中可见，并且在布局中应用绿色。 它变得有趣的地方是如何在MotionScene中应用它：
RES/XML/collapsing_toolbar.xml
<?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">
...
<ConstraintSet android:id="@+id/collapsed">
...
<Constraint android:id="@id/toolbar_extension">
<Layout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/toolbar"
app:layout_constraintEnd_toEndOf="@id/time"
app:layout_constraintStart_toStartOf="@id/time"
app:layout_constraintTop_toBottomOf="@id/toolbar" />
</Constraint>
...
</ConstraintSet>
<ConstraintSet android:id="@+id/expanded">
...
<Constraint android:id="@id/toolbar_extension">
<Layout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/time"
app:layout_constraintEnd_toEndOf="@id/time"
app:layout_constraintStart_toStartOf="@id/time"
app:layout_constraintTop_toTopOf="@id/time" />
</Constraint>
...
</ConstraintSet>
</MotionScene>
在折叠状态下，此View的顶部和底部都被约束到Toolbar的底部。结果没有高度。
在展开状态下，此View的顶部和底部都被约束到匹配时间TextView的顶部和底部。它的高度与匹配时间TextView相匹配。
当MotionLayout在折叠状态和展开状态之间转换时，气泡的高度将发生变化，这会产生从Toolbar底部生长的气泡的错觉。我们实际上可以得到一个微妙的不同效果，我们保持泡沫与匹配时间TextView保持一致。但我个人更喜欢这种效果，因为它会使气泡看起来增长而不是从Toolbar中滑出 - 我觉得如果感觉更有机。
我们完成了。如果我们把所有这些放在一起，我们得到以下结果：
这种特定的实现可能不适合某些情况，因为匹配时间将覆盖Toolbar下面的任何位置，但我认为形状改变工具栏扩展是一个有趣的想法，这就是我在这里分享它的原因。
here提供了本文的源代码。
