android app啟動(dòng)頁(yè)(閃屏頁(yè))白屏快速優(yōu)化方案實(shí)踐

1.背景

無(wú)意間發(fā)現(xiàn),自己的一個(gè)線上項(xiàng)目雖然很輕量級(jí),但是在低端機(jī)型上依然存在啟動(dòng)頁(yè)白屏現(xiàn)象,于是就快速優(yōu)化了一番,在此分享一下優(yōu)化方案。

2.存在問(wèn)題

引用一張探索 Android 啟動(dòng)優(yōu)化方法中的app冷啟動(dòng)流程示意圖:

ILQ5nr.png

由啟動(dòng)圖可知:打開(kāi)app時(shí),系統(tǒng)要加載一個(gè)空白window,創(chuàng)建進(jìn)程,初始化app(啟動(dòng)應(yīng)用),最后才加載啟動(dòng)頁(yè)布局。如果在創(chuàng)建進(jìn)程和初始化app過(guò)程中耗時(shí)較久,那么在啟動(dòng)頁(yè)布局顯示之前,用戶便能肉眼感知到空白window的存在,也就是我們所說(shuō)的白屏(或者黑屏,由你設(shè)置的theme決定)。

本文要做的,一步一步解決顯示白屏的問(wèn)題。

3.特別說(shuō)明

本文就不聊zygote創(chuàng)建進(jìn)程運(yùn)行app的那一堆原理來(lái)班門(mén)弄斧了,只談一談解決問(wèn)題最簡(jiǎn)單的方法,對(duì)原理有興趣的可以自行翻閱【參考文獻(xiàn)】中的相關(guān)文檔。

4.解決思路

通過(guò)給activity指定帶有window背景的theme來(lái)避免白屏(設(shè)置window背景)

優(yōu)點(diǎn) 缺點(diǎn)
設(shè)置window背景 能夠快速解決顯示白屏問(wèn)題 可能會(huì)引起背景圖拉伸問(wèn)題

5.快速解決方案

創(chuàng)建一個(gè)style,清單文件里單獨(dú)給啟動(dòng)頁(yè)的theme設(shè)置為該style,代碼如下:

<style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!--將頂部狀態(tài)欄設(shè)置為透明,并將界面內(nèi)容布局上邊界上提至狀態(tài)欄頂部-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--如果有底部虛擬導(dǎo)航欄,則將底部虛擬導(dǎo)航欄設(shè)置為透明,并將界面內(nèi)容布局下邊界下沉至虛擬導(dǎo)航欄底部-->
    <item name="android:windowTranslucentNavigation">true</item>
    <!--給window窗口設(shè)置背景圖-->
    <item name="android:windowBackground">@drawable/bg_splash_snow</item>
</style>

@drawable/bg_splash_snow改為你自己的背景圖

啟動(dòng)頁(yè)activity 的 onCreate 方法回調(diào)中,將window的背景圖置空,代碼如下:

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

看下效果:

啟動(dòng)頁(yè)示例2.gif

完事兒~~~下篇見(jiàn)

8c0de91c98bf76faca5055cabcb56a3c03a98e398fdef5f7a.jpg

這就沒(méi)了?????

aae06983740640ab814d991af8898f9c67612a9391d499944.jpg

對(duì),沒(méi)錯(cuò),代碼就是這么簡(jiǎn)單。

不過(guò)對(duì)style里那三個(gè)屬性不熟悉的朋友,可能心存疑問(wèn):這到底是個(gè)什么鬼。。。

那咱接下來(lái)就細(xì)細(xì)的捋一遍吧。

6.事前準(zhǔn)備

創(chuàng)建一個(gè)啟動(dòng)頁(yè)界面,布局里設(shè)置背景為一張圖片,并放一個(gè)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文件里新建一個(gè) style ,parent 設(shè)置為 Theme.AppCompat.DayNight.NoActionBar 來(lái)取消標(biāo)題欄:

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

AndroidManifest.xml里將該style設(shè)置給SplashActivity,方便我們后續(xù)對(duì)比效果:

<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>

華為手機(jī)上運(yùn)行效果如下:

5ad43f16d970f580f925f31f65fbd2c.jpg

咦?這頂部狀態(tài)欄跟底部導(dǎo)航欄也忒丑了點(diǎn)。。。。。。

D415A583C0FF67A7D583065D4701F7BE.jpg

那。。干掉吧。。。

1407C31B0C9096C6B3967DE5631B0B63.gif

在style里設(shè)置一下:

<style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!--將頂部狀態(tài)欄設(shè)置為透明,并將界面內(nèi)容布局上邊界上提至狀態(tài)欄頂部-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--如果有底部虛擬導(dǎo)航欄,則將底部虛擬導(dǎo)航欄設(shè)置為透明,并將界面內(nèi)容布局下邊界下沉至虛擬導(dǎo)航欄底部-->
    <item name="android:windowTranslucentNavigation">true</item>
</style>

運(yùn)行效果如下:

啟動(dòng)頁(yè)示例.gif

哦豁 ~~ 處理好頂部狀態(tài)欄跟底部導(dǎo)航欄后舒服多了,但是,這個(gè)白屏問(wèn)題???

恩,明顯的不像話。

7.通過(guò)【設(shè)置window背景】解決白屏問(wèn)題

這個(gè)賊簡(jiǎn)單,只需要通過(guò)style的android:windowBackground屬性給window設(shè)置一個(gè)背景,最終設(shè)置如下:

<style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!--將頂部狀態(tài)欄設(shè)置為透明,并將界面內(nèi)容布局上邊界上提至狀態(tài)欄頂部-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--如果有底部虛擬導(dǎo)航欄,則將底部虛擬導(dǎo)航欄設(shè)置為透明,并將界面內(nèi)容布局下邊界下沉至虛擬導(dǎo)航欄底部-->
    <item name="android:windowTranslucentNavigation">true</item>
    <!--給window窗口設(shè)置背景圖-->
    <item name="android:windowBackground">@drawable/bg_splash_snow</item>
</style>

@drawable/bg_splash_snow 是我的一張背景圖:

bg_splash_snow.png

運(yùn)行效果如下:

啟動(dòng)頁(yè)示例2.gif

完事兒,收工~

“等等~”,有朋友(無(wú)中生友?)怕是要問(wèn)了:那你這一個(gè)界面設(shè)置了兩個(gè)背景圖,豈不是有些冗余?

哎呀,那來(lái)吧,去掉一張吧,把布局文件的圖干掉(tools:background表示只渲染預(yù)覽布局,不參與實(shí)際運(yùn)行):

image-20210610170155306.png

結(jié)果如下:

啟動(dòng)頁(yè)示例2.gif

可以看到,運(yùn)行結(jié)果跟之前跟一模一樣。

眼尖的朋友又要問(wèn)了:“連時(shí)間都一樣???”

哈哈哈,我就是偷的上一張圖。

47915A4C88384FBDB3496D2D7C544FA5.gif

當(dāng)然了,這里顯示的背景圖就是window上的背景圖,實(shí)際上這樣是有問(wèn)題的,比如我啟動(dòng)頁(yè)要放個(gè)viewpager啥的,需要處理圖片的一些展示邏輯可咋整,window背景又不能搞成viewpager?

那咱們換一個(gè)思路,window的背景圖在用完后給他置空,繼續(xù)顯示啟動(dòng)頁(yè)的布局視圖行不行呢?來(lái)實(shí)踐一下看看:

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

運(yùn)行效果如下:

啟動(dòng)頁(yè)示例3.gif

這什么鬼,黑屏了?哦,忘了給背景圖加回去了哈哈哈,再來(lái)再來(lái):

image-20210610172320282.png

再運(yùn)行一下看看效果:

啟動(dòng)頁(yè)示例4.gif

這下OK了,通過(guò)將window背景圖設(shè)置成一個(gè)臨時(shí)圖片,既解決了重復(fù)引用圖片資源的問(wèn)題,又可以正常執(zhí)行啟動(dòng)頁(yè)自己的邏輯了。

【特別注意】

由于window背景使用圖片時(shí)無(wú)法像imageView一樣設(shè)置縮放,所以會(huì)強(qiáng)制將圖片拉伸為屏幕寬高,從而導(dǎo)致圖片變形。要避免這種情況出現(xiàn),可以嘗試使用點(diǎn)九圖【9-Patch圖】或者自定義的drawable圖來(lái)處理,這里就需要仁者見(jiàn)仁智者見(jiàn)智了。

8.總結(jié)

解決app啟動(dòng)頁(yè)白屏的方案不止一種,我們這里采用了最直觀明了的做法,即使用圖片替換白屏的方式,但是要明白,這種做法僅僅是替換了白屏,并沒(méi)有消除白屏展示占用的時(shí)間。由app冷啟動(dòng)流程可知,空白window(即白屏)時(shí)間主要由創(chuàng)建進(jìn)程和初始化app(即啟動(dòng)應(yīng)用)來(lái)決定,雖然我們無(wú)法干預(yù)創(chuàng)建進(jìn)程的時(shí)間,但可以從初始化app來(lái)下手,比如優(yōu)化自定義的application,從而縮短白屏顯示時(shí)間,加快應(yīng)用啟動(dòng)速度。

參考文獻(xiàn)

探索 Android 啟動(dòng)優(yōu)化方法

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容