Android启动页白屏&背景图拉伸的解决方案

1.前言

• 新项目的闪屏页面用到一张大图，UI那边要求那张图片填充全屏，而且不能压缩或拉伸。
• 然后百度了一把… 又折腾了好一会，最终参照中国联通app实现效果，在这里写个demo做一下记录，希望对你有用。

2.问题点

• 一打开app启动页白屏问题

• 图片拉伸问题

• 最终效果图如下
  
  是由3张图片和一个蓝色背景绘制的，全屏的是一个蓝色背景，上下都是同一张图（摆放不同），中间是一个小人图，底部是手机自带按钮的返回（沉浸式）

• 下面是两张原图（缩小了一点显示）
  
  

3.代码及说明

直接上Activity类

public class SplashActivity extends AppCompatActivity implements Runnable {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        hideStatusBarNavigationBar();
        Intent intent = getIntent();
        if (!isTaskRoot()
                && intent != null
                && intent.hasCategory(Intent.CATEGORY_LAUNCHER)
                && intent.getAction() != null
                && intent.getAction().equals(Intent.ACTION_MAIN)) {
            finish();
            return;
        }
        new Handler().postDelayed(this, 4000);
    }

    @Override
    public void run() {
        String account = SharedPreferenceUtils.getInstance(this).getString(Constant.KEY_LOGIN_ACCOUNT);
        if (TextUtils.isEmpty(account)) {
            LoginActivity.start(this);
        } else {
            MainActivity.start(this);
        }
        finish();
    }


    //****状态栏、导航栏都透明****
    private void hideStatusBarNavigationBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
            window.setNavigationBarColor(Color.TRANSPARENT);
            return;
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

        }
    }

}

• 主要是在OnCreate方法内调用下面方法将顶部和底部导航栏置为透明

 private void hideStatusBarNavigationBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
            window.setNavigationBarColor(Color.TRANSPARENT);
            return;
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

        }
    }

AndroidManifest.xml代码，设置theme属性

...
  <activity
            android:name=".module.splash.SplashActivity"
            android:screenOrientation="portrait"
            android:theme="@style/Splash_Page">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
  </activity>
...

style.xml属性

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="Splash_Page" parent="AppTheme">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowBackground">@drawable/splash_bitmap</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>

</resources>

注意下面属性，需要在v27下才生效，所以需要创建一个包名为values-v27的文件夹，里面再放一个style.xml文件

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

在res目录下创建文件夹drawable，文件夹内创建文件splash_bitmap.xml内容如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#6faceb" />
        </shape>
    </item>

	<!--item内部还可以指定距离上下左右的边距，具体根据自己需要-->
    <!--<item
        android:bottom="100dp"
        android:top="142dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_splash" />
    </item>-->

    <item>
        <bitmap
            android:gravity="top|right"
            android:src="@drawable/ic_splash" />
    </item>

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_splash_2" />
    </item>

    <item>
        <bitmap
            android:gravity="bottom|left"
            android:src="@drawable/ic_splash" />
    </item>

</layer-list>

好了，到此代码结束，是不是特别简单～

4.注意点

• 无论图有多么的复杂，我们都需要把图给拆开（让UI切图），不能用整张图来做适配
• 和布局XML不一样，图片没有太多的裁剪属性可以使用，过宽或过高的图片系统会自动裁剪，所以一些不想裁剪的元素需要单独做一张图摆放位置

要是对你有用帮我点个👍。
附上源码地址：github源码（平时的demo）