android app启动页(闪屏页)白屏快速优化方案实践

1.背景

无意间发现,自己的一个线上项目虽然很轻量级,但是在低端机型上依然存在启动页白屏现象,于是就快速优化了一番,在此分享一下优化方案。

2.存在问题

引用一张探索 Android 启动优化方法中的app冷启动流程示意图:

ILQ5nr.png

由启动图可知:打开app时,系统要加载一个空白window,创建进程,初始化app(启动应用),最后才加载启动页布局。如果在创建进程和初始化app过程中耗时较久,那么在启动页布局显示之前,用户便能肉眼感知到空白window的存在,也就是我们所说的白屏(或者黑屏,由你设置的theme决定)。

本文要做的,一步一步解决显示白屏的问题。

3.特别说明

本文就不聊zygote创建进程运行app的那一堆原理来班门弄斧了,只谈一谈解决问题最简单的方法,对原理有兴趣的可以自行翻阅【参考文献】中的相关文档。

4.解决思路

通过给activity指定带有window背景的theme来避免白屏(设置window背景)

优点 缺点
设置window背景 能够快速解决显示白屏问题 可能会引起背景图拉伸问题

5.快速解决方案

创建一个style,清单文件里单独给启动页的theme设置为该style,代码如下:

<style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!--将顶部状态栏设置为透明,并将界面内容布局上边界上提至状态栏顶部-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--如果有底部虚拟导航栏,则将底部虚拟导航栏设置为透明,并将界面内容布局下边界下沉至虚拟导航栏底部-->
    <item name="android:windowTranslucentNavigation">true</item>
    <!--给window窗口设置背景图-->
    <item name="android:windowBackground">@drawable/bg_splash_snow</item>
</style>

@drawable/bg_splash_snow改为你自己的背景图

启动页activity 的 onCreate 方法回调中,将window的背景图置空,代码如下:

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        window.setBackgroundDrawable(null)
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
    }
}

看下效果:

启动页示例2.gif

完事儿~~~下篇见

8c0de91c98bf76faca5055cabcb56a3c03a98e398fdef5f7a.jpg

这就没了?????

aae06983740640ab814d991af8898f9c67612a9391d499944.jpg

对,没错,代码就是这么简单。

不过对style里那三个属性不熟悉的朋友,可能心存疑问:这到底是个什么鬼。。。

那咱接下来就细细的捋一遍吧。

6.事前准备

创建一个启动页界面,布局里设置背景为一张图片,并放一个textview:

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
    }
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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"
    android:background="@drawable/bg_splash_snow"
    tools:context=".activity.SplashActivity">

    <androidx.appcompat.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:text="@string/app_name"
        android:textColor="@color/white"
        android:textSize="22sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

styles文件里新建一个 style ,parent 设置为 Theme.AppCompat.DayNight.NoActionBar 来取消标题栏:

<style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
</style>

AndroidManifest.xml里将该style设置给SplashActivity,方便我们后续对比效果:

<activity android:name=".activity.SplashActivity"
    android:theme="@style/AppTheme.Splash">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

华为手机上运行效果如下:

5ad43f16d970f580f925f31f65fbd2c.jpg

咦?这顶部状态栏跟底部导航栏也忒丑了点。。。。。。

D415A583C0FF67A7D583065D4701F7BE.jpg

那。。干掉吧。。。

1407C31B0C9096C6B3967DE5631B0B63.gif

在style里设置一下:

<style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!--将顶部状态栏设置为透明,并将界面内容布局上边界上提至状态栏顶部-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--如果有底部虚拟导航栏,则将底部虚拟导航栏设置为透明,并将界面内容布局下边界下沉至虚拟导航栏底部-->
    <item name="android:windowTranslucentNavigation">true</item>
</style>

运行效果如下:

启动页示例.gif

哦豁 ~~ 处理好顶部状态栏跟底部导航栏后舒服多了,但是,这个白屏问题???

恩,明显的不像话。

7.通过【设置window背景】解决白屏问题

这个贼简单,只需要通过style的android:windowBackground属性给window设置一个背景,最终设置如下:

<style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!--将顶部状态栏设置为透明,并将界面内容布局上边界上提至状态栏顶部-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--如果有底部虚拟导航栏,则将底部虚拟导航栏设置为透明,并将界面内容布局下边界下沉至虚拟导航栏底部-->
    <item name="android:windowTranslucentNavigation">true</item>
    <!--给window窗口设置背景图-->
    <item name="android:windowBackground">@drawable/bg_splash_snow</item>
</style>

@drawable/bg_splash_snow 是我的一张背景图:

bg_splash_snow.png

运行效果如下:

启动页示例2.gif

完事儿,收工~

“等等~”,有朋友(无中生友?)怕是要问了:那你这一个界面设置了两个背景图,岂不是有些冗余?

哎呀,那来吧,去掉一张吧,把布局文件的图干掉(tools:background表示只渲染预览布局,不参与实际运行):

image-20210610170155306.png

结果如下:

启动页示例2.gif

可以看到,运行结果跟之前跟一模一样。

眼尖的朋友又要问了:“连时间都一样???”

哈哈哈,我就是偷的上一张图。

47915A4C88384FBDB3496D2D7C544FA5.gif

当然了,这里显示的背景图就是window上的背景图,实际上这样是有问题的,比如我启动页要放个viewpager啥的,需要处理图片的一些展示逻辑可咋整,window背景又不能搞成viewpager?

那咱们换一个思路,window的背景图在用完后给他置空,继续显示启动页的布局视图行不行呢?来实践一下看看:

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // 置空window背景图
        window.setBackgroundDrawable(null)
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
    }
}

运行效果如下:

启动页示例3.gif

这什么鬼,黑屏了?哦,忘了给背景图加回去了哈哈哈,再来再来:

image-20210610172320282.png

再运行一下看看效果:

启动页示例4.gif

这下OK了,通过将window背景图设置成一个临时图片,既解决了重复引用图片资源的问题,又可以正常执行启动页自己的逻辑了。

【特别注意】

由于window背景使用图片时无法像imageView一样设置缩放,所以会强制将图片拉伸为屏幕宽高,从而导致图片变形。要避免这种情况出现,可以尝试使用点九图【9-Patch图】或者自定义的drawable图来处理,这里就需要仁者见仁智者见智了。

8.总结

解决app启动页白屏的方案不止一种,我们这里采用了最直观明了的做法,即使用图片替换白屏的方式,但是要明白,这种做法仅仅是替换了白屏,并没有消除白屏展示占用的时间。由app冷启动流程可知,空白window(即白屏)时间主要由创建进程和初始化app(即启动应用)来决定,虽然我们无法干预创建进程的时间,但可以从初始化app来下手,比如优化自定义的application,从而缩短白屏显示时间,加快应用启动速度。

参考文献

探索 Android 启动优化方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容