MontionLayout：打开动画新世界大门（其一）

- 日理万妓 2024-04-17 20:01 78阅读 0赞

## 前言 ##

本文转载自水月沐风，分享了 MontionLayout 的动画效果，相信对大家有所帮助。

**水月沐风**的博客地址

> https://juejin.im/post/5d595328f265da03c34bfa59

最初接触到 **MotionLayout** 是在国外知名博客的 Android 专栏上。第一眼见到 `MotionLayout``MotionLayout` 的外文专栏相关介绍已足够详细，所以本文仅对其进行总结和简单应用。老规矩，正文开始前先上一张图：

简介

由于本文的受众需要有一点 `ConstraintLayout` 的用法基础，如果你对它并不熟悉，可以先去花几分钟看一下本人之前的译文：带你领略 ConstraintLayout 1.1 的新功能。回到正题，什么是***MontionLayout*** ？很多人可能会对这个名词比较陌生，但如果说到它的前身 — **`ConstraintLayout`***MontionLayout* 其实是 Google 在去年开发者大会上新推的布局组件。我们先来看看 **Android 官方**对于它的定义：

>***MotionLayout is a layout type that helps you manage motion and widget animation in your app. MotionLayout is a subclass of `ConstraintLayout` and builds upon its rich layout capabilities.***

简单翻译过来就是：`MontionLayout` 是一个能够帮助我们在 app 中 **管理手势** 和控件 **动画** 的布局组件。它是`ConstraintLayout` 的子类并且基于它自身丰富的布局功能来进行构建。

当然，你也可以按照字面意思将它简单理解为“运动布局”。为什么这么说呢？通过上图来对比传统的布局组件（如：`FrameLayout`、`LinearLayout``MotionLayout` 是布局组件中的一个“里程碑”，由此开始就告别了 XML 文件中只能”静态“操作 UI 的历史。通过`MotionLayout`，我们就能更加轻易处理其内部子 `View` 的手势操作和"运动"效果了。正如 *Nicolas Roard* 所说的那样：

> *你可以在 MontionLayout 功能方面将其看作是属性动画、TransitionManager 和 CoordinatorLayout 的结合体* 。

## MotionLayout 基础 ##

首先，我们需要从 `MotionLayout` 的一些基本属性和用法讲起，这样对于我们后面的实际操作将会很有帮助。

#### 引入 MotionLayout 库 ####

1dependencies {
    2    implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta2'
    3}
    4复制代码

目前，`MotionLayout` 仍处于 `beta` 版本，虽然官方之前说过 `MotionLayout` 的动画辅助工具将会在 `beta``ConstraintLayout`

#### 在布局文件中使用 MotionLayout ####

想要使用 `MotionLayout`，只需要在布局文件中作如下声明即可：

1<android.support.constraint.motion.MotionLayout
     2        xmlns:android="http://schemas.android.com/apk/res/android"
     3        xmlns:tools="http://schemas.android.com/tools"
     4        xmlns:app="http://schemas.android.com/apk/res-auto"
     5        android:layout_width="match_parent"
     6        android:layout_height="match_parent"
     7        app:layoutDescription="@xml/scene1">
     8
     9</android.support.constraint.motion.MotionLayout>
    10复制代码

由于 `MotionLayout` 作为 `ConstraintLayout` 的子类，那么就自然而然地可以像 `ConstraintLayout``MotionLayout` 的用处可远不止这些。我们先来看看 MotionLayout 的构成：

![640?wx\_fmt=png][640_wx_fmt_png]

由上图可知，MotionLayout 可分为 *`<View>`* 和 *`<Helper>`* 两个部分。 *`<View>`* 部分可简单理解为一个`ConstraintLayout`，至于 *`<Helper>`* 其实就是我们的“动画层”了。MotionLayout 为我们提供了`layoutDescription` 属性，我们需要为它传入一个 `MotionScene` 包裹的 `XML`

## MotionScene：传说中的“百宝袋” ##

什么是 MotionScene？结合上图 MotionScene 主要由三部分组成： **`StateSet`** 、**`ConstraintSet`** 和 **`Transition`** 。为了让大家快速理解和使用 MotionScene，本文将重点讲解`ConstarintSet` 和 `Transition`，至于 `StateSet`

首先，我们从实现下面这个简单的效果讲起：

![640?wx\_fmt=gif][640_wx_fmt_gif]

GIF 画质有点渣，见谅，但从上图我们可以发现这是一个简单的平移动画，通过点击自身（篮球）来触发，让我们来通过 MotionLayout

布局文件很简单，只不过你可能会注意到，我们对 `ImageView` 并没有添加任何约束，原因在于：我们会在 `MotionScene` 中声明`ConstraintSet`，里面将包含该 `ImageView` 的“运动”起始点和终点的约束信息。当然你也可以在布局文件中对其加以约束，**但`MotionScene` 中对于控件约束的优先级会高于布局文件中的设定** 。这里我们通过 `layoutDescription` 来为`MotionLayout` 设置它的 `MotionScene` 为 `step1`，接下来就让我们一睹 `MotionScene` 的芳容：

1<?xml version="1.0" encoding="utf-8"?>
     2
     3<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
     4             xmlns:app="http://schemas.android.com/apk/res-auto">
     5    
     6    <Transition
     7        app:constraintSetStart="@id/start"
     8        app:constraintSetEnd="@id/end"
     9        app:duration="2200">
    10        <OnClick
    11                app:targetId="@id/ball"
    12                app:clickAction="toggle" />
    13    </Transition>
    14
    15    
    16    <ConstraintSet android:id="@+id/start">
    17        <Constraint
    18                android:id="@+id/ball"
    19                android:layout_width="48dp"
    20                android:layout_height="48dp"
    21                android:layout_marginStart="12dp"
    22                android:layout_marginTop="12dp"
    23                app:layout_constraintStart_toStartOf="parent"
    24                app:layout_constraintTop_toTopOf="parent"/>
    25    </ConstraintSet>
    26
    27    
    28    <ConstraintSet android:id="@+id/end">
    29        <Constraint
    30                android:id="@+id/ball"
    31                android:layout_width="48dp"
    32                android:layout_height="48dp"
    33                android:layout_marginEnd="12dp"
    34                android:layout_marginBottom="12dp"
    35                app:layout_constraintEnd_toEndOf="parent"
    36                app:layout_constraintBottom_toBottomOf="parent"/>
    37    </ConstraintSet>
    38
    39</MotionScene>
    40复制代码

首先，可以发现我们定义了两个 *`<ConstraintSet>`* ，分别描述了这个? `ImageView`*`<Transition>`* 元素了。事实上，我们都知道，动画都是有开始位置和结束位置的，而 `MotionLayout`**Path**

回到上面这个例子，我们只需要为 `Transition` 设置起始位置和结束位置的 `ConstraintSet` 并设置动画时间即可，剩下的都交给`MotionLayout` 自动去帮我们完成。当然你也可以通过 `onClick` 点击事件来触发动画，绑定目标控件的 id 以及通过`clickAction` 属性来设置点击事件的类型，这里我们设置的是`toggle`，即通过反复点击控件来切换动画的状态，其他还有很多属性可以参照官方文档去研究，比较简单，这里就不一一讲解它们的效果了。如此一来，运行一下就能看到上面的效果了。另外，为了方便测试，我们可以给`MotionLayout` 加上调试属性： *`app:motionDebug="SHOW_PATH"`* ，然后就能轻易的查看其动画内部的运动轨迹：

![640?wx\_fmt=gif][640_wx_fmt_gif 1]

什么？你说这个动画效果太基础？那好，我就来个简陋版的“百花齐放”效果吧，比如下面这样：

![640?wx\_fmt=gif][640_wx_fmt_gif 2]

首先，让我们分析一下这个效果：仔细看我们可以发现，通过向上滑动蓝色的 Android

1<?xml version="1.0" encoding="utf-8"?>
     2<android.support.constraint.motion.MotionLayout
     3        xmlns:android="http://schemas.android.com/apk/res/android"
     4        xmlns:tools="http://schemas.android.com/tools"
     5        xmlns:app="http://schemas.android.com/apk/res-auto"
     6        android:layout_width="match_parent"
     7        android:layout_height="match_parent"
     8        app:motionDebug="SHOW_PATH"
     9        app:layoutDescription="@xml/step2"
    10        tools:context=".practice.MotionSampleActivity">
    11    <ImageView
    12            android:id="@+id/ic_android_blue"
    13            android:layout_width="42dp"
    14            android:layout_height="42dp"
    15            android:src="@mipmap/android_icon_blue"/>
    16    <ImageView
    17            android:id="@+id/ic_android_left"
    18            android:layout_width="42dp"
    19            android:layout_height="42dp"
    20            android:src="@mipmap/android_icon_purple"/>
    21    <ImageView
    22            android:id="@+id/ic_android_right"
    23            android:layout_width="42dp"
    24            android:layout_height="42dp"
    25            android:src="@mipmap/android_icon_orange"/>
    26    <TextView
    27            android:id="@+id/tipText"
    28            android:text="Swipe the blue android icon up"
    29            android:layout_width="wrap_content"
    30            android:layout_height="wrap_content"
    31            app:layout_constraintEnd_toEndOf="parent"
    32            android:layout_marginEnd="16dp"
    33            android:layout_marginTop="16dp"
    34            app:layout_constraintTop_toTopOf="parent"/>
    35</android.support.constraint.motion.MotionLayout>
    36复制代码

下面我们来看下 `step2` 中的 MotionScene：

1<?xml version="1.0" encoding="utf-8"?>
     2
     3
     4<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
     5             xmlns:app="http://schemas.android.com/apk/res-auto">
     6    
     7    <ConstraintSet android:id="@+id/start">
     8        <Constraint
     9                android:id="@+id/ic_android_blue"
    10                android:layout_width="42dp"
    11                android:layout_height="42dp"
    12                android:layout_marginBottom="20dp"
    13                app:layout_constraintStart_toStartOf="parent"
    14                app:layout_constraintEnd_toEndOf="parent"
    15                app:layout_constraintBottom_toBottomOf="parent"/>
    16        <Constraint
    17                android:id="@+id/ic_android_left"
    18                android:layout_width="42dp"
    19                android:layout_height="42dp"
    20                android:alpha="0.0"
    21                android:layout_marginBottom="20dp"
    22                app:layout_constraintStart_toStartOf="parent"
    23                app:layout_constraintEnd_toEndOf="parent"
    24                app:layout_constraintBottom_toBottomOf="parent"/>
    25        <Constraint
    26                android:id="@+id/ic_android_right"
    27                android:layout_width="42dp"
    28                android:layout_height="42dp"
    29                android:layout_marginBottom="20dp"
    30                android:alpha="0.0"
    31                app:layout_constraintStart_toStartOf="parent"
    32                app:layout_constraintEnd_toEndOf="parent"
    33                app:layout_constraintBottom_toBottomOf="parent"/>
    34    </ConstraintSet>
    35
    36    
    37    <ConstraintSet android:id="@+id/end">
    38        <Constraint
    39                android:id="@+id/ic_android_left"
    40                android:layout_width="58dp"
    41                android:layout_height="58dp"
    42                android:layout_marginEnd="90dp"
    43                android:alpha="1.0"
    44                app:layout_constraintHorizontal_chainStyle="packed"
    45                app:layout_constraintStart_toStartOf="parent"
    46                app:layout_constraintEnd_toStartOf="@id/ic_android_blue"
    47                app:layout_constraintTop_toBottomOf="@id/tipText"/>
    48        <Constraint
    49                android:id="@+id/ic_android_blue"
    50                android:layout_width="58dp"
    51                android:layout_height="58dp"
    52                app:layout_constraintEnd_toStartOf="@id/ic_android_right"
    53                app:layout_constraintStart_toEndOf="@id/ic_android_left"
    54                app:layout_constraintTop_toBottomOf="@id/tipText"/>
    55        <Constraint
    56                android:id="@+id/ic_android_right"
    57                android:layout_width="58dp"
    58                android:layout_height="58dp"
    59                android:layout_marginStart="90dp"
    60                android:alpha="1.0"
    61                app:layout_constraintStart_toEndOf="@id/ic_android_blue"
    62                app:layout_constraintEnd_toEndOf="parent"
    63                app:layout_constraintTop_toBottomOf="@id/tipText"/>
    64    </ConstraintSet>
    65    
    66    <Transition
    67            app:constraintSetStart="@id/start"
    68            app:constraintSetEnd="@id/end">
    69        
    70        <OnSwipe app:touchAnchorId="@id/ic_android_blue"/>
    71    </Transition>
    72</MotionScene>
    73复制代码

上面代码其实很好理解，之前我们定义了一个控件的 `Constraint`，现在只需要多加两个即可。由于三个 Android`ConstraintLayout` 的基础，就不多说了。接着将结束位置的左、右 Android 机器人透明度设置为`MotionLayout` 会自动处理目标控件 **alpha** 属性的变化效果，让其看起来依旧丝滑。

另外，我们这里没有再通过 *`<OnClick>`* 来触发动画效果，类似的，我们使用了 *`<OnSwipe>`* 手势滑动来触发动画，只需要指定`touchAnchorId` 为蓝色小机器人即可，怎么样，是不是有种“拍案惊奇”的感觉?。此外，你可以通过指定 `touchAnchorSide` 和`dragDirection`

到这里，你可能会说：前面两个示例的动画轨迹一直是"直线"，如果想要某段动画过程的轨迹是"曲线"效果可以吗？当然没问题！ **Keyframes**

## KeyFrameSet：让动画独树一帜 ##

如果我们想实现“独树一帜”的动画交互效果，那就离不开 KeyFrameSet

![640?wx\_fmt=gif][640_wx_fmt_gif 3]

以大家的慧眼不难发现：风车的运动轨迹为曲线，并且旋转并放大至中间位置时会达到零界点，然后开始缩小。布局代码就不上了，很简单，里面唯一重要的就是我们需要实现的`step3.xml` 了：

1<?xml version="1.0" encoding="utf-8"?>
     2
     3
     4<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
     5             xmlns:app="http://schemas.android.com/apk/res-auto">
     6    
     7    <ConstraintSet android:id="@+id/start">
     8
     9        <Constraint
    10                android:id="@id/windmill"
    11                android:layout_width="40dp"
    12                android:layout_height="40dp"
    13                android:layout_marginStart="12dp"
    14                android:layout_marginBottom="12dp"
    15                app:layout_constraintStart_toStartOf="parent"
    16                app:layout_constraintBottom_toBottomOf="parent"/>
    17
    18        <Constraint
    19                android:id="@id/tipText"
    20                android:layout_width="wrap_content"
    21                android:layout_height="wrap_content"
    22                android:alpha="0.0"
    23                app:layout_constraintStart_toStartOf="parent"
    24                app:layout_constraintBottom_toBottomOf="@id/windmill"
    25                app:layout_constraintTop_toTopOf="@id/windmill"/>
    26    </ConstraintSet>
    27    
    28    <ConstraintSet android:id="@+id/end">
    29        
    30        <Constraint
    31                android:id="@id/windmill"
    32                android:layout_width="40dp"
    33                android:layout_height="40dp"
    34                android:layout_marginBottom="12dp"
    35                android:layout_marginEnd="12dp"
    36                app:layout_constraintEnd_toEndOf="parent"
    37                app:layout_constraintBottom_toBottomOf="parent"/>
    38        <Constraint
    39                android:id="@+id/tipText"
    40                android:layout_width="wrap_content"
    41                android:layout_height="wrap_content"
    42                android:layout_marginBottom="12dp"
    43                android:alpha="1.0"
    44                android:layout_marginEnd="72dp"
    45                app:layout_constraintEnd_toEndOf="parent"
    46                app:layout_constraintBottom_toBottomOf="parent"/>
    47    </ConstraintSet>
    48
    49    
    50    <Transition
    51            app:constraintSetStart="@id/start"
    52            app:constraintSetEnd="@id/end">
    53
    54        <KeyFrameSet>
    55            <KeyPosition
    56                    app:framePosition="50"
    57                    app:motionTarget="@id/windmill"
    58                    app:keyPositionType="parentRelative"
    59                    app:percentY="0.5"/>
    60            
    61            
    62            <KeyAttribute
    63                    app:motionTarget="@id/windmill"
    64                    android:rotation="-360"
    65                    android:scaleX="2.0"
    66                    android:scaleY="2.0"
    67                    app:framePosition="50"/>
    68            
    69            <KeyAttribute
    70                    app:motionTarget="@id/windmill"
    71                    android:rotation="-720"
    72                    app:framePosition="100"/>
    73            
    74            <KeyAttribute
    75                    app:motionTarget="@id/tipText"
    76                    app:framePosition="85"
    77                    android:alpha="0.0"/>
    78        </KeyFrameSet>
    79
    80        <OnSwipe
    81            app:touchAnchorId="@id/windmill"
    82            app:touchAnchorSide="bottom"
    83            app:dragDirection="dragRight"/>
    84    </Transition>
    85
    86</MotionScene>
    87复制代码

从上述代码我们可以发现：`KeyFrameSet` 需要被包含在 `Transition` 里面，同时 `KeyFrameSet` 中定义了*`<KeyPosition>`* 和 *`<KeyAttribute>`* 两种元素，它们主要用来设置动画某个位置的关键帧，进而**为某段动画指定所期望的效果** 。顾名思义，`KeyPosition` 用于指定动画某个关键帧的位置信息，而 `KeyAttribute``KeyFrameSet` 中还支持 *`<KeyCycle>`* 和*`<KeyTimeCycle>`* 来让动画变得更加有趣和灵活，因篇幅有限，将在后续文章对二者进行讲解。

我们先来看下 `KeyPosition` 的构成：

![640?wx\_fmt=png][640_wx_fmt_png 1]

从上图可见，`keyPositionType` 一共有三种，本文使用的是 `parentRelative`，即以整个 `MotionLayout``framePosition` 属性来 **指定关键帧所在的位置** ，取值范围为 `0 - 100`，本示例中设置的 `50``percentX` 和 `percentY` 来设置该关键帧位置的偏移量，它们取值一般为 `0 — 1`，当然也可以设置为负数或者大于一，比如，本示例中如果没有设置偏移量，那么动画的轨迹无疑是一条平行于 x 轴的直线，但通过设置`app:percentY="0.5"`，那么风车就会在动画中点位置向 y 轴方向偏移一半的高度，即下图的效果（开始 `debug` 模式）：

![640?wx\_fmt=png][640_wx_fmt_png 2]

可能会有人问了：为什么轨迹不是三角形，而是曲线呢？哈哈，这个问题问得好！因为 `MotionLayout`

了解完 `KeyFrameSet` 的用法，那么我们就很轻易的实现下面这个效果啦：

![640?wx\_fmt=gif][640_wx_fmt_gif 4]

代码就不贴了，`MotionLayout` 系列代码都会上传至 GitHub

***本文全部代码：github.com/Moosphan/Co…***

## 最后 ##

本文的出发点是希望仅仅为大家提供一个“钥匙孔”的角色，通过这个“孔”，大家可以依稀看见门里“宝藏”的余光，想要打开门寻得宝藏，就需要大家"事必躬亲"，拿到“钥匙”来打开这扇门了?。当然，大家也可以继续关注我的后续之作，来发现更多`MontionLayout` 的宝藏。

## 推荐阅读 ##

[Android 面试必备 - 知识图谱][Android _ -]

[致刚入职场的你 - 程序员的成长笔记][-]

[干起来，你就超过了 50% 的人][50_]

[一个程序员的五年总结，给你不一样的角度][Link 1]

[Fragment全解析系列（一）：那些年踩过的坑][Fragment]

[Fragment全解析系列（二）：正确的使用姿势][Fragment 1]

[带你全面了解 Android 内存优化][Android]

[Android自定义控件进阶篇，自定义LayoutManager][Android_LayoutManager]

[策略模式 — 孔明排兵布阵][Link 2]

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] stormjun94

**扫一扫，欢迎关注我的公众号 stormjun94。如果你有好的文章，也欢迎你的投稿。**

[640_wx_fmt_png]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/ibqjtLERibJ1ribayz766FFthyA1Or1leIpesVYfWiblUqhEr58erxkib4FpB4lyUQmZSj8KqFibdLLMdYJf2NiaWvQHA/640?wx_fmt=png
[640_wx_fmt_gif]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/ibqjtLERibJ1ribayz766FFthyA1Or1leIpFdZ8daNENctrFCNHEx5QrBgX6Enfs5iaasbH3jK9f6RNCw5OicP71thg/640?wx_fmt=gif
[640_wx_fmt_gif 1]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/ibqjtLERibJ1ribayz766FFthyA1Or1leIpicGd0XW9erJu49XU3IKddXKQicaoicXVvGLyBsFBXia0aVBq38e5icWiacmw/640?wx_fmt=gif
[640_wx_fmt_gif 2]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/ibqjtLERibJ1ribayz766FFthyA1Or1leIpg6fkgBB4OH9jmm1JMhZbZf8bKnB2pYGyvkp2icsPRtcTqdydUfsbM9w/640?wx_fmt=gif
[640_wx_fmt_gif 3]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/ibqjtLERibJ1ribayz766FFthyA1Or1leIpDLnjOlbKC6NvXLgBTm1QjGSIxSrw1e5W5MicicKHXBLooaLtSYSjG5VA/640?wx_fmt=gif
[640_wx_fmt_png 1]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/ibqjtLERibJ1ribayz766FFthyA1Or1leIpjZY9GD4gbcanBkjEkpWKPWmZbuYQiaGyzeIHXHBDvY5T3rhmbjeibPIA/640?wx_fmt=png
[640_wx_fmt_png 2]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/ibqjtLERibJ1ribayz766FFthyA1Or1leIpFTPnibClcjIibawdbMQ5mVuZOYv9uvq3canGqImVqXnzQqsHH2CTaiapA/640?wx_fmt=png
[640_wx_fmt_gif 4]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/ibqjtLERibJ1ribayz766FFthyA1Or1leIpicQyTc6xJSeyj1sRCq2EZCMhmia4jX1d4d4BBtFicX4qBfnXtWzmaibeCg/640?wx_fmt=gif
[Android _ -]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484191&idx=1&sn=9295887b6c834b9b1d381a0739883ba9&chksm=fad95c5fcdaed54919eb20f8381c07c0b4643233824f8092876bead2a6ddc7e9c607eb101d67&scene=21#wechat_redirect
[-]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484138&idx=2&sn=5685e895e85ad1a08b30750885f78644&chksm=fad95daacdaed4bc0b7445db3db62a64894957be350bc87f9bc4b3eff2d0f425c54ed5422a8f&scene=21#wechat_redirect
[50_]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484138&idx=1&sn=0d08f5a584c19bb93563786c856f8723&chksm=fad95daacdaed4bcda381cdd41a4e6035d853ce9ad4ea274883fe9787fba9683dc886b3a0b9f&scene=21#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484174&idx=1&sn=680e04bf3f8d74d7acf640d9479ae926&chksm=fad95c4ecdaed5588fe400eee062dad2f41156ee307ca00b8c1f6b530dff73cb7688c738a48b&scene=21#wechat_redirect
[Fragment]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484179&idx=1&sn=a2b0dd7ef0d5e21f2124d9c833f4155a&chksm=fad95c53cdaed545fd9757fffb26a637c80f4b9f19e8415fe53fcde5609405d52b78653ba146&scene=21#wechat_redirect
[Fragment 1]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484184&idx=1&sn=3b26b7a986d0d6387cc4dfb0c2cb7325&chksm=fad95c58cdaed54e970a9b4c03e10897837aea0bd751bab5c5f056dd8e258ed207980da962ab&scene=21#wechat_redirect
[Android]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484195&idx=1&sn=bf495583bf8b3e4a658429ee39f3af4e&chksm=fad95c63cdaed575741de5fa2943534e3c17fa4a6509459bd20c88015b78349249286fe91175&scene=21#wechat_redirect
[Android_LayoutManager]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484199&idx=1&sn=8f192d7041934979ee723ca3088462b4&chksm=fad95c67cdaed571af3cf7389853f47569fb2bbadf1db43d149d0136c6a59767fb1e27dede20&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzUzODQxMzYxNQ==&mid=2247484213&idx=1&sn=e429334417156539cbb84d1dd77b3342&chksm=fad95c75cdaed563ba0d26d139ce27ede3ee032e735f4366fd578c52b48f28131d3452cb508f&scene=21#wechat_redirect
[640_wx_fmt_jpeg]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/ibqjtLERibJ1pdZKpQgaUI9fc9Ycn3hEts7uciaX7DicBymKsJLObsDPkicaUCjfOhicvvUibREyMeq467AKJ9B5Ssjfg/640?wx_fmt=jpeg