【翻译】MotionLayout实现折叠工具栏（Part 1）

2018-08-13 by Liuqingwen | Tags: Android 翻译 | Hits

一、说明

没有严格按照中英对照进行的翻译，但是我尽量把意思翻译到位，能看原文的朋友可以直接欣赏原文啦。

本文特点：没有 Kotlin/Java 代码，讲解部分全为 XML 代码，阅读时间短，获取技能： MotionLayout 的入门和使用！发布时间： 8 月 10 号，作者： Mark Allison ，原文链接： https://blog.stylingandroid.com/motionlayout-collapsing-toolbar-part-1/

二、正文

谷歌 IO 2018 发布了 ConstraintLayout 2.0 版本，其中最重要的部分就是 MotionLayout 了，这玩意就是一个全新的、超牛的布局动画工具！ Nicolas Roard 哥们早已发布了一个关于 MotionLayout 的完美详情介绍，我强烈推荐大家去阅读一下，从中理解 MotionLayout 组件的基础架构。本系列教程中，我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为：一个折叠工具栏动画（ a Collapsing Toolbar ）。

在我们开始之前，有必要在这里澄清一下：在 CoordinatorLayout 中使用 CollapsingToolbarLayout 来实现折叠工具栏是没任何问题的。当然了，如果你已经在自己的 App 中使用了，那么你在学会了这里的知识后也没什么必要做更改。也就是说， CoordinatorLayout 这个布局已经提供了一些非常有用的行为动画，如果你尝试去修改它，或者创建一些基于它的自定义动画，那都是相当困难的。相反， MotionLayout 提供了更多的灵活性，以我个人早期的经验来看，这是一个非常简单又易学的效果神器。而且， MotionLayout 让那些 CoordinatorLayout 望而却步的动画变得简单直接。学习来吧，骚年！

MotionLayout 和安卓上许多其他的动画框架的一个主要不同点在于：视图动画和属性动画运行的时长是给定的，比如指定动画的时长，取消某个动画都是可行的，但是不能做到用户控制一个正在进行中的动画。举个例子，一个折叠工具栏应该根据用户的滚动进行展开和折叠，所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。

废话不多说，让我们看下我们所要尝试模拟做到的行为动作。这里的代码展示了一个折叠工具栏，应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。

res/layout/activity_main_traditional.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
    <androidx.recyclerview.widget.RecyclerView
      android:id="@+id/recyclerview"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintTop_toBottomOf="@id/appbar"
      app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
    <com.google.android.material.appbar.AppBarLayout
      android:id="@+id/appbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:fitsSystemWindows="true"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
      <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleGravity="bottom"
        app:expandedTitleMarginEnd="@dimen/activity_horizontal_margin"
        app:expandedTitleMarginStart="@dimen/activity_horizontal_margin"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:title="@string/app_name">
 
        <ImageView
          android:id="@+id/toolbar_image"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:adjustViewBounds="true"
          android:contentDescription="@null"
          android:fitsSystemWindows="true"
          android:scaleType="centerCrop"
          android:src="@drawable/beach_huts" />
 
        <androidx.appcompat.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          app:layout_collapseMode="pin"
          app:popupTheme="@style/ThemeOverlay.AppCompat" />
      </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

运行这段代码所得到的动画行为是这样的：

使用 MotionLayout 做到接近上述动画效果非常简单。首先从我们的布局文件开始：

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:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity"
  app:layoutDescription="@xml/collapsing_toolbar"
  tools:showPaths="true">
 
  <androidx.recyclerview.widget.RecyclerView
    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_image" />
 
  <ImageView
    android:id="@+id/toolbar_image"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:adjustViewBounds="true"
    android:contentDescription="@null"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:fitsSystemWindows="true"
    android:scaleType="center"
    android:src="@drawable/beach_huts"
    android:background="@color/colorPrimary" />
 
  <ImageView
    android:id="@android:id/home"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingStart="16dp"
    android:paddingEnd="16dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp"
    android:src="@drawable/abc_ic_ab_back_material"
    android:tint="?android:attr/textColorPrimaryInverse"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>
 
  <TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="24dp"
    android:text="@string/app_name"
    android:textColor="?android:attr/textColorPrimaryInverse"
    android:textSize="32sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@id/toolbar_image"
    app:layout_constraintStart_toStartOf="parent" />
 
</androidx.constraintlayout.motion.widget.MotionLayout>

这基本上是使用标准的 ConstraintLayout 创建出来的一个布局，唯一区别在于父布局实际为一个 MotionLayout 布局（ MotionLayout 继承于 ConstraintLayout ，所以我们能够把它当做一个普通的 ConstraintLayout 来使用）。这个 MotionLayout 布局有一个属性名为： app:layoutDescription ，它也是奇迹所发生的地方。在这里我特意使用了最基本的 View 控件类型，用来说明视图本身并没有产生任何其他的行为动作。当然在实际 App 开发过程中我应该会使用 AppBarLayout 布局配合 Toolbar 控件吧。

如果在设计视图中查看这个布局，我们能看到布局所展示的工具栏处于展开的状态：

我刚刚提到奇迹发生的地方在于布局文件中的 app:layoutDescription 属性，那么现在我们来仔细瞧瞧它吧：