引言

关于 ViewModel ，Android 开发的小伙伴应该都非常熟悉，无论是新项目还是老项目，基本都会使用到。而 ViewModel 作为 JetPack 核心组件，其本身也更是承担着不可或缺的作用。

因此，了解 ViewModel 的设计思想更是每个应用层开发者必不可缺的基本功。

随着这两年 ViewModel 的逐步迭代，比如 SaveStateHandle 的加入等，ViewModel 也已经不是最初版本的样子。要完全理解其设计体系，往往也要伴随着其他组件的基础，所以并不是特别容易能被开发者吃透。

故本篇将以最新视角开始，与你一起，用力一瞥 ViewModel 的设计原理。

本文对应的组件版本：

• Activity-ktx-1.5.1


• ViewModel-ktx-2.5.1

本篇定位中等，将从背景与使用方式开始，再到源码解读。由浅入深，解析 ViewModel 的方方面面。

导航

学完本篇，你将了解或明白以下内容：

• ViewModel 的使用方式；


• SavedStateHandle 的使用方式；


• ViewModel 创建与销毁流程；


• SavedStateHandle 创建流程；

好了，让我们开始吧! 🐊

基础概念

在开始本篇前，我们先解释一些基础概念，以便更加清晰的了解后续的状态保存相关。

何谓配置变更?

配置变更指的是，应用在运行时，内置的配置参数变更从而触发的Activity重新创建。

常见的场景有：旋转屏幕、深色模式切换、屏幕大小变化、更改了默认语言或者时区、更改字体大小或主题颜色等。

何谓异常重建？

异常重建指的是非配置变更情况下导致的 Activity 重新创建。

常见场景大多是因为 内存不足，从而导致后台应用被系统回收 ，当我们切换到前台时，从而触发的重建，这个机制在Android中为 Low Memory Killer 机制，简称 LMK。

可以在开发者模式，限制后台任务数为1，从而测试该效果。

ViewModel存在之前的世界

在 ViewModel 出现之前,对于 View 逻辑与数据，我们往往都是直接存在 Activity 或者 Fragment 中，优雅一点，会细分到具体的单独类中去承载。当配置变更时，无可避免，会触发界面重绘。相应的，我们的数据在没有额外处理的情况下，往往也会被初始化，然后在界面重启时重新加载。

但如果当前页面需要维护某些状态不被丢失呢，比如 选择、上传状态 等等? 此时问题就变得棘手起来。

稍有经验同学会告诉你，在 onSaveInstanceState 中重写，使用bundle去存储相应的状态啊？➡️

但状态如果少点还可以，多一点就非常头痛，更别提包含继承关系的状态保存。 😶‍🌫️

所以，不出意外的话，我们 App 的 Activity-manifest 中通常默认都是下列写法:

android:configChanges="keyboard|orientation|uiMode|..."

这也是为啥Android程序普遍不支持屏幕旋转的一部分原因，从源头扼杀因部分配置变更导致的状态丢失问题。🐶保命

VideModel存在之后的世界

随着 ViewModel 组件推出之后，上述因配置变更而导致的状态丢失问题就迎刃而解。

ViewModel 可以做到在配置变更后依然持有状态。所以，在现在的开发中，我们开始将 View数据 与 逻辑 藏于 ViewModel 中，然后对外部暴漏观察者，比如我们常常会搭配 LiveData 一起使用，以此更容易的保持状态同步。

关于 ViewModel 的生命周期，具体如下图所示：

虽然 ViewModel 非常好用，但 ViewModel 也不是万能，其只能避免配置变更时避免状态丢失。比如如果我们的App是因为 内存不足 而被系统kill 掉，此时 ViewModel 也会被清除 🔺 。

不过对于这种情况，仍然有以下三个方法可以依然保存我们的状态:

• 重写 onSaveInstanceState() 与 onRestoreInstanceState();


• 使用 SavedState,本质上其实还是 onSaveInstanceState() ；


• 使用 SavedStateHandle ，本质上是依托于 SaveState 的实现;

上述的后两种都是随着 JetPack 逐步被推出，可以理解为是对原有的onSavexx的封装简化，从而使其变得更易用。

关于这三种方法，我们会在 SavedStateHandle 流程解析中再进行具体叙述，这里先提出来，留个伏笔。

ViewModel使用方式

作为文章的开始，我们还是要先聊一聊 ViewModel 的使用方式，如下例所示:

当然，你也可以选择引入 activity-ktx ,从而以更简便的写法去写：

implementation 'androidx.activity:activity-ktx:1.5.1'



private val mainModel by viewModels()

示例比较简单，我们创建了一个 ViewModel ，如上所示，并在 MainActivity 的 onCreate() 中进行了初始化。

这也是我们日常的使用方式，具体我们这里就不再做阐述。

SavedStateHandle使用方式

我们知道，ViewModel 可以处理因为配置更改而导致的的状态丢失，但并不保证异常终止的情况，而官方的 SavedStateHandle 正是用于这种情况的解决方式。

SavedStateHandle ,如名所示，用于保存状态的手柄。再细化点就是，用于保存状态的工具，从而配合 ViewModel 而使用，其内部使用一个 map 保存我们要存储的状态，并且其本身使用 operator 重载了 set() 与 get() 方法，所以对于我们来说，可以直接使用 键值对 的形式去操作我们要保存的状态，这也是官方为什么称 SavedStateHandle 是一个 具有键值映射Map 特性的原因。

在 Fragment1.2 及 Activity1.1.0 之后, SavedStateHandle 可以作为 ViewModel 的构造函数，从而反射创建带有 SavedStateHandle 的 ViewModel 。

具体使用方式如下：

我们在 MainViewModel 构造函数中新增了一个参数 state:SavedStateHandle ,这个参数在 ViewModel 初始化时，会帮我们自动进行注入。从而我们可以利用 SavedStateHandle 以key-value的形式去保存一些 自定义状态 ,从而在进程异常终止，Act重建后，也能获取到之前保存的状态。

至于为什么能实现保存状态呢？

主要是因为 SavedStateHandle 内部默认有一个 SavedStateRegistry.SavedStateProvider 状态保存提供者对象，该对象会在我们创建ViewModel 时绑定到 SavedStateRegistry 中，从而在我们 Activity 异常重建时做到状态的 恢复 与 绑定 (通过重写 onSavexx() 与 onCreate() 方法监听)。

关于这部分内容，我们下面的源码解析部分也会再聊到，这里我们只需要知道是这么回事即可。

ViewModel源码解析

本章节，我们将从 ViewModelProvider() 开始，理清 ViewModel 的 创建 与 销毁 流程，从而理解其背后的 [魔法]。

不过 ViewModel 的源码其实并不是很复杂，所以别担心😉。

仔细想想，要解析ViewModel的源码，应该从哪里入手呢？

ViewModelProvider(this).get(MainViewModel::class.java)

最简单的方式还是初始化这里，所以我们直接从 ViewModelProvider() 初始化开始->

ViewModelProvider(this)

public constructor(owner: ViewModelStoreOwner)

	: this(owner.viewModelStore, defaultFactory(owner), defaultCreationExtras(owner))

相应的，这里开始，我们就涉及到了三个方面，即 viewModelStore 、 Factory、 Exras 。所以接下来我们就顺藤摸瓜，分别看看这三处的实现细节。

owner.viewModelStore

ViewModelStoreOwner 顾名思义，用于保存 ViewModelStore 对象。

而 ViewModelStore 是负责维护我们 ViewModel 实例的具体类，内部有一个 map 的合集，用于保存我们创建的所有 ViewModel ，并对外提供了 clear() 方法，以 便于非配置变更时清除缓存 。

defaultFactory(owner)

该方法用于初始化 ViewModel 默认的创造工厂🏭 。默认有两个实现，前者是 HasDefaultViewModelProviderFactory ，也是我们 Fragment 或者 ComponentActivity 都默认实现的接口，而后者是是指全局 NewInstanceFactory 。

两者的不同点在于，后者只能创建 空构造函数 的 ViewModel ，而前者没有这个限制。

示例源码：

HasDefaultViewModelProviderFactory 在 ComponentActivity 中的实现如下:

defaultCreationExtras(owner)

用于辅助 ViewModel 初始化时需要传入的参数，具体源码如下：

如上所示，默认有两个实现，前者是 HasDefaultViewModelProviderFactory ,也就是我们 ComponentActivity 实现的接口,具体的实现如下：

默认会帮我们注入 application 以及 intent 等，注意这里还默认使用了 getIntent().getExtras() 作为 ViewModel 的 默认状态 ，如果我们 ViewModel 构造函数中有 SavedStateHandle 的话。

更多关于 CreationExtras 可以了解这篇 创建 ViewModel 的新方式，CreationExtras 了解一下？

get(ViewModel::xx)

从缓存中获取现有的 ViewModel 或者 反射创建 新的 ViewModel。

示例源码如下：

当我们使用 get() 方法获取具体的 ViewModel 对象时，内部会先利用 当前包名+ViewModel类名 作为 key ，然后从 viewModelStore 中取。如果当前已创建，则直接使用；反之则调用我们的 ViewModel工厂 create() 方法创建新的 ViewModel。 创建完成后，并将其保存到 ViewModelStore 中。

create(modelClass,extras)

具体的创造逻辑里，这里的 factory 正是我们在 ViewModelProvider 初始化时，默认构造函数 defaultFactory() 方法中生成的SavedStateViewModelFactory ，所以我们直接去看这个工厂类即可。

具体源码如下：

create(key,modelClass)

兼容旧的版本以及用户操作行为。

相应的，这里我们还需要再提一下，LegacySavedStateHandleController.create() 方法：

当我们调用创建 ViewModel 时，内部会调用具体的 ViewModel 工厂去创建，如果当前 ViewModel 已创建，则直接返回，否则调用其 create() 方法创建新的 ViewModel 。在具体的创建方法中，需要判断当前构造函数是不是带 application 或者 SaveStateHandle ，从而调用合适的 newInstance() 方法，最后再将创建好的 ViewModel 添加到 ViewModelStore 的 缓存 中。

销毁流程

在初始化 ViewModelProvider 时，还记得我们需要传递的 ViewModelStoreOwner 吗？

而这个接口正是被我们的 ComponentActivity 或者 Fragment 各自实现，相应的 ViewModelStore 也是存在于我们的 ComponentActivity 中，所以我们直接去看示例代码即可：

以ComponentActivity为例，具体的源码如下：

如上所示：在初始化Activity时，内部会使用 lifecycle 添加一个生命周期观察者，并监听 onDestory() 通知(Act销毁)，如果当前销毁的原因非配置更改导致，则调用 ViewModeltore.clear() ，即清空我们的ViewModel缓存列表，从而这也是为什么 ViewModel 不支持非配置更改的实例保存。

你可能会惊讶，那还怎么借助SavedStateHandle保存状态，viewModel已经被清空了啊🤔?

如果你记得 Activity 传统处理状态的方式，此时也就能理解为什么了？因为源头都是一个地方，而 SavedStateHandle 仅仅只是一个更简便的封装而已。不过关于这个问题具体解析，我们将在下面继续进行探讨，从而理解 SavedStateHandle 的完整流程。

SavedStateHandle流程解析

关于 SavedStateHandle 的使用方法我们在上面已经叙述过了，其相关的 api 使用源码也不是我们所关注的重点，因为并不复杂，而我们主要要探讨的是其整个流程。

要摸清 SavedStateHandle 的流程，无非就两个方向，即 从何而来 ，又 在哪里进行使用 🤔。

在上面探索 ViewModel 创建流程时，我们发现，在 get(ViewModel:xx) 方法内部,最终的 create() 方法里，存在两个分支:

1. 存在附加参数extras(viewModel2.5.0新增);


2. 不存在附加参数extras(兼容历史版本或者用户自定义的行为);

相应的，如果 ViewModel 的构造函数中存在 SavedStateHandle ，则各自的流程如下所示：

• CreationExtras.createSavedStateHandle() ；


• LegacySavedStateHandleController.create(xx).handle ；

前者使用了 CreationExtras 的扩展函数 createSavedStateHandle() ：

而后者使用了 LegacySavedStateHandleController 控制器去创建：

总结：

上述流程中，两者大致是一样的，都需要先调用 consumeRestoredStateForKey(key) 拿到要还原的 Bundle , 再调用 SavedStateHandle.createHandle() 去创建 SavedStateHandle 。

那 SavedStateRegistry 又是什么呢？

我们的插入点也就在于此开始。

我们暂时先不关注如何还原状态，而是先搞清楚 SavedStateRegistry 是什么，它又是从哪来而传递来的。然后再来看 状态如何被还原，以及 SavedStateHandle 的创建流程，最后再搞清与 SavedStateRegistry 又是如何进行关联。

SavedStateRegistry

其是一个用于保存状态的注册表，往往由 SavedStateRegistryOwner 接口所提供实现，从而以便与拥有生命周期的组件相关联。

比如我们常用的 ComponentActivity 或者 Fragment 默认都实现了该接口。

源码如下所示：

分析上面的代码不难发现，SavedStateRegistry 本身提供了状态 还原 与 保存 的具体能力，并使用一个 map 保存当前所有的状态提供者，具体的状态提供者由 SavedStateProvider 接口实现。

SavedStateRegistryOwner

相当于是拥有 SavedStateRegistry 的具体类，因为本身继承了 LifecycleOwner 接口，故其也具备 生命感知 能力，如下所示：

interface SavedStateRegistryOwner : LifecycleOwner {

    val savedStateRegistry: SavedStateRegistry

}

以 ComponentActivity 为例，我们会发现，ComponentActivity 默认实现 SavedStateRegistryOwner 接口。即 SavedStateRegistry 的创造以及状态的保存，肯定也是 经过我们Activity转发处理(不然它自己怎么处理呢😅)。

而在上面探索 ViewModel 初始化时，我们了解到，ComponentActivity 默认实现了 HasDefaultViewModelProviderFactory 接口，用于创建ViewModel工厂 。相应的，其接口方法 getDefaultViewModelProviderFactory() 默认返回的是 SavedStateViewModelFactory ,即支持状态保存的ViewModel工厂。而该工厂构造函数中正是需要接受一个 SavedStateRegistry 变量，也正是我们 ComponentActivity 中默认保存的实例，所以也不难猜测 ViewModel工厂 是如何与 SavedStateRegistry 如何关联的。

以 ComponentActivity 的实现为例，源码如下：

ComponentActivity 初始化时，会创建一个 用于保存状态注册表的控制器 SavedStateRegistryController 对象，见面知意，不难猜出，其是用于控制 SavedStateRegistry 的具体类。并且该控制器对象会在 onCreate() 中调用 performRestore() 还原状态，并在onSaveInstanceState() 中去保存状态，此时也就解释了为什么 SavedStateRegistry 能做到状态保存。

相应的，我们还是要再去看看 SavedStateRegistryController ，以便更好的理解。

SavedStateRegistryController

用于控制 SavedStateRegistry ,对外提供了 初始化 ，状态 还原、保存 等方法，如下所示：

简而言之，其主要用于辅助 SavedStateRegistry 进行状态保存与还原。

小结

我们再回顾一下上面的步骤，在只关心 SavedStateHandle 如何被创建这样一个大背景下，我们大致可以梳理出这样的流程：

因为我们的 ComponentActivity 或者 Fragment 默认已经实现了 SavedStateRegistryOwner 接口，而且默认是由 SavedStateRegistryController 作为 SavedStateRegistry 的具体控制，因此具体的状态保存与还原都由该控制器去操作。

当我们的 Activity 因为异常生命周期重建时，此时会回调 onSaveInstanceState() 去保存状态，此时 SavedStateRegistryController 就会调用 performSave() 去保存当前状态(即将我们ViewModel的状态保存到bundle里)，然后在 Activity 重建时，在 onCreate() 方法里进行还原(即从bundle里取出我们保存的状态)。

当我们创建 ViewModel 时，默认使用的 ViewModel 工厂是支持保存状态的 SavedStateViewModelFactory 。在初始化该工厂时，需要显式传递 SavedStateRegistryOwner 接口对象到该工厂中，而该工厂的构造函数内，会将 SavedStateRegistry 自行保存起来。

最后，如果要创建的 ViewModel 需要保存状态(即构造函数中存在SavedStateHadnle)，则使用保存的 SavedStateRegistry 变量去获取我们将要还原的状态，然后再调用 SavedStateHandle.createHandle() 去创建具体的 SavedStateHadnle。

由此结合 ViewModel 创建的流程，我们可以总结 SavedStateRegistry 的传递流程伪代码如下：

SavedStateHandle如何创建

在上面，我们聊完了 SavedStateRegistry 是如何被创建以及被传递给我们的 ViewModel工厂 ，而这一小节，我们将要聊聊 SavedStateHandle 如何被创建，以及状态是如何被还原的。

我们知道，当创建 SavedStateHandle 前，需要先获取已保存的状态，也即 consumeRestoredStateForKey() 方法，所以我们本章节的插入点也就是从这里开始。

而与 consumeRestoredStateForKey() 关联的类有两个, SavedStateHandlesProvider 与 SavedStateRegistry 。

前者是 viewModel(2.5.0) 新提供的 创建SavedStateHandle 的方式，后者则是用于 适配 2.5.0 之前的方式。

以 SavedStateHandlesProvider 为例，源码如下：

当我们调用 consumeRestoredStateForKey() 获取具体状态时，内部先会调用 performRestore() 从 SavedStateRegistry 获取我们保存的状态集，然后将其保存到 provider 中。再从这个总的 状态bundle 中获取我们当前 viewModel 所对应的状态。

相应的，我们再去看看 SavedStateHandle.createHandle() 方法，即 SavedStateHandle 最终被怎么创建出来。

源码如下：

上述的逻辑也比较简单，具体如源码中所示，当我们创建 SavedStateHandle 时，需要先从 SavedStateRegistry 获取我们的状态Bundle,然后再调用 createHandle() 方法创建具体的 SavedStateHandle。并在其 createHandle() 内将我们传入的 bundle 转为 Map 形式，从而传入 SavedStateHandle 的构造函数中用于初始化。

总结

在这一章节，我们主要探讨的是 SavedStateHandle 的创建流程，以 ComponentActivity 为例：

我们知道 Android 中关于状态的保存与还原，官方建议使用 onSaveInstanceState() 与 onRestoreInstanceState() ，但随着JetPack组件库的完善，官方在这两个方法的基础上新增了 SavedState ,目的是简化状态保存的成本。从原理上，其创建了一个 状态保存的的注册表 SavedStateRegistry ，内部缓存着具体的 状态提供者合集(key为string,value为SavedStateProvider)。

当我们 Activity 因为配置更改或者不可控原因需要重建时，系统此时会主动调用 onSaveInstanceState() 方法，从而触发调用 savedStateRegistry.performSave() 去保存状态。该方法内部会创建一个新的 Bundle 对象，用于保存所有状态,然后再调用所有缓存的状态提供者(SavedStateProvider)的 saveState() 方法，从而将所有需要需要保存的状态以 key-value 的方式存到 Bundle 中去。最后再将这个整体的 bundle 存入 onSaveInstanceState() 方法参数提供的 bundle 中。

当我们的 Activity 重建完成后，在 onCreate() 方法中，再使用 SavedStateRegistry 还原我们自己保存的状态 restoredState。

最后当我们创建 ViewModel 时，因为我们的 ViewModel工厂(SavedStateViewModelFactory) 持有了 SavedStateRegistry ，也即持有着我们要还原的状态(如果有)。在创建具体的 ViewModel 时，如果我们要创建的 ViewModel 构造函数中存在 SavedStateHandle 参数，则该 ViewModel 支持保存状态，所以需要先去使用 SavedStateRegistry 获取我们保存的状态，最后再调用 SavedStateHandle.create() 去创建具体 SaveStateHandle ，从而创建出支持保存状态 ViewModel 。

结语

在本篇中，我们从 ViewModel 的背景开始，再到 ViewModel 与 SavedStateHandle 的使用方式，最后又从源码层级分析了两者的具体流程，从而较完整的解析了 ViewModel 的底层实现与 SavedStateHandle 的整体创建流程。

至于更加详细的使用方式，这也非本篇要深入探索的细节，具体可参照其他同学的教程即可。

至此，关于 ViewModel 设计思想 以及 状态保存原理 到这里就结束了。也相信读过本篇的你也将不会再有所疑惑 :)

准备工作

兔子主要还是画在画布上面，所以我们首先得生成个Canvas，然后确定Canvas的宽高跟画笔颜色

val drawColor = colorResource(id = R.color.color_EC4126)

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {



}

宽高这边只是写死的两个数值，我们也可以用系统api来获取真实的屏幕宽高，画笔颜色选用偏红的颜色，毕竟要过年了，喜庆点～，接下去开始准备画兔子

脑袋

脑袋其实就是个椭圆，我们用canvas的drawPath方法去绘制，我们需要做的就是确定这个椭圆的中心点坐标，以及绘制这个椭圆的左上坐标以及右下坐标

val startX = screenWidth() / 4

val startY = screenHeight() / 3

val headPath = Path()

headPath.moveTo(screenWidth() / 2, screenHeight() / 2)

headPath.addOval(Rect(startX, startY, screenWidth() - startX, screenHeight() - startY))

headPath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawPath(path = headPath, color = drawColor, style = Stroke(width = 12f))

}

脑袋的中心点坐标x轴跟y轴分别就是画布宽高的一半，左上的x坐标就是画布宽的四分之一，y坐标就是画布高的三分之一，右下的x坐标就是画布宽减去左上的x坐标，右下的y坐标就是减去左上的y坐标，最终在Canvas里面将这个椭圆的path绘制出来，我们看下效果图

耳朵

画完脑袋我们接着画耳朵，两只耳朵其实也就是两个椭圆，分别以中心线左右对称，绘制思路同画脑袋一样，确定两个path的中心点坐标，以及各自左上跟右下的xy坐标

val leftEarPath = Path()

val leftEarPathX = screenWidth() * 3 / 8

val leftEarPathY = screenHeight() / 6

leftEarPath.moveTo(leftEarPathX, leftEarPathY)

leftEarPath.addOval(

    Rect(

        leftEarPathX - 60f,

        leftEarPathY / 2,

        leftEarPathX + 60f,

        startY + 30f

    )

)

leftEarPath.close()



val rightEarPath = Path()

val rightEarPathX = screenWidth() * 5 / 8

val rightEarPathY = screenHeight() / 6

rightEarPath.moveTo(rightEarPathX, rightEarPathY)

rightEarPath.addOval(

    Rect(

        rightEarPathX - 60f,

        rightEarPathY / 2,

        rightEarPathX + 60f,

        startY + 30f

    )

)

rightEarPath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawPath(path = leftEarPath, color = drawColor, style = Stroke(width = 10f))

    drawPath(path = rightEarPath, color = drawColor, style = Stroke(width = 10f))

}

看下效果图

内耳

这样感觉耳朵不是很立体，看起来有点平面，毕竟兔耳朵会有点往里凹的感觉，所以我们给这副耳朵加个内耳增加点立体感，内耳其实很简单，道理同外面的耳朵一样，只是中心点跟左上点，右下点的xy坐标会小一点，我们稍微改一下外耳的path就可以了

val leftEarSubPath = Path()

val leftEarSubPathX = screenWidth() * 3 / 8

val leftEarSubPathY = screenHeight() / 4

leftEarSubPath.moveTo(leftEarSubPathX, leftEarSubPathY)

leftEarSubPath.addOval(

    Rect(

        leftEarSubPathX - 30f,

        screenHeight() / 6,

        leftEarSubPathX + 30f,

        startY + 30f

    )

)

leftEarSubPath.close()



val rightEarSubPath = Path()

val rightEarSubPathX = screenWidth() * 5 / 8

val rightEarSubPathY = screenHeight() / 4

rightEarSubPath.moveTo(rightEarSubPathX, rightEarSubPathY)

rightEarSubPath.addOval(

    Rect(

        rightEarSubPathX - 30f,

        screenHeight() / 6,

        rightEarSubPathX + 30f,

        startY + 30f

    )

)

rightEarSubPath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawPath(path = leftEarSubPath, color = drawColor, style = Stroke(width = 6f))

    drawPath(path = rightEarSubPath, color = drawColor, style = Stroke(width = 6f))

}

看下效果图

有内味儿了，内耳的画笔粗细稍微调小了一点，为了突出个近大远小嘛哈哈哈，我们接着下一步

眼睛

画完耳朵我们开始画眼睛了，眼睛也很好画，主要是先找到中心点位置就好，中心点的x坐标其实跟耳朵的x坐标是一样的，y坐标在脑袋中心点y坐标稍微靠上一点的位置

val leftEyePath = Path()

val leftEyePathX = screenWidth() * 3 / 8

val leftEyePathY = screenHeight() * 11 / 24

leftEyePath.moveTo(leftEyePathX, leftEyePathY)

leftEyePath.addOval(

    Rect(

        leftEyePathX - 35f,

        leftEyePathY - 35f,

        leftEyePathX + 35f,

        leftEyePathY + 35f

    )

)

leftEyePath.close()



val rightEyePath = Path()

val rightEyePathX = screenWidth() * 5 / 8

val rightEyePathY = screenHeight() * 11 / 24

rightEyePath.moveTo(rightEyePathX, rightEyePathY)

rightEyePath.addOval(

    Rect(

        rightEyePathX - 35f,

        rightEyePathY - 35f,

        rightEyePathX + 35f,

        rightEyePathY + 35f

    )

)

rightEyePath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawPath(path = leftEyePath, color = drawColor, style = Stroke(width = 10f))

    drawPath(path = rightEyePath, color = drawColor, style = Stroke(width = 10f))

}

效果图如下

眼神有点空洞，无神是不，缺个眼珠子，那我们再给小兔子画上眼珠吧，眼珠就在眼睛的中心点位置，画一个圆点，圆点就要用到drawCircle，它有这些属性

fun drawCircle(

    color: Color,

    radius: Float = size.minDimension / 2.0f,

    center: Offset = this.center,

    /*@FloatRange(from = 0.0, to = 1.0)*/

    alpha: Float = 1.0f,

    style: DrawStyle = Fill,

    colorFilter: ColorFilter? = null,

    blendMode: BlendMode = DefaultBlendMode

)

我们不需要用到全部，只需要用到颜色color，也就是红色，圆点半径radius，肯定要比眼睛的半径要小一点，我们就设置为10f,圆点中心坐标center,就是眼睛的中心点坐标，知道了以后我们开始绘制眼珠

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) { 

    drawCircle(color = drawColor, radius = 10f, center = Offset(leftEyePathX,leftEyePathY))

    drawCircle(color = drawColor, radius = 10f, center = Offset(rightEyePathX,rightEyePathY))

}

我们再看下效果图

鼻子

接下去我们画鼻子，鼻子肯定在脑袋的中间，所以中心点x坐标就是脑袋中心点的x坐标，那鼻子的y坐标就设置成比中心点y坐标稍微高一点的位置，代码如下

val nosePath = Path()

val nosePathX = screenWidth() / 2

val nosePathY = screenHeight() * 13 / 24

nosePath.moveTo(nosePathX, nosePathY)

nosePath.addOval(Rect(nosePathX - 15f, nosePathY - 15f, nosePathX + 15f, nosePathY + 15f))

nosePath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) { 

    drawPath(path = nosePath, color = drawColor, style = Stroke(width = 10f))

}

我们看下效果图

兔唇

兔子的样子逐渐出来了，画完鼻子我们接着画啥呢？没错，兔子最有特点的位置也就是兔唇，我们脑补下兔唇长啥样子，首先位置肯定是在鼻子的下面，然后从鼻子开始往两边分叉，也就是两个扇形，扇形怎么画呢，我们也有现成的api，drawArc,我们看下drawArc都提供了哪些属性

fun drawArc(

    color: Color,

    startAngle: Float,

    sweepAngle: Float,

    useCenter: Boolean,

    topLeft: Offset = Offset.Zero,

    size: Size = this.size.offsetSize(topLeft),

    /*@FloatRange(from = 0.0, to = 1.0)*/

    alpha: Float = 1.0f,

    style: DrawStyle = Fill,

    colorFilter: ColorFilter? = null,

    blendMode: BlendMode = DefaultBlendMode

)

我们需要用到的就是颜色color,这个扇形起始角度startAngle,扇形终止的角度sweepAngle,是否扇形两端跟中心点连接起来的布尔值useCenter,扇形的左上位置topLeft以及扇形的大小size也就是设置半径，知道这些以后我们开始逐个代入参数吧

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) { 

    drawArc(

        color = drawColor,

        0f,

        120f,

        style = Stroke(width = 10f),

        useCenter = false,

        size = Size(120f, 120f),

        topLeft = Offset(nosePathX - 120f, nosePathY)

    )



    drawArc(

        color = drawColor,

        180f,

        -120f,

        style = Stroke(width = 10f),

        useCenter = false,

        size = Size(120f, 120f),

        topLeft = Offset(nosePathX + 10f, nosePathY)

    )

}

画兔唇的时候其实就是在鼻子的两端各画一个坐标轴，左边的兔唇起始角度就是从x轴开始也就是0度，顺时针旋转120度，左上位置的x坐标刚好离开鼻子一个半径的位置，右边的兔唇刚好相反，逆时针旋转120度，起始角度是180度，左上位置的x坐标刚好在鼻子的位置那里，稍微加个10f让兔唇可以对称一些，我们看下效果图

胡须

脸上好像空了点，兔子的胡须还没有呢，胡须其实就是两边各画三条线，用drawLine这个api,起始位置的x坐标跟眼睛中心点的x坐标一样，中间胡须起始位置的y坐标跟鼻子的y坐标一样，上下胡须的y坐标各减去一定的数值

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) { 

    drawLine(

        color = drawColor,

        start = Offset(leftEyePathX, nosePathY - 60f),

        end = Offset(leftEyePathX - 250f, nosePathY - 90f),

        strokeWidth = 5f,

        cap = StrokeCap.Round

    )

    drawLine(

        color = drawColor,

        start = Offset(leftEyePathX, nosePathY),

        end = Offset(leftEyePathX - 250f, nosePathY),

        strokeWidth = 5f,

        cap = StrokeCap.Round

    )

    drawLine(

        color = drawColor,

        start = Offset(leftEyePathX, nosePathY + 60f),

        end = Offset(leftEyePathX - 250f, nosePathY + 90f),

        strokeWidth = 5f,

        cap = StrokeCap.Round

    )



    drawLine(

        color = drawColor,

        start = Offset(rightEyePathX, nosePathY - 60f),

        end = Offset(rightEyePathX + 250f, nosePathY - 90f),

        strokeWidth = 5f,

        cap = StrokeCap.Round

    )

    drawLine(

        color = drawColor,

        start = Offset(rightEyePathX, nosePathY),

        end = Offset(rightEyePathX + 250f, nosePathY),

        strokeWidth = 5f,

        cap = StrokeCap.Round

    )

    drawLine(

        color = drawColor,

        start = Offset(rightEyePathX, nosePathY + 60f),

        end = Offset(rightEyePathX + 250f, nosePathY + 90f),

        strokeWidth = 5f,

        cap = StrokeCap.Round

    )

}

很简单的画了六条线，线的粗细也稍微设置的小一点，毕竟胡须还是比较细的，我们看下效果图

就这样兔子脑袋部分所有元素都画完了，我们接着给兔子画身体

身体

身体其实也是个椭圆，位置刚好在画布下方三分之一的位置，左上x坐标比脑袋左上x坐标大一点，y坐标就是画布三分之二的位置处，右下x坐标比脑袋右下x坐标稍微小一点，y坐标就是画布的底端，知道以后我们就仿照着脑袋画身体

val bodyPath = Path()

val bodyPathX = screenWidth() / 2

val bodyPathY = screenHeight() * 5 / 6

bodyPath.moveTo(bodyPathX, bodyPathY)

bodyPath.addOval(

    Rect(

        startX + 50f,

        screenHeight() * 2 / 3,

        screenWidth() - startX - 50f,

        screenHeight()

    )

)

bodyPath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawPath(path = bodyPath, color = drawColor, style = Stroke(width = 10f))

}

效果图如下

双爪

画完身体我们再画兔子的双爪，双爪其实也是画两个椭圆，椭圆中心点的x坐标同两只眼睛的x坐标一样，y坐标在画布六分之五的位置

val leftHandPath = Path()

val leftHandPathX = screenWidth() * 3 / 8

val leftHandPathY = screenHeight() * 5 / 6

leftHandPath.moveTo(leftHandPathX, leftHandPathY)

leftHandPath.addOval(

    Rect(

        leftHandPathX - 35f,

        leftHandPathY - 90f,

        leftHandPathX + 35f,

        leftHandPathY + 90f

    )

)

leftHandPath.close()



val rightHandPath = Path()

val rightHandPathX = screenWidth() * 5 / 8

val rightHandPathY = screenHeight() * 5 / 6

rightHandPath.moveTo(rightHandPathX, rightHandPathY)

rightHandPath.addOval(

    Rect(

        rightHandPathX - 35f,

        rightHandPathY - 90f,

        rightHandPathX + 35f,

        rightHandPathY + 90f

    )

)

rightHandPath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawPath(path = leftHandPath, color = drawColor, style = Stroke(width = 10f))

    drawPath(path = rightHandPath, color = drawColor, style = Stroke(width = 10f))

}

我们看下效果图

尾巴

还差最后一步，我们给兔子画上尾巴，尾巴的中心点x坐标就是画布宽度减去脑袋右边x轴坐标，尾巴中心点的y坐标就是画布高度减去一定的数值，我们看下代码

val tailPath = Path()

val tailPathX = screenWidth() - startX

val tailPathY = screenHeight() - 200f

tailPath.moveTo(tailPathX, tailPathY)

tailPath.addOval(Rect(tailPathX - 60f, tailPathY - 90f, tailPathX + 60f, tailPathY + 90f))

tailPath.close()

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawPath(path = tailPath, color = drawColor, style = Stroke(width = 10f))

}

就这样一只兔子画完了，我们看下最终效果图

看起来像那么回事了，我们再稍微点缀下，背景我们发现还有点单调，毕竟是过年了嘛，虽然多地不让放烟花，但我们看看还是可以的，网上找张烟花图片给兔子当背景吧，刚好也有drawImage这样的api可以将图片绘制到画布上，代码如下

val bgBitmap = ImageBitmap.imageResource(id = R.drawable.firework_night)

Canvas(

    modifier = Modifier

        .size(screenWidth().dp, screenHeight().dp)

        .background(color = Color.White)

) {

    drawImage(image = bgBitmap,

        srcOffset = IntOffset(0,0),

        srcSize = IntSize(bgBitmap.width,bgBitmap.height),

        dstSize = IntSize(screenWidth().toInt()*5/4,screenHeight().toInt()*5/4),

        dstOffset = IntOffset(0,0)

    )

}

我们来看下效果怎么样

嗯～～大功告成～～好像也不是很好看哈哈哈，不过重点咱也不是为了美观，而是一个过年了图个寓意，另一个就是用下Compose里面Canvas这些api，毕竟随着kotlin逐步成熟，个人感觉Compose很有可能成为Android以后主流的UI开发模式

最后给大家拜个早年了，祝大家兔年大吉，“兔”飞猛进～～

大家好，我是 17。

在 Flutter 中，涉及到滚动布局的时候，很多同学会大量使用 ListView。

ListView 的局限

没错，在实现效果的方面 ListView 确实能做到大多数，但是有些情况下会很别扭，性能也不好。你可能遇到过下面的设计：

banner 和下面的列表是一起滚动的。如果用 ListView ，你一定可以马上写出代码：

ListView.builder(

    itemBuilder: (context, index) {

      if (index == 0) {

        return Container(

          height: 100,

          color: Colors.blue,

          child: Text('banner'),

        );

      } else {

       return ListTile(title: Text('${index - 1}'));

      }

    },

    itemCount: 100

  )

上面的代码会有一个问题，banner 的高度和下面列表的高度不一样，导致无法使用定高列表，造成性能下降。需要 if else，如果有多个 banner，if else 也要多个，那就相当复杂了。

还有一个问题，在你没有设置任何边距的情况下，ListView 和上面的 Widget 可能会一段空白。

你需要这样去除空白。

ListView.builder(

        padding: EdgeInsets.zero,

为什么会有空白呢？这是因为 ListView 继承自 BoxScrollView，它的主要贡献就是加了这个空白！

这个空白的值是多少呢？就是取的 mediaQuery 的 padding。因为浏海屏的出现，ios 中，上面和下面会有一部分不适合显示主要内容，所以就有了这个安全 padding。BoxScrollView 在设计的时候也考虑到了这一点，于是就默认加了这个 padding。但实际上，如果 listView 不是在最顶部，反而是帮了倒忙。

ListView 最理想的使用场景是展示的 item 都一样高，但多数情况下，item 是不一样高的。ListView 出现的目的是为了方便使用，但却是牺牲了灵活性。它只能有一个 SliverChild，这会导致 itemBuilder 函数逻辑的复杂和性能的下降。

更灵活的布局方式

其实我们可以直接从 ScrollView 继承，根据实际情况定制需要的组件。说到定制你可能会觉得一定很复杂，实际上是非常简单的，而且因为我们是根据业务量身定做的组件，所以用起来会特别顺手。

要用 ScrollView 实现上面的设计，只需要下面的代码：

class MyListView extends ScrollView {

  const MyListView(

      {Key? key,

      this.banner,

      required this.itemBuilder,

      required this.itemExtent,

      required this.itemCount})

      : super(key: key);

  final Widget? banner;

  final IndexedWidgetBuilder itemBuilder;

  final double itemExtent;

  final int itemCount;



  @override

  List<Widget> buildSlivers(BuildContext context) {

    List<Widget> list = [];

    if (banner != null) {

      list.add(SliverToBoxAdapter(child: banner!));

    }

    list.add(SliverFixedExtentList(

      delegate: SliverChildBuilderDelegate(itemBuilder, childCount: itemCount),

      itemExtent: itemExtent,

    ));

    return list;

  }

}

很简单吧。实际上，我们只是 override buildSlivers 方法，生成一个 list。SliverToBoxAdapter 可以看作是一个转换器，把普通的 Widget 转换为 Sliver Widget。虽然 buildSlivers 的返回值是 List<Widget> ，但实际上，Widget 应该是 Sliver Widget，否则无法滚动。

MyListView 使用起来也很方便，代码更简洁，没有了讨厌的 if else 了。

MyListView(

     banner: Container(color: Colors.green, height: 100),

     itemExtent: 20,

     itemCount: 100,

     itemBuilder: (context, index) => Text('$index'),

)

现在 banner 和 item 的逻辑是分开的，代码更加清晰，也更好维护。把 banner 这个高度不一样的 widget 分开后，剩下的 item 高度都是一样的，本例中，我们设置固定高度 itemExtent: 20，每个 item 的高度都是 20，在 buildSlivers 中用 itemExtent 做为参数，用 SliverFixedExtentList 生成定高列表，性能得到大大提高。

老板说，把第 10 条数据显示在第一的位置

这个需求还是很常见的，在某个时刻，需要把某条数据显示在第一的位置。如果用 ListView 实现起来不容易，你可能想要调整数据的位置，但需求是数据的位置不变，只是想让 ViewPort 滚动到 第 10 条数据的位置。你可能还想到了用 ListView 的 controller 来控制滚动位置，尝试一下可以知道并不方便实现，或者实现了也不方便维护。

直接用 ScrollView 就很简单了。 ScrollView 有一个参数可以直接实现在这样的功能，这个参数就是 center。你可能很奇怪，ListView 是从 BoxScrollView 继承，BoxScrollView 是从 ScrollView 继承，但是在 ListView 中没有发现这个参数啊？为了方便使用，BoxScrollView 只有一个 Sliver Child，center 参数没有了用武之地，在 ListView 中找不到这个参数也就不奇怪了。

实现功能

先看下效果，不使用 center 参数，banner 在第一个位置显示。

使用 center 参数后，第 10 条数据，自动显示在第一个位置。

下面是完整代码，贴到 main.dart 就能运行

import 'package:flutter/material.dart';



void main() => runApp(const MyApp());



class MyApp extends StatelessWidget {

  const MyApp({super.key});



  @override

  Widget build(BuildContext context) {

    return const MaterialApp(

      home: Scaffold(body: MyWidget()),

    );

  }

}



class MyWidget extends StatefulWidget {

  const MyWidget({super.key});



  @override

  State<MyWidget> createState() => _MyWidgetState();

}



class _MyWidgetState extends State<MyWidget> {

  @override

  Widget build(BuildContext context) {

    return SafeArea(

        child: MyListView(

            banner: Container(

              color: Colors.blue[100],

              alignment: Alignment.center,

              height: 100,

              child: const Text(

                'IAM17 Flutter 天天更新',

              ),

            ),

            itemBuilder: (context, index) {

              return ListTile(

                title: Text('$index'),

              );

            },

            center: const ValueKey(9),

            itemExtent: 20,

            itemCount: 100));

  }

}



class MyListView extends ScrollView {

  const MyListView(

      {Key? key,

      this.banner,

      required this.itemBuilder,

      required this.itemExtent,

      required this.itemCount,

      Key? center})

      : super(key: key, center: center);

  final Widget? banner;

  final IndexedWidgetBuilder itemBuilder;

  final double itemExtent;

  final int itemCount;



  @override

  List<Widget> buildSlivers(BuildContext context) {

    List<Widget> list = [];

    if (banner != null) {

      list.add(SliverToBoxAdapter(child: banner!));

    }

    if (center == null) {

      list.add(SliverFixedExtentList(

        delegate:

            SliverChildBuilderDelegate(itemBuilder, childCount: itemCount),

        itemExtent: itemExtent,

      ));

    } else {

      for (var i = 0; i < itemCount; i++) {

        list.add(SliverToBoxAdapter(

          key: ValueKey(i),

          child: itemBuilder(context, i),

        ));

      }

    }

    return list;

  }

}

当 center 不为 null 的时候，放弃使用 SliverFixedExtentList，只能把 child 一个一个加到 list 中。这样会损失一些性能，但能快速实现需求，还是值得的。

center 参数是如何影响位置的？

在 ViewPort 的构造函数中有一个 assert，如果 center 不为空，那么在 slivers 中必须要找到 key 为 center 的 child。

Viewport({

    ...

    this.center,

    ...

  }) : 

       assert(center == null || slivers.where((Widget child) => child.key == center).length == 1),

最终是给 ViewPort 对应的 renderObject 的 center 赋值。

代码位置 ： flutter/lib/src/widgets/viewport.dart

void _updateCenter() {

    // TODO(ianh): cache the keys to make this faster

    final Viewport viewport = widget as Viewport;

    if (viewport.center != null) {

      int elementIndex = 0;

      for (final Element e in children) {

        if (e.widget.key == viewport.center) {

          renderObject.center = e.renderObject as RenderSliver?;

          break;

        }

        elementIndex++;

      }

      assert(elementIndex < children.length);

      _centerSlotIndex = elementIndex;

    } else if (children.isNotEmpty) {

      renderObject.center = children.first.renderObject as RenderSliver?;

      _centerSlotIndex = 0;

    } else {

      renderObject.center = null;

      _centerSlotIndex = null;

    }

  }

总之，就是通过 key 找到对应的 Sliver Widget，对应到 renderObject，实现 center 的功能。

通过这个简单的案例说明，我们应该自己动手定制适合自己项目的 ”ListView“！通过简单的封装，就能让我们的代码更简洁，更容易维护，性能也会更好。

更多关于滚动的参数介绍可以看这篇 flutter 滚动的基石 Scrollable。

回答下 @法的空间 提的问题：CustomScrollView 的意义何在？

BoxScrollView 和 CustomScrollView 都是 ScrollView 的 子类。BoxScrollView 只能创建一块滑动内容，CustomScrollView 可以支持滑动列表，这就是 CustomScrollView 的意义。

之所以没有直接用 CustomScrollView ，而是直接从 ScrollView 继承是为了可以把一些属性和滑动列表一起封装起来，方便使用。

如果代码不需要复用，直接用 CustomScrollView 也是可以的，而且也是最简单的方式。

CustomScrollView 的代码就一句：

 @override

 List<Widget> buildSlivers(BuildContext context) => slivers;

ScrollView 是抽象类，不能直接用，CustomScrollView 的意义在于：我们不需要每次都要 extends 一个类出来，用 CustomScrollView 就可以支持滑动列表。

希望已经解答了你的问题，谢谢提问！

喜欢户外运动的朋友一般都应该使用过运动APP(keep, 咕咚，悦跑圈，国外的Strava等)的一项功能，就是运动轨迹视频分享，分享到朋友圈或是运动群的圈子里。笔者本身平常也是喜欢户外跑、骑行、爬山等户外运动，也跑过半马、全马，疫情原因之前报的杭州的全马也延期了好几次了。回归正题，本文笔者基于自己的思想实现运动轨迹回放的一套算法策略，实现本身是基于Mapbox地图的，但是其实可以套用在任何地图都可以实现，基本可以脱离地图SDK的API。Mapbox 10 版本之后的官方给出的Demo里已经有类似轨迹回放的Case了，但是深度地依赖地图SDK本身的API，倘若在高德上实现很难可以迁移的。

这里先看下gif动图的效果，这是我在奥森跑的10KM的一个轨迹：

整个的实现包含了轨迹的回放，视频的录制，然后视频的录制这块不再笔者这篇文章的介绍的范畴内。所以这里主要介绍轨迹的回放，这个回放过程其实也是包含了大概10多种动画在里面的，辅助信息距离的文字跳转动画；距离下面配速、运动时间等的flap in 及 out的动画；播放button，底部button的渐变Visibility; 地图的缩放以及视觉角度的变化等；以上的这些也不做讨论。主要介绍轨迹回放、整公里点的显示(起始、结束)， 回放过程中窗口控制等，作为主要的讲解范畴。

首先介绍笔者最开始的一种实现，假如以上轨迹List 有一百个点，每相邻的两个点做Animation之后，在AnimationEnd的Listener里开起距离下一个点的Animation，直到所有点结束，这里有个问题每次的运动轨迹的点的数量不一样，所以开起Animation的次数也不一样，整个轨迹回放的时间等于所有的Animation执行的时间和，每次动画启动需要损耗20~30ms。倘若要分享到微信朋友圈，视频的时间是限制的，但之前的那种方式时间上显然不可控，每次动画启动的损耗累加导致视频播放不完。

紧接着换成AnimationSet, 将各个线段Animation的动画放入Set里，然后playSequentially执行，同样存在上面的问题。假如只执行一次动画，那么这次动画start的损耗在整个视频播放上时长上的占比就可以忽略不计了，那如何才能将整个List的回放在一个Animation下执行完呢？假如轨迹只是一个普通的 Path，那么我们就可以基于Path的 length一个属性动画了，当转化到地图运动轨迹上去时，又如何去实现呢？

基于Path Length的属性动画

1. 计算List对应的Path


2. 通过PathMeasure获取 Path 的 Length


3. 对Path做 Length的属性动画

这里有两套Point体系，一个是View的Path对应的Points, 然后就是Map上的List对应的Points，运动轨迹原始数据是Map上的List 点，上面的第一步就是将Map上的Points 转成屏幕Pixel对应的点并生成Path; 第二部通过PathMeasure 计算Path的Length; 最后在Path Length上做属性动画，然而这里并非将属性动画中每次渐变的值(这里对应的是View的Point点)绘制成View对应的Path，而是将渐变中的点又通过Map的SDK转成地图Location点，绘制地图轨迹。这里一共做了两道转换，中间只是借助View的Path做了一个依仗Length属性做的一个动画。因为基本上每种地图SDK都有Pixel 跟Location Point点互相transform的API，所以这个可以直接迁移到其它地图上，例如高德地图等。

下面具体看下代码，先将Location 转成View的Point体系，这里保存了总的一个Path，以及List 中两两相邻点对应的分段Path的一个list.

• 生成Path：

其中用到 Mapbox地图API Location 点转View的PointF 接口API toScreenLocation(LatLng latlng), 这里生成List, 然后计算得到Path.

• 基于Length做属性动画：

首先创建属性动画的 Instance：

ValueAnimator.ofObject(new DstPathEvaluator(), 0, mPathMeasure.getLength());

将每次渐变的值经过 calculateAnimPathData(value) 计算后存入到 以下的四个变量中，这里除了Length的渐变值，还附带有角度的一个二元组值。

dstPathEndPoint[0] = 0;//x坐标

dstPathEndPoint[1] = 0;//y坐标

dstPathTan[0] = 0;//角度值

dstPathTan[1] = 0;//角度值

然后将dstPathEndPoint 的值转成Mapbox的 Location的 Latlng 经纬度点，

PointF lastPoint = new PointF(dstPathEndPoint[0], dstPathEndPoint[1]);

LatLng lastLatLng = mapboxMap.getProjection().fromScreenLocation(lastPoint);

Point point = Point.fromLngLat(lastLatLng.getLongitude(), lastLatLng.getLatitude());

过滤掉一些动画过程中可能产生的异常点，最后加入到Mapbox的轨迹绘制的Layer中形成轨迹的一个渐变：

Location curLocation = mLocationList.get(animIndex);

float degrees = MapBoxPathUtil.getRotate(curLocation, point);

if (animIndex < 5 || Math.abs(degrees - curRotate) < 5) {//排除异常点

    setMarkerRecord(point);

}

setMarkerRecord(point) 方法调用加入到 Map 轨迹的绘制Layer中

动画过程中，当加入到Path中的点超过一定占比时，做了一个窗口显示的动画，窗口List跟整个List的一个计算：

//这里可以取后半段的数据，滑动窗口，保持 moveCamera 的窗口值不变。

int moveSize = passedPointList.size();

List<LatLng> windowPassList = passedPointList.subList(moveSize - windowLength, moveSize);

接下来看整公里点的绘制，看之前先看下上面的calculateAnimPathData()方法的逻辑

如上，length为当前Path走过的距离，假设轨迹一共100点，当前走到 49 ~ 50 点之间，那么calculateLength就是0到50这个点的Path的长度，它是大于length的，offsetLength = calculateLength - length; 记录的是 当前点到50号点的一个长度offsetLength，animIndex值当前值对应50，recordPathList为一开始提到的跟计算总Path时一个分段Path的List, 获取到49 ~ 50 这个Path对应的一个model.

RecordPathBean recordPathBean = recordPathList.get(animIndex);

获得Path(49 ~ 50) 的长度减去 当前点到 50的Path(cur ~ 50)的到 Path(49 ~ cur) 的长度

float stopD = (float) (pathMeasure.getLength() - offsetLengthCur);

然后最终通过PathMeasure的 getPosTan 获得dstPathEndPoint以及dstPathTan数据。

pathMeasure.getSegment(0, stopD, dstPath, false);

mDstPathMeasure = new PathMeasure(dstPath, false);

//这里有个参数 tan

mDstPathMeasure.getPosTan(mDstPathMeasure.getLength(), dstPathEndPoint, dstPathTan);

• 整公里点的绘制

原始数据中的List的Location中存储了一个字段kilometer, 当某个Location是整公里点时该字段就有对应的值，每次Path属性渐变时，上面的逻辑里记录了lastAnimIndex, animIndex。当 animIndex > lastAnimIndex时， 上面的calculateAnimPathData() 方法里分析animIndex有可能还没走到，所以在animIndex > lastAnimIndex时lastAnimIndex肯定走到了。

当lastAnimIndex对应的点是 整公里时，做一个响应的属性动画。

至此，运动轨迹回放的一个动画执行逻辑分析完了，如文章开始所说，整个过程中其实还包含了好多种其它的动画，处理它们播放的一个时序问题，如何编排实现等等也是一个难点。另外还就是轨迹播放时的一个Camera的一个视觉跟踪的效果没有实现，这个用地图本身的Camera 的API是一种实现，但是如何跟上面的这些结合到一块；然后就是自行通过计算角度偏移，累计到一定的旋转角度时，转移地图的指南针；以上是笔者想到的方案，以上有计算角度的，但需要找准那个累计的角度值，然后大量实际数据适配。

最后，有需要了解轨迹回放功能其它实现的，可留言或私信笔者进行一起探讨。

Kotlin 协程是什么？

本文只是自己经过研究后，对 Kotlin 协程的理解概括，如有偏差，还请斧正。

简要概括：

协程是 Kotlin 提供的一套线程 API 框架，可以很方便的做线程切换。 而且在不用关心线程调度的情况下，能轻松的做并发编程。也可以说协程就是一种并发设计模式。

下面是使用传统线程和协程执行任务：

       Thread{

            //执行耗时任务

        }.start()



        val executors = Executors.newCachedThreadPool()

        executors.execute {

          //执行耗时任务

        }

        

       GlobalScope.launch(Dispatchers.IO) {

          //执行耗时任务

        }

在实际应用开发中，通常是在主线中去启动子线程执行耗时任务，等耗时任务执行完成，再将结果给主线程，然后刷新UI：

       Thread{

            //执行耗时任务

            runOnMainThread { 

                //获取耗时任务结果，刷新UI

            }

        }.start()



        val executors = Executors.newCachedThreadPool()

        executors.execute {

            //执行耗时任务

            runOnMainThread {

                //获取耗时任务结果，刷新UI

            }

        }



        Observable.unsafeCreate<Unit> {

            //执行耗时任务

        }.subscribeOn(Schedulers.io()).observeOn(AndroidSchedulers.mainThread()).subscribe {

            //获取耗时任务结果，刷新UI

        }



        GlobalScope.launch(Dispatchers.Main) {

            val result = withContext(Dispatchers.IO){

                //执行耗时任务

            }

            //直接拿到耗时任务结果，刷新UI

            refreshUI(result)

        }

从上面可以看到，使用Java 的 Thread 和 Executors 都需要手动去处理线程切换，这样的代码不仅不优雅，而且有一个重要问题，那就是要去处理与生命周期相关的上下文判断，这导致逻辑变复杂，而且容易出错。

RxJava 是一套优雅的异步处理框架，代码逻辑简化，可读性和可维护性都很高，很好的帮我们处理线程切换操作。这在 Java 语言环境开发下，是如虎添翼，但是在 Kotlin 语言环境中开发，如今的协程就比 RxJava 更方便，或者说更有优势。

下面看一个 Kotlin 中使用协程的例子：

        GlobalScope.launch(Dispatchers.Main) {

            Log.d("TestCoroutine", "launch start: ${Thread.currentThread()}")

            val numbersTo50Sum = withContext(Dispatchers.IO) {

                //在子线程中执行 1-50 的自然数和

                Log.d("TestCoroutine", "launch:numbersTo50Sum: ${Thread.currentThread()}")

                delay(1000)

                val naturalNumbers = generateSequence(0) { it + 1 }

                val numbersTo50 = naturalNumbers.takeWhile { it <= 50 }

                numbersTo50.sum()

            }



            val numbers50To100Sum = withContext(Dispatchers.IO) {

               //在子线程中执行 51-100 的自然数和

                Log.d("TestCoroutine", "launch:numbers50To100Sum: ${Thread.currentThread()}")

                delay(1000)

                val naturalNumbers = generateSequence(51) { it + 1 }

                val numbers50To100 = naturalNumbers.takeWhile { it in 51..100 }

                numbers50To100.sum()

            }



            val result = numbersTo50Sum + numbers50To100Sum

            Log.d("TestCoroutine", "launch end:result=$result ${Thread.currentThread()}")

        }

        Log.d("TestCoroutine", "Hello World!,${Thread.currentThread()}")

控制台输出结果：

2023-01-02 16:05:45.846 10153-10153/com.wangjiang.example D/TestCoroutine: Hello World!,Thread[main,5,main]

2023-01-02 16:05:48.058 10153-10153/com.wangjiang.example D/TestCoroutine: launch start: Thread[main,5,main]

2023-01-02 16:05:48.059 10153-10322/com.wangjiang.example D/TestCoroutine: launch:numbersTo50Sum: Thread[DefaultDispatcher-worker-1,5,main]

2023-01-02 16:05:49.114 10153-10322/com.wangjiang.example D/TestCoroutine: launch:numbers50To100Sum: Thread[DefaultDispatcher-worker-1,5,main]

2023-01-02 16:05:50.376 10153-10153/com.wangjiang.example D/TestCoroutine: launch end:result=5050 Thread[main,5,main]

在上面的代码中：

• launch 是一个函数，用于创建协程并将其函数主体的执行分派给相应的调度程序。


• Dispatchers.MAIN 指示此协程应在为 UI 操作预留的主线程上执行。


• Dispatchers.IO 指示此协程应在为 I/O 操作预留的线程上执行。


• withContext(Dispatchers.IO) 将协程的执行操作移至一个 I/O 线程。

从控制台输出结果中，可以看出在计算 1-50 和 51-100 的自然数和的时候，线程是从主线程（Thread[main,5,main]）切换到了协程的线程（DefaultDispatcher-worker-1,5,main），这里计算 1-50 和 51-100 都是同一个子线程。

在这里有一个重要的现象，代码从逻辑上看起来是同步的，并且启动协程执行任务的时候，没有阻塞主线程继续执行相关操作，而且在协程中的异步任务执行完成之后，又自动切回了主线程。这就是 Kotlin 协程给开发做并发编程带来的好处。这也是有个概念的来源： Kotlin 协程同步非阻塞。

同步非阻塞”是真的“同步非阻塞” 吗？下面探究一下其中的猫腻，通过 Android Studio ，查看 .class 文件中的上面一段代码：

      BuildersKt.launch$default((CoroutineScope)GlobalScope.INSTANCE, (CoroutineContext)Dispatchers.getMain(), (CoroutineStart)null, (Function2)(new Function2((Continuation)null) {

         int I$0;

         int label;



         @Nullable

         public final Object invokeSuspend(@NotNull Object $result) {

            Object var10000;

            int numbersTo50Sum;

            label17: {

               Object var5 = IntrinsicsKt.getCOROUTINE_SUSPENDED();

               Function2 var10001;

               CoroutineContext var6;

               switch(this.label) {

               case 0:

                  ResultKt.throwOnFailure($result);

                  Log.d("TestCoroutine", "launch start: " + Thread.currentThread());

                  var6 = (CoroutineContext)Dispatchers.getIO();

                  var10001 = (Function2)(new Function2((Continuation)null) {

                     int label;



                     @Nullable

                     public final Object invokeSuspend(@NotNull Object $result) {

                        Object var4 = IntrinsicsKt.getCOROUTINE_SUSPENDED();

                        switch(this.label) {

                        case 0:

                           ResultKt.throwOnFailure($result);

                           Log.d("TestCoroutine", "launch:numbersTo50Sum: " + Thread.currentThread());

                           this.label = 1;

                           if (DelayKt.delay(1000L, this) == var4) {

                              return var4;

                           }

                           break;

                        case 1:

                           ResultKt.throwOnFailure($result);

                           break;

                        default:

                           throw new IllegalStateException("call to 'resume' before 'invoke' with coroutine");

                        }



                        Sequence naturalNumbers = SequencesKt.generateSequence(Boxing.boxInt(0), (Function1)null.INSTANCE);

                        Sequence numbersTo50 = SequencesKt.takeWhile(naturalNumbers, (Function1)null.INSTANCE);

                        return Boxing.boxInt(SequencesKt.sumOfInt(numbersTo50));

                     }



                     @NotNull

                     public final Continuation create(@Nullable Object value, @NotNull Continuation completion) {

                        Intrinsics.checkNotNullParameter(completion, "completion");

                        Function2 var3 = new <anonymous constructor>(completion);

                        return var3;

                     }



                     public final Object invoke(Object var1, Object var2) {

                        return ((<undefinedtype>)this.create(var1, (Continuation)var2)).invokeSuspend(Unit.INSTANCE);

                     }

                  });

                  this.label = 1;

                  var10000 = BuildersKt.withContext(var6, var10001, this);

                  if (var10000 == var5) {

                     return var5;

                  }

                  break;

               case 1:

                  ResultKt.throwOnFailure($result);

                  var10000 = $result;

                  break;

               case 2:

                  numbersTo50Sum = this.I$0;

                  ResultKt.throwOnFailure($result);

                  var10000 = $result;

                  break label17;

               default:

                  throw new IllegalStateException("call to 'resume' before 'invoke' with coroutine");

               }



               numbersTo50Sum = ((Number)var10000).intValue();

               var6 = (CoroutineContext)Dispatchers.getIO();

               var10001 = (Function2)(new Function2((Continuation)null) {

                  int label;



                  @Nullable

                  public final Object invokeSuspend(@NotNull Object $result) {

                     Object var4 = IntrinsicsKt.getCOROUTINE_SUSPENDED();

                     switch(this.label) {

                     case 0:

                        ResultKt.throwOnFailure($result);

                        Log.d("TestCoroutine", "launch:numbers50To100Sum: " + Thread.currentThread());

                        this.label = 1;

                        if (DelayKt.delay(1000L, this) == var4) {

                           return var4;

                        }

                        break;

                     case 1:

                        ResultKt.throwOnFailure($result);

                        break;

                     default:

                        throw new IllegalStateException("call to 'resume' before 'invoke' with coroutine");

                     }



                     Sequence naturalNumbers = SequencesKt.generateSequence(Boxing.boxInt(51), (Function1)null.INSTANCE);

                     Sequence numbers50To100 = SequencesKt.takeWhile(naturalNumbers, (Function1)null.INSTANCE);

                     return Boxing.boxInt(SequencesKt.sumOfInt(numbers50To100));

                  }



                  @NotNull

                  public final Continuation create(@Nullable Object value, @NotNull Continuation completion) {

                     Intrinsics.checkNotNullParameter(completion, "completion");

                     Function2 var3 = new <anonymous constructor>(completion);

                     return var3;

                  }



                  public final Object invoke(Object var1, Object var2) {

                     return ((<undefinedtype>)this.create(var1, (Continuation)var2)).invokeSuspend(Unit.INSTANCE);

                  }

               });

               this.I$0 = numbersTo50Sum;

               this.label = 2;

               var10000 = BuildersKt.withContext(var6, var10001, this);

               if (var10000 == var5) {

                  return var5;

               }

            }



            int numbers50To100Sum = ((Number)var10000).intValue();

            int result = numbersTo50Sum + numbers50To100Sum;

            Log.d("TestCoroutine", "launch end:result=" + result + ' ' + Thread.currentThread());

            return Unit.INSTANCE;

         }



         @NotNull

         public final Continuation create(@Nullable Object value, @NotNull Continuation completion) {

            Intrinsics.checkNotNullParameter(completion, "completion");

            Function2 var3 = new <anonymous constructor>(completion);

            return var3;

         }



         public final Object invoke(Object var1, Object var2) {

            return ((<undefinedtype>)this.create(var1, (Continuation)var2)).invokeSuspend(Unit.INSTANCE);

         }

      }), 2, (Object)null);

      Log.d("TestCoroutine", "Hello World!," + Thread.currentThread());

虽然上面 .class 文件中的代码比较复杂，但是从大体逻辑可以看出，Kotlin 协程也是通过回调接口来实现异步操作的，这也解释了 Kotlin 协程只是让代码逻辑是同步非阻塞，但是实际上并没有，只是 Kotlin 编译器为代码做了很多事情，这也是说 Kotlin 协程其实就是一套线程 API 框架的原因。

再看一个上面例子的变种：

        GlobalScope.launch(Dispatchers.Main) {

            Log.d("TestCoroutine", "launch start: ${Thread.currentThread()}")

            val numbersTo50Sum = async {

                withContext(Dispatchers.IO) {

                    Log.d("TestCoroutine", "launch:numbersTo50Sum: ${Thread.currentThread()}")

                    delay(2000)

                    val naturalNumbers = generateSequence(0) { it + 1 }

                    val numbersTo50 = naturalNumbers.takeWhile { it <= 50 }

                    numbersTo50.sum()

                }

            }



            val numbers50To100Sum = async {

                withContext(Dispatchers.IO) {

                    Log.d("TestCoroutine", "launch:numbers50To100Sum: ${Thread.currentThread()}")

                    delay(500)

                    val naturalNumbers = generateSequence(51) { it + 1 }

                    val numbers50To100 = naturalNumbers.takeWhile { it in 51..100 }

                    numbers50To100.sum()

                }

            }

            // 计算 1-50 和 51-100 的自然数和是两个并发操作

            val result = numbersTo50Sum.await() + numbers50To100Sum.await()

            Log.d("TestCoroutine", "launch end:result=$result ${Thread.currentThread()}")

        }

        Log.d("TestCoroutine", "Hello World!,${Thread.currentThread()}")

   

  控制台输出结果：

2023-01-02 16:32:12.637 13303-13303/com.wangjiang.example D/TestCoroutine: Hello World!,Thread[main,5,main]

2023-01-02 16:32:13.120 13303-13303/com.wangjiang.example D/TestCoroutine: launch start: Thread[main,5,main]

2023-01-02 16:32:14.852 13303-13444/com.wangjiang.example D/TestCoroutine: launch:numbersTo50Sum: Thread[DefaultDispatcher-worker-2,5,main]

2023-01-02 16:32:14.853 13303-13443/com.wangjiang.example D/TestCoroutine: launch:numbers50To100Sum: Thread[DefaultDispatcher-worker-1,5,main]

2023-01-02 16:32:17.462 13303-13303/com.wangjiang.example D/TestCoroutine: launch end:result=5050 Thread[main,5,main]

async 创建了一个协程，它让计算 1-50 和 51-100 的自然数和是两个并发操作。上面控制台输出结果可以看到计算 1-50 的自然数和是在线程 Thread[DefaultDispatcher-worker-2,5,main] 中，而计算 51-100 的自然数和是在另一个线程Thread[DefaultDispatcher-worker-1,5,main]中。

从上面的例子，协程在异步操作，也就是线程切换上：主线程启动子线程执行耗时操作，耗时操作执行完成将结果更新到主线程的过程中，代码逻辑简化，可读性高。

suspend 是什么？

suspend 直译就是：挂起

suspend 是 Kotlin 语言中一个 关键字，用于修饰方法，当修饰方法时，表示这个方法只能被 suspend 修饰的方法调用或者在协程中被调用。

下面看一下将上面代码案例拆分成几个 suspend 方法：

    fun getNumbersTo100Sum() {

        GlobalScope.launch(Dispatchers.Main) {

            Log.d("TestCoroutine", "launch start: ${Thread.currentThread()}")

            val result = calcNumbers1To100Sum()

            Log.d("TestCoroutine", "launch end:result=$result ${Thread.currentThread()}")

        }

        Log.d("TestCoroutine", "Hello World!,${Thread.currentThread()}")

    }



    private suspend fun calcNumbers1To100Sum(): Int {

        return calcNumbersTo50Sum() + calcNumbers50To100Sum()

    }



    private suspend fun calcNumbersTo50Sum(): Int {

        return withContext(Dispatchers.IO) {

            Log.d("TestCoroutine", "launch:numbersTo50Sum: ${Thread.currentThread()}")

            delay(1000)

            val naturalNumbers = generateSequence(0) { it + 1 }

            val numbersTo50 = naturalNumbers.takeWhile { it <= 50 }

            numbersTo50.sum()

        }

    }



    private suspend fun calcNumbers50To100Sum(): Int {

        return withContext(Dispatchers.IO) {

            Log.d("TestCoroutine", "launch:numbers50To100Sum: ${Thread.currentThread()}")

            delay(1000)

            val naturalNumbers = generateSequence(51) { it + 1 }

            val numbers50To100 = naturalNumbers.takeWhile { it in 51..100 }

            numbers50To100.sum()

        }

    }

控制台输出结果：

2023-01-03 14:47:57.047 11349-11349/com.wangjiang.example D/TestCoroutine: Hello World!,Thread[main,5,main]

2023-01-03 14:47:59.311 11349-11349/com.wangjiang.example D/TestCoroutine: launch start: Thread[main,5,main]

2023-01-03 14:47:59.312 11349-11537/com.wangjiang.example D/TestCoroutine: launch:numbersTo50Sum: Thread[DefaultDispatcher-worker-3,5,main]

2023-01-03 14:48:00.336 11349-11535/com.wangjiang.example D/TestCoroutine: launch:numbers50To100Sum: Thread[DefaultDispatcher-worker-1,5,main]

2023-01-03 14:48:01.339 11349-11349/com.wangjiang.example D/TestCoroutine: launch end:result=5050 Thread[main,5,main]

suspend 关键字标记方法时，其实是告诉 Kotlin 从协程内调用方法。所以这个“挂起”，并不是说方法或函数被挂起，也不是说线程被挂起。

假设一个非 suspend 修饰的方法调用 suspend 修饰的方法会怎么样呢？

  private fun calcNumbersTo100Sum(): Int {

        return calcNumbersTo50Sum() + calcNumbers50To100Sum()

    }

此时，编译器会提示：

Suspend function 'calcNumbersTo50Sum' should be called only from a coroutine or another suspend function

Suspend function 'calcNumbers50To100' should be called only from a coroutine or another suspend function

下面查看 .class 文件中的上面方法 calcNumbers50To100Sum 代码：

   private final Object calcNumbers50To100Sum(Continuation $completion) {

      return BuildersKt.withContext((CoroutineContext)Dispatchers.getIO(), (Function2)(new Function2((Continuation)null) {

         int label;



         @Nullable

         public final Object invokeSuspend(@NotNull Object $result) {

            Object var4 = IntrinsicsKt.getCOROUTINE_SUSPENDED();

            switch(this.label) {

            case 0:

               ResultKt.throwOnFailure($result);

               Log.d("TestCoroutine", "launch:numbers50To100Sum: " + Thread.currentThread());

               this.label = 1;

               if (DelayKt.delay(1000L, this) == var4) {

                  return var4;

               }

               break;

            case 1:

               ResultKt.throwOnFailure($result);

               break;

            default:

               throw new IllegalStateException("call to 'resume' before 'invoke' with coroutine");

            }



            Sequence naturalNumbers = SequencesKt.generateSequence(Boxing.boxInt(51), (Function1)null.INSTANCE);

            Sequence numbers50To100 = SequencesKt.takeWhile(naturalNumbers, (Function1)null.INSTANCE);

            return Boxing.boxInt(SequencesKt.sumOfInt(numbers50To100));

         }



         @NotNull

         public final Continuation create(@Nullable Object value, @NotNull Continuation completion) {

            Intrinsics.checkNotNullParameter(completion, "completion");

            Function2 var3 = new <anonymous constructor>(completion);

            return var3;

         }



         public final Object invoke(Object var1, Object var2) {

            return ((<undefinedtype>)this.create(var1, (Continuation)var2)).invokeSuspend(Unit.INSTANCE);

         }

      }), $completion);

   }