--- theme: arknights highlight: androidstudio --- - 小知识，大挑战！本文正在参与“[程序员必备小知识](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")”创作活动。 - 本文已参与 [「掘力星计划」](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141") ，赢取创作大礼包，挑战创作激励金。 # 1.前言 > 文章末尾有**演示的APK**链接，感兴趣的同学，可以自行下载体验一下 [官方Android 12的Splash Screen文档地址](https://developer.android.com/guide/topics/ui/splash-screen) [官方Splash Screen兼容库，支持所有版本系统](https://developer.android.com/guide/topics/ui/splash-screen/migrate) **本篇文章主要围绕下面三个问题来介绍：** - 我们能从[Android 12 SplashScreen API](https://developer.android.com/guide/topics/ui/splash-screen)里面学到什么？ - 新出的SplashScreen兼容库又是什么？能做成什么样子？ - 小甲同学：我想看Android12 SplashScreen源码，可以吗？ **前方高能预警**：一定要记得『**点赞❤️+关注❤️+收藏❤️**』起来，**划走了**可就**再也找不到了**😅😅🙈🙈

进入正题，我们先介绍：**SplashScreen如何使用，以及目前会遇到的问题，如何无缝过渡？会出现什么问题，怎么解决?**

# 2.SplashScreen使用首先我们需要把compileSdk和`targetSdk(可选)`升级到31 ## 2.1.Android12版本 ### (A).主题和外观配置 ```xml @color/... @drawable/... 1000 @color/... @drawable/... ``` ### (B).延长启动画面 ```kotlin val content: View = findViewById(android.R.id.content) content.viewTreeObserver.addOnPreDrawListener( object : ViewTreeObserver.OnPreDrawListener { override fun onPreDraw(): Boolean { // 模拟一些数据的初始化，再取消挂起 return if (viewModel.isReady) { // 取消挂起，恢复页面内容绘制 content.viewTreeObserver.removeOnPreDrawListener(this) true } else { // 挂起，内容还没有准备好 false } } } ) ``` ### (C).关闭启画面的动画 ```kotlin // 自己定制关闭的动画 splashScreen.setOnExitAnimationListener { splashScreenView -> val slideUp = ObjectAnimator.ofFloat( // 你们自己控制，自己随便写什么动画，这里我们测试让图标移动 splashScreenView.iconView, View.TRANSLATION_Y, 0f, -splashScreenView.height.toFloat() ) slideUp.interpolator = AnticipateInterpolator() slideUp.duration = 200L slideUp.doOnEnd { splashScreenView.remove() } slideUp.start() } ``` ### (D).遇到的问题 - android:windowSplashScreenBrandingImage 定义的图片尺寸要求是多少？总觉得有点拉伸； - 使用AnimationDrawable 或者 AnimatedVectorDrawable，来设置中心图标，`会出现“中心图标”消失的情况`，静态图标不会有这种问题出现； - Android12**父主题**设置`android:windowBackground`被覆盖，看不到效果 **问题1：** 在源码里面也没有看到具体的值或者比例大小，怎么办呢？ > **小技巧：** 使用一个**超大的正方形**的图标设置进去测试了一下，拉伸不要紧，**我们要的是比例**， > 然后测量了一下**比例为**：**2.5 : 1**，所以设计品牌名图标的时候，可以设置为400 * 160这样的**比例为2.5:1**的图标 **问题2：** 针对**中心图标会闪现消失**的问题做测试， **测试一**：静态Icon、**测试二**：动态Icon

静态中心图标 - 正常

下面我们来测试**动态中心图标**，为了方便测试出效果，我们覆盖住图标后面的背景色，方便对比，最后发现：测试结果不太理想，效果不行 ```xml ```

动态中心图标，不正常
仔细看图标后面的「蓝色背景」

我们再来看一下官方文档中的顺滑效果

官方效果顺滑

对比官方的效果，猜测可能是**模拟器和预览版Android12**的问题，主要是**没有真机**来测试Android12这个效果，不过这难不到我们，`如果你的模拟器也有同样问题`，请跟着我们做如下操作：

下面我们使用**AnimatedVectorDrawable**来制作动态图标， **为了观察出效果**：我们打开模拟器的**开发者选项**，找到Animator时长缩放设置为：`动画时长x10`，来往下看效果：

10倍慢放 - 看着才正常

**笑脸眼睛动画的矢量图文件** 👇👇，[点击查看在线制作矢量图动画](https://shapeshifter.design/) ```xml ``` 后来我们又用了AnimationDrawable测试了一下慢放效果也不行，你仔细想一下：图片轮播放效果能好吗？所以：`AnimationDrawable不推荐`，我们这里推荐使用：**AnimatedVectorDrawable为矢量图添加动画效果** **问题3：** Android12**父主题**设置`android:windowBackground`被覆盖，看不到效果不要紧，只要我们的UI设计师`(美工)`按照如下尺寸规范来设计，使用**静态中心图标**，一样可以实现同样效果： **中心图标：** 图标内容区域**内边距2/3**，防止元素被切 **品牌名图标:** 设计的尺寸比例为：**2.5:1** ## 2.2.SplashScreen兼容库 [点击查看官方Splash Screen兼容库文档](https://developer.android.com/guide/topics/ui/splash-screen/migrate) ### (A).依赖库 [点击查看Core库里面的最新版本](https://developer.android.com/jetpack/androidx/releases/core) ```gradle // 可在所有Android版本上使用的兼容库 implementation 'androidx.core:core-splashscreen:1.0.0-alpha02' ``` ### (B).主题和外观配置 - 定义Activity应该使用的主题 ```xml ``` - 创建父主题给启动画面使用 ```xml ``` - AndroidManifest.xml配置Activity的主题 ```xml ... ``` ### (C).初始化SplashScreen ```java override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val splashScreen = installSplashScreen() setContent { ...... } splashScreen.setKeepVisibleCondition { !mainViewModel.mockDataLoading() } splashScreen.setOnExitAnimationListener(this) } ``` ### (D).中心图标大小修改 ```xml @dimen/.... ``` ### (E).遇到的问题兼容库目前存在的问题 - 没有`android:windowSplashScreenBrandingImage`这个属性 - 配置了中心图标，会裁剪成圆形 - 低版本系统不配置`windowSplashScreenAnimatedIcon`会出现默认的Icon - Android12**父主题**设置`android:windowBackground`被覆盖，看不到效果 **问题1：** 是因为兼容库的layout文件目录下面的splash_screen_view.xml没有`“品牌名的视图”`，大家点击查看一下，两个布局的xml内容就知道了： frameworks下面的[Android12的splash_screen_view.xml](https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/res/res/layout/splash_screen_view.xml) core-splashscreen下面的[兼容库的splash_screen_view.xml](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:core/core-splashscreen/src/main/res/layout/splash_screen_view.xml) 但是我们在Android12即values-v31的themes.xml里面**依然可以配置**`android:windowSplashScreenBrandingImage`这个属性，因为Android12的SplashScreen是集成在frameworks里面的； **问题2：** 是因为兼容库里面使用了MaskedDrawable包装了Icon，会裁剪成圆形，图标内容设计要**保留2/3的内边距**，否则会出现内容被裁剪掉的问题； **如何修复这个裁剪圆形问题呢？** > 把源码拷贝出来，总共就**3个源代码文件**，自己复制出来修改删除也可以的 > 或者，图标设计准则为：**内容保留内边距为2/3，防止元素被裁剪** **问题3：** 写一个透明的drawable.xml然后替换就行了，类似如下方式 ```xml ``` **问题4：** Android12**父主题**设置`android:windowBackground`被覆盖，看不到效果不要紧，只要我们的UI设计师`(美工)`按照如下**尺寸规范来设计**，使用**静态中心图标**，一样可以实现同样效果： **中心图标：** 图标内容区域**内边距2/3**，防止元素被切 **品牌名图标:** 设计的尺寸比例为：**2.5:1** ### (F).制作一个启动页 - **1.模仿快手App的启动页** 只需要配置父主题的`android:windowBackground`

Android5.0 ~ Android11 效果

由于我们在文章上面介绍到**Android12**上，无法为SplashScreen设置父主题的`android:windowBackground`，但我们依然可以通过配置静态中心图标来做到一样的效果的，请看下面的效果：

Android12 效果

如果你的UI设计师，给你矢量图，那么你就可以让中心图标在Android12系统上动起来了😆 另外，可以**建议UI设计师**：统一所有系统上，启动页“中心”图标，**居中展示**，不然会有点怪 - **2.动态图标启动页** 如果设计成动态启动图标，这个需要考虑2个因素： > **一、** 低版本系统表现效果不一致，有些系统里面，动态图标只在启动页关闭的时候才显示(`亲测Android平板5.1.1系统就是这样的`)； > **二、** 如何兼容低版本系统，是先展示底部品牌名，最后只能等动态图标显示咯？ > 如果喜欢折腾的同学，可以多测试测试，我在使用Android10.0测试动态图标的时候，效果看着还可以，具体系统下限在哪？ > 这个看你们产品设计定位了，还有**测试妹妹**是否同意你们用，效果是否符合你们的产品； **建议的做法是：** - Android 5.0 ~ Android 11.0系统，都统一使用`android:windowBackground`配置启动页背景 - Android12.0 如果UI设计师给你做了矢量图，你可以做动态的中心图标，不给你，使用静态图标也可以的，参考上面：`模拟快手App启动页` 为了在模拟器上能正常显示出效果，我们在模拟器的**开发者选项**，找到Animator时长缩放设置为：`动画时长x10`，放慢10倍，缺真机测试😂😂😂😂😂

Android12 动态启动页图标

# 3.源码分析 > 我们这里只分析Android12 SplashScreen，**兼容库没有太多内容**不足500行，感兴趣的同学可以自己阅读一下我们在`XXXActivity`里面第一次用到了`splashScreen.setOnExitAnimationListener`，从这里开始往源头开始找，在下面的方法初始化了SplashScreen ```java //android.app.Activity private SplashScreen getOrCreateSplashScreen() { synchronized (this) { if (mSplashScreen == null) { mSplashScreen = new SplashScreen.SplashScreenImpl(this); } return mSplashScreen; } } ``` 我们来看SplashScreenImpl实现类 ```java //android.app.Activity class SplashScreenImpl implements SplashScreen { ...... //把SplashScreenImpl添加到这个单例类里面 private final SplashScreenManagerGlobal mGlobal; public SplashScreenImpl(Context context) { mGlobal = SplashScreenManagerGlobal.getInstance(); } @Override public void setOnExitAnimationListener(@NonNull SplashScreen.OnExitAnimationListener listener) { ...... mGlobal.addImpl(this); // 用于后面执行启动画面将退出的回调 } ...... public void setSplashScreenTheme(@StyleRes int themeId) { ...... try { //设置启动画面的主题 AppGlobals.getPackageManager().setSplashScreenTheme(......); } catch (RemoteException e) { Log.w(TAG, "Couldn't persist the starting theme", e); } } } // 启动画面管理器 class SplashScreenManagerGlobal { ...... // 管理多个闪屏实现 private final ArrayList mImpls = new ArrayList<>(); private SplashScreenManagerGlobal() { // 向此进程注册启动画面管理器 ActivityThread.currentActivityThread().registerSplashScreenManager(this); } ...... private static final Singleton sInstance = new Singleton() { @Override protected SplashScreenManagerGlobal create() { return new SplashScreenManagerGlobal(); } }; private void addImpl(SplashScreenImpl impl) { synchronized (mGlobalLock) { mImpls.add(impl); } } private void removeImpl(SplashScreenImpl impl) { synchronized (mGlobalLock) { mImpls.remove(impl); } } ...... public void handOverSplashScreenView(IBinder token,SplashScreenView splashScreenView) { //调用的是 => splashScreenView.transferSurface(); transferSurface(splashScreenView); //回调 => impl.mExitAnimationListener.onSplashScreenExit(view); dispatchOnExitAnimation(token, splashScreenView); } ...... } ``` 我们看到初始化SplashScreenManagerGlobal的时候，`向此进程注册启动画面管理器` ```java //android.app.ActivityThread public void registerSplashScreenManager(SplashScreen.SplashScreenManagerGlobal manager) { synchronized (this) { mSplashScreenGlobal = manager; } } ``` 如何把SplashScreen添加到当前的窗口的呢？ ActivityThread继承ClientTransactionHandler，里面有一个这样的抽象方法: ```java //android.app.ClientTransactionHandler public abstract void handleAttachSplashScreenView(@NonNull ActivityClientRecord r, @NonNull SplashScreenViewParcelable parcelable); ``` **ActivityThread**肯定会实现这个方法，那么是谁调用了它呢？由于篇幅问题，就不一行一行代码的去介绍分析了，感兴趣的同学，可以自己深入研究，我们下面贴出来调用的流程图

**谁调用了handleAttachSplashScreenView()**，它的调用链**流程图**如下：

好了，看完流程图，我们再看一下`ActivityThread#handleAttachSplashScreenView` ```java //android.app.ActivityThread @Override public void handleAttachSplashScreenView(@NonNull ActivityClientRecord r, @Nullable SplashScreenView.SplashScreenViewParcelable parcelable) { final DecorView decorView = (DecorView) r.window.peekDecorView(); if (parcelable != null && decorView != null) { createSplashScreen(r, decorView, parcelable); } ...... } private void createSplashScreen(ActivityClientRecord r, DecorView decorView, SplashScreenView.SplashScreenViewParcelable parcelable) { // 初始化SplashScreenView构建器 final SplashScreenView.Builder builder = new SplashScreenView.Builder(r.activity); // 从parcelable中获取配置数据,并通过build()初始化SplashScreenView,设置数据 final SplashScreenView view = builder.createFromParcel(parcelable).build(); // 把SplashScreenView添加到DecorView中 decorView.addView(view); // 设置SystemUI颜色 view.attachHostActivityAndSetSystemUIColors(r.activity, r.window); // 刷新视图 view.requestLayout(); ...... } ``` 核心的部分源码已经分析差不多了，剩下的一些源码，感兴趣的同学可以自己查看阅读 # 4.总结 - **compileSdk升级到31** - **产品中统一使用兼容库SplashScreen** ```gradle implementation 'androidx.core:core-splashscreen:最新版本' ``` - **演示示例中资源目录** ```text drawable —— 定义低版本的drawable资源 drawable-v23 —— 定义6.0以上的资源 drawable-v31 —— 定义Android12及以上的资源 values —— 定义默认资源 values-night —— 定义默认深色模式资源 values-v23 —— 定义6.0以上系统资源 values-v31 —— 定义Android12及以上的资源 values-night-v31 —— 定义Android12及以上的深色模式资源 ``` - **启动页图标设计准则** 中心图标大图，内容需要**保留2/3的内边距**，**否则图标会被裁剪掉**，另外：图标尺寸大小可以修改；底部品牌名图标：尺寸比例需要为 **2.5:1** 兼容库SplashScreen**低版本不支持**设置底部品牌图标， Android12需要在values-v31目录手动添加如下属性，**才可以显示品牌名图标**； ```xml @drawable/... ``` - **Android12以下系统**可以使用`android:windowBackground`为父主题设置窗口背景，**切记不要**在Android12及以上系统设置父主题的窗口背景`(因为没有效果😅😅)` - **Android12系统以下系统**，使用`android:windowBackground`的话，一定要给`windowSplashScreenAnimatedIcon`设置一个透明的drawable，否则会出现机器人图标 - **windowSplashScreenBackground** 这个属性的颜色一定要注意，配置有问题的话，启动页**过渡到**主页面的时候，会有这个颜色闪出来，**建议**和Activity的`android:windowBackground`配置成一样的颜色 - 在启动画面上面，添加一个`“广告或者推广页面”`，代码和效果如下： ```kotlin override fun onSplashScreenExit(splashScreenViewProvider: SplashScreenViewProvider) { if(splashScreenViewProvider.view is ViewGroup){ // 在这里添加一个启动页广告或者推广页面 val composeView = ComposeView(this@SplashScreenCompatActivity).apply { setContent { SplashAdScreen(onCloseAd = { splashScreenViewProvider.remove() }) } } (splashScreenViewProvider.view as ViewGroup).addView(composeView) return } } ```

实践 - 启动页添加广告或者推广页

------ **参考地址** - [在线流程图制作](https://www.bullmind.com/) - [官方文档 Splash screens](https://developer.android.com/guide/topics/ui/splash-screen) - [Google官网介绍矢量图](https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html) - [在线svg编辑器](https://editor.method.ac/) - [在线制作矢量图动画](https://shapeshifter.design/) - [在线合并多个GIF制作](https://ezgif.com/combine/ezgif-6-afa4451f-combine) **文章中示例的演示APK及源码地址：** | 静态图标启动页 | 动态图标启动页
`(Android12系统有动画效果)` | 启动页加广告 | | :---: | :---: | :---: | | [**下载：SplashScreen快手启动页效果的apk001**](https://wws.lanzoui.com/iV0M5vexz7a) | [**下载：SplashScreen快手启动页效果的apk002**](https://wws.lanzoui.com/ijLzZvezk1g)| [**下载：SplashScreen启动页广告apk**](https://wws.lanzoui.com/igAufvftyfe)| | **提取码：7gj2** | **提取码：b6ce** | **提取码：fnva** | [**点击查看：SplashScreen演示示例的源码**](https://github.com/TheMelody/SplashScreenExample)