說明：這篇文章主要解決android啟動(dòng)頁圖片全屏?xí)r圖片被拉伸問題

需求：

最近app全面改版，然后啟動(dòng)頁換成了一整張圖片，效果圖如下：

image.png

2、問題

剛開始的時(shí)候，切的是一整張圖，然后在兩部測(cè)試機(jī)下測(cè)試發(fā)現(xiàn)，啟動(dòng)的時(shí)候：

①、底部的字體有稍微的變形；

②、圖片垂直方向有些許的壓縮【這個(gè)問題在改版之前有，測(cè)試沒有提這個(gè)問題，但是在這次改版的時(shí)候，想要進(jìn)一步優(yōu)化一下，啟動(dòng)時(shí)感覺是兩張圖片的這種體驗(yàn)不是很好】；

3、解決

（需要注意的是，啟動(dòng)頁的圖片尺寸大小的選擇也是很影響到不同手機(jī)的適配的，目前我選擇的圖片的尺寸大小是1125?×?1884大小的，放在mipmap-xxhdpi文件夾下的，這個(gè)尺寸在目前公司測(cè)試機(jī)上適配都是OK的）

問題①解決方法：

下半部分字體為了防止變形，讓設(shè)計(jì)把效果圖切成了兩部分，上面圖片部分和下面的純文字部分，切圖如下：

ic_splash_logo.png

image.png

更進(jìn)一步優(yōu)化的話，可以對(duì)圖片進(jìn)行.9的適配

問題②解決方法：

圖片被壓縮，經(jīng)過多次測(cè)試發(fā)現(xiàn)，是因?yàn)樵贏ctivity里面設(shè)置了沉浸式效果，導(dǎo)致圖片沒有全屏展示，在代碼中去掉了沉浸式效果，然后在styles.xml里對(duì)啟動(dòng)頁進(jìn)行主題設(shè)置，使布局占據(jù)狀態(tài)欄空間

清單文件代碼

   <activity
            android:name=".ui.other.SplashActivity"
            android:enabled="false"
            android:alwaysRetainTaskState="true"
            android:theme="@style/SplashTheme"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

主題文件代碼

    <!--android9.0啟動(dòng)頁全屏適配-->
    <!--?。?！注意，這里修改，記得同步values-v27里面的樣式文件-->
    <style name="SplashTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item><!--目前這個(gè)屬性未知-->

        <item name="android:windowIsTranslucent">false
        </item><!--沉浸透明狀態(tài)欄  可選，窗口是否是半透明，設(shè)置狀態(tài)欄的效果，這個(gè)值也會(huì)影響狀態(tài)效果-->
        <item name="android:windowDisablePreview">false
        </item><!--冷啟動(dòng)是用到的屬性，窗口不可見時(shí)的預(yù)覽圖，為true時(shí)點(diǎn)擊app圖標(biāo)會(huì)慢一會(huì)-->
       <item name="android:windowBackground">@drawable/layer_launch2</item><!--替換啟動(dòng)白屏的圖片-->
        <!--<item name="android:windowBackground">@mipmap/ic_splash_logo</item>--><!--替換啟動(dòng)白屏的圖片-->

        <!-- 在5.0后，增加了一個(gè)windowDrawsSystemBarBackgrounds屬性，用來標(biāo)志此窗口是否負(fù)責(zé)繪制系統(tǒng)欄背景，
        我們把它設(shè)成false，這樣當(dāng)它繪制windowBackground的時(shí)候，就會(huì)在NavigationBar之上。-->
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <item name="android:windowTranslucentStatus">true</item><!--這行代碼使布局占據(jù)狀態(tài)欄空間-->

    </style>

然后適配一下android8.0【對(duì)應(yīng)api版本27】以上的機(jī)型，創(chuàng)建values-27文件夾，然后在該文件夾下創(chuàng)建styles.xml文件

image.png

values-27文件夾下styles.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--android9.0啟動(dòng)頁全屏適配-->
    <style name="SplashTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsTranslucent">false
        </item><!--沉浸透明狀態(tài)欄  可選，窗口是否是半透明，設(shè)置狀態(tài)欄的效果，這個(gè)值也會(huì)影響狀態(tài)效果-->
        <item name="android:windowDisablePreview">false
        </item><!--冷啟動(dòng)是用到的屬性，窗口不可見時(shí)的預(yù)覽圖，為true時(shí)點(diǎn)擊app圖標(biāo)會(huì)慢一會(huì)-->
        <item name="android:windowBackground">@drawable/layer_launch2</item><!--替換啟動(dòng)白屏的圖片-->
       <!-- <item name="android:windowBackground">@mipmap/ic_splash_logo</item>--><!--替換啟動(dòng)白屏的圖片-->

        <!-- Android P 異性屏適配 可以達(dá)到全面屏的效果 -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

        <!-- 在5.0后，增加了一個(gè)windowDrawsSystemBarBackgrounds屬性，用來標(biāo)志此窗口是否負(fù)責(zé)繪制系統(tǒng)欄背景，
我們把它設(shè)成false，這樣當(dāng)它繪制windowBackground的時(shí)候，就會(huì)在NavigationBar之上。-->
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <item name="android:windowTranslucentStatus">true</item><!--這行代碼使布局占據(jù)狀態(tài)欄空間-->
    </style>
</resources>

該文件加了一行代碼，對(duì)android凹凸屏進(jìn)行了適配

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

Google對(duì)劉海屏的顯示方式提供了三種顯示模式

// 默認(rèn)情況，全屏頁面不可用劉海區(qū)域，非全屏頁面可以進(jìn)行使用
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT = 0;
// 允許頁面延伸到劉海區(qū)域
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES = 1;
// 不允許使用劉海區(qū)域
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER = 2;

在主題中加入android:windowLayoutInDisplayCutoutMode屬性指定顯示模式

冷啟動(dòng)時(shí)為了防止出現(xiàn)白屏或者等待時(shí)間，加入了一張默認(rèn)的圖片【也就是啟動(dòng)頁的圖片】

 <item name="android:windowBackground">@drawable/layer_launch2</item><!--替換啟動(dòng)白屏的圖片-->

再看看SplashActivity布局文件里，啟動(dòng)頁圖片的配置

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/layer_launch2"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

可以發(fā)現(xiàn)，其實(shí)app啟動(dòng)時(shí)是有兩張圖片，一張冷啟動(dòng)時(shí)的友好圖片，一張是真正的啟動(dòng)頁的圖片，如果適配的不好的話，冷啟動(dòng)時(shí)的背景圖就不會(huì)和SplashActivity的圖片完美重疊，也就是會(huì)出現(xiàn)圖片壓縮或者明顯感覺是兩張圖片放上去的效果。當(dāng)然，因?yàn)槲覀儸F(xiàn)在app里面沒有加入廣告位，所以SplashActivity里面的ImageView用的是默認(rèn)圖，如果用網(wǎng)絡(luò)請(qǐng)求的廣告圖，那么就不會(huì)有重疊的問題，即使這樣，冷啟動(dòng)的圖片也要做好全屏適配的效果，回過頭來，還是先看目前的問題，圖片拉伸的問題

一是要對(duì)android P以上的手機(jī)進(jìn)行劉海屏的適配；

二是不要在Activity里對(duì)代碼進(jìn)行沉浸式效果的設(shè)置；

三在drawable文件夾下，創(chuàng)建圖層列表layer-list圖片；

layer_launch2.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@color/white" />
    <!--因?yàn)槭褂米铋L(zhǎng)圖做適配，所以這里不會(huì)有需要填充的地方，所以上面注釋掉-->
    <item android:bottom="150dp">
        <bitmap
            android:src="@mipmap/ic_splash_logo" />
    </item>


    <item android:bottom="30dp">
        <bitmap
            android:gravity="bottom|center"
            android:src="@mipmap/ic_splash_bottom" />
    </item>

</layer-list>

對(duì)應(yīng)的效果圖如下

image.png

可以發(fā)現(xiàn)，其實(shí)是第一層是白色背景，第二層是上半部分切圖，設(shè)置了距離底部150dp，150dp是留出來顯示底部問題的高度，這個(gè)大小可以自己設(shè)置，第三層設(shè)置的是圖片底部居中，然后距離底部30dp，通過三層疊加的效果，實(shí)現(xiàn)了最終的效果圖，一般的啟動(dòng)頁的圖片都是通過這種圖層列表來實(shí)現(xiàn)，這樣適配的效果會(huì)更好一些

至此，android啟動(dòng)頁圖片全屏?xí)r圖片被拉伸問題的問題解決掉啦！

4、總結(jié)

作為一名有職業(yè)道德的程序員，對(duì)于代碼中的瑕疵還是要解決的，特別是對(duì)于啟動(dòng)頁這種“門面”，啟動(dòng)頁的代碼處理邏輯其實(shí)就這幾個(gè)方面：切圖尺寸選擇、主題文件配置【劉海屏適配】、drawable文件創(chuàng)建及處理、、沉浸式效果處理。