Android解决APP启动白屏

目录

前言

当APP第一次启动会有一段时间的白屏，而当代码变多白屏的时间会更长，这对用户体验来说非常差，因此我们需要进行处理，让用户感觉不到有白屏的那个间隙。

效果对比

下面是我通过对Application的onCreate进行延时操作来模拟白屏

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

下面是我通过处理解决白屏后的效果的对比

实现步骤

1.增加欢迎页

增加一个欢迎页（SplashActivity）

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
    }
}

2.给欢迎页设置样式

我们给SplashActivity设置单独的样式，我们重点是加了背景和设置状态栏背景为白色状态栏文字为黑色（因为演示的SplashActivity背景为白色所以设置状态栏为白色比较好），并且用了没有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>

        <!--  这三行是重点  -->
        <!--    设置背景，解决白屏的关键    -->
        <item name="android:windowBackground">@drawable/bg_splash</item>
        <!-- 设置状态栏为白色的，状态栏文字为黑的 -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
        <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
    </style>

AndroidManifest.xml中设置上

<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.给样式设置背景

接下来是编写背景的xml文件，我设置背景为白色，这也是与SplashActivity对应起来，然后加了一张全屏缩放的图片，图片的背景透明

<?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.调整欢迎页布局

欢迎页的布局我们也用这张图片，也是占满整个布局并缩放，并且加了一个显示”跳过“的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>

接下来我们看效果

我们发现页面会向下移动一下，那是因为当SplashActivity的布局加载出来的时候，会有一块状态栏高度的下移，并且如果有虚拟键盘的话也会影响整个视觉效果的过渡，接下来我们只需要把SpalshActivity的布局调整为全屏即可

5.让欢迎页充满全屏

这里给大家介绍个工具库(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);
        //设置下布局向上移动状态栏的高度
        BarUtils.setStatusBarColor(this, ColorUtils.getColor(R.color.white));
        //设置隐藏虚拟按键
        BarUtils.setNavBarVisibility(this,false);
    }
}

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

案例源码

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