Android解決APP啟動(dòng)白屏

目錄

前言

當(dāng)APP第一次啟動(dòng)會(huì)有一段時(shí)間的白屏,而當(dāng)代碼變多白屏的時(shí)間會(huì)更長,這對用戶體驗(yàn)來說非常差,因此我們需要進(jìn)行處理,讓用戶感覺不到有白屏的那個(gè)間隙。

效果對比

下面是我通過對Application的onCreate進(jìn)行延時(shí)操作來模擬白屏

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        try {
            Thread.sleep(3000);
        }catch (Exception e){}
    }
}

下面是我通過處理解決白屏后的效果的對比


實(shí)現(xiàn)步驟

1.增加歡迎頁

增加一個(gè)歡迎頁(SplashActivity)

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
    }
}
2.給歡迎頁設(shè)置樣式

我們給SplashActivity設(shè)置單獨(dú)的樣式,我們重點(diǎn)是加了背景和設(shè)置狀態(tài)欄背景為白色狀態(tài)欄文字為黑色(因?yàn)檠菔镜腟plashActivity背景為白色所以設(shè)置狀態(tài)欄為白色比較好),并且用了沒有ActionBar的樣式

<style name="Theme.WhitePageDemoSplash" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>

        <!--  這三行是重點(diǎn)  -->
        <!--    設(shè)置背景,解決白屏的關(guān)鍵    -->
        <item name="android:windowBackground">@drawable/bg_splash</item>
        <!-- 設(shè)置狀態(tài)欄為白色的,狀態(tài)欄文字為黑的 -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
        <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
    </style>

AndroidManifest.xml中設(shè)置上

<application
        android:allowBackup="true"
        android:name=".MyApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.WhitePageDemo">
        <activity android:name=".SplashActivity" android:theme="@style/Theme.WhitePageDemoSplash">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity" android:launchMode="singleTask" android:screenOrientation="portrait"/>
    </application>
3.給樣式設(shè)置背景

接下來是編寫背景的xml文件,我設(shè)置背景為白色,這也是與SplashActivity對應(yīng)起來,然后加了一張全屏縮放的圖片,圖片的背景透明

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>

    <item>
        <bitmap
            android:gravity="fill"
            android:src="@drawable/splashlog" />
    </item>
</layer-list>
4.調(diào)整歡迎頁布局

歡迎頁的布局我們也用這張圖片,也是占滿整個(gè)布局并縮放,并且加了一個(gè)顯示”跳過“的TextView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:src="@drawable/splashlog"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:text="跳過"
        android:textSize="18sp"
        android:textColor="@color/black"
        android:layout_gravity="right"
        android:layout_marginTop="40dp"
        android:layout_marginRight="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</FrameLayout>

接下來我們看效果



我們發(fā)現(xiàn)頁面會(huì)向下移動(dòng)一下,那是因?yàn)楫?dāng)SplashActivity的布局加載出來的時(shí)候,會(huì)有一塊狀態(tài)欄高度的下移,并且如果有虛擬鍵盤的話也會(huì)影響整個(gè)視覺效果的過渡,接下來我們只需要把SpalshActivity的布局調(diào)整為全屏即可

5.讓歡迎頁充滿全屏

這里給大家介紹個(gè)工具庫(https://github.com/Blankj/AndroidUtilCode),非常好用

 //工具類
implementation 'com.blankj:utilcodex:1.30.6'

具體操作如下:

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        //設(shè)置下布局向上移動(dòng)狀態(tài)欄的高度
        BarUtils.setStatusBarColor(this, ColorUtils.getColor(R.color.white));
        //設(shè)置隱藏虛擬按鍵
        BarUtils.setNavBarVisibility(this,false);
    }
}

最后效果如下,可以看到是非常平滑的過渡


案例源碼

https://gitee.com/itfitness/white-page-demo

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容