Android：啓動頁--最佳實踐

1、前言

Android 開發過程當中啓動頁是必不可少的，可是咱們常常會看到啓動打開後是先白屏或者黑屏，而後纔會顯示出啓動頁的圖片，本文會解析此現象的緣由，以及給出解決方案

1.1 啓動白屏或黑屏的緣由

AndroidManifest.xml中的application標籤中設置了theme，當設置的theme是Light類型時啓動白屏，當設置theme是Dark類型時啓動黑屏；

1.2 進一步分析

當系統啓動一個app時，zygote進程會fork一個app子進程，進程建立後在啓動activity時就會建立一個window，這個window會使用theme中設置的windowBackground來顯示背景顏色或者圖片，當使用Light或Dark時跟進代碼就能看到默認設置的windowBackground就是白色和黑色。

###2、啓動頁--常規作法

2.1 建立Activity：SplashActivity

class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
        Handler().postDelayed({
            startActivity(Intent(this,MainActivity::class.java))
            finish()
        },3000)
    }
}
複製代碼

2.2 給啓動頁建立background：splash_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"/>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/splash_screen"/>
    </item>
</layer-list>
複製代碼

下面重點說下bitmap的屬性功能：

• android:antialias

  布爾值。啓用或停用抗鋸齒。

• android:dither

  布爾值。當位圖的像素配置與屏幕不一樣時（例如：ARGB 8888 位圖和 RGB 565 屏幕），啓用或停用位圖抖動。

• android:filter

  布爾值。啓用或停用位圖過濾。當位圖收縮或拉伸以使其外觀平滑時使用過濾。

• android:gravity

  定義位圖的重力。重力指示當位圖小於容器時，可繪製對象在其容器中放置的位置。

  必須是如下一個或多個（用 '|' 分隔）常量值：

  值	說明
  top	將對象放在其容器頂部，不改變其大小。
  bottom	將對象放在其容器底部，不改變其大小。
  left	將對象放在其容器左邊緣，不改變其大小。
  right	將對象放在其容器右邊緣，不改變其大小。
  center_vertical	將對象放在其容器的垂直中心，不改變其大小。
  fill_vertical	按須要擴展對象的垂直大小，使其徹底適應其容器。
  center_horizontal	將對象放在其容器的水平中心，不改變其大小。
  fill_horizontal	按須要擴展對象的水平大小，使其徹底適應其容器。
  center	將對象放在其容器的水平和垂直軸中心，不改變其大小。
  fill	按須要擴展對象的垂直大小，使其徹底適應其容器。這是默認值。
  clip_vertical	可設置爲讓子元素的上邊緣和/或下邊緣裁剪至其容器邊界的附加選項。裁剪基於垂直重力：頂部重力裁剪上邊緣，底部重力裁剪下邊緣，任一重力不會同時裁剪兩邊。
  clip_horizontal	可設置爲讓子元素的左邊和/或右邊裁剪至其容器邊界的附加選項。裁剪基於水平重力：左邊重力裁剪右邊緣，右邊重力裁剪左邊緣，任一重力不會同時裁剪兩邊。

• android:mipMap

  布爾值。啓用或停用 mipmap 提示。如需瞭解詳細信息，請參閱 setHasMipMap()。默認值爲 false。

• android:tileMode

  定義平鋪模式。當平鋪模式啓用時，位圖會重複。重力在平鋪模式啓用時將被忽略。

  必須是如下常量值之一：

  值	說明
  disabled	不平鋪位圖。這是默認值。
  clamp	當着色器繪製範圍超出其原邊界時複製邊緣顏色
  repeat	水平和垂直重複着色器的圖像。
  mirror	水平和垂直重複着色器的圖像，交替鏡像圖像以使相鄰圖像始終相接。

2.3 給啓動頁建立style：SplashTheme

<style name="SplashTheme" parent="AppTheme"> <item name="windowNoTitle">true</item><!--無標題--> <item name="android:windowFullscreen">true</item><!--全屏--> <item name="android:windowIsTranslucent">true</item><!--半透明--> <item name="android:windowBackground">@drawable/splash_background</item> </style>
複製代碼

2.4 在AndroidManifest.xml中給SplashActivity設置style

<activity android:name=".SplashActivity" android:theme="@style/SplashTheme">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>

    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>
複製代碼

經過上面的4步設置就可以解決打開app白屏或黑屏的問題了。

3、最佳實踐

3.1 場景1：只有屏幕中間有一張圖片或者是圖片+文字

經過上面的方式就能實現，注意bitmap使用gravity爲center讓圖片和文字居中顯示

3.2 場景2：屏幕中部和底部都有圖片或者文字

這種上下佈局的，例如微博，能夠把圖片切成上下兩個，或者切割圖片上下左右使圖片總體可以居中顯示

方式一：將圖片切成屏幕中央顯示的圖片和底部圖片

splash_background.xml中就須要換種寫法了

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 總體的背景顏色 -->
    <item>
        <color android:color="@color/white"/>
    </item>
    <!-- 頂部 -->
    <item>
        <bitmap android:gravity="center" android:src="@drawable/splash_center"/>
    </item>
    <!-- 底部 -->
    <item>
        <bitmap android:gravity="bottom|center_horizontal" android:src="@drawable/splash_bottom"/>
    </item>
</layer-list>
複製代碼

當手機底部有虛擬導航欄時，底部圖片會被遮擋，使導航欄透明便可：

class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
        Handler().postDelayed({
            startActivity(Intent(this,MainActivity::class.java))
            finish()
        },3000)
    }
}
複製代碼

這句**window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)**是關鍵

方式二：將圖片設置成background而不是windowBackground

• style設置：

<style name="SplashTheme" parent="AppTheme"> <item name="windowNoTitle">true</item> <item name="android:windowFullscreen">true</item> <item name="android:windowIsTranslucent">true</item> <item name="android:windowBackground">@android:color/white</item> <item name="android:background">@drawable/splash_background</item> </style>
複製代碼

用background來設置背景圖片

• splash_background.xml設置：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"/>
    <item>
        <bitmap android:gravity="clip_vertical|clip_horizontal" android:src="@drawable/splash_screen"/>
    </item>
</layer-list>
複製代碼

利用bitmap的gravity屬性，用clip_vertical|clip_horizontal來裁剪圖片

注意：利用第二種方式時不能使用window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)，這個會致使圖片被拉伸