ionic config.xml設置啓動頁

因爲Ionic更新了命令行工具，之後修改應用圖標和添加啓動畫面就簡單了，最新方法見最下方：

 

應用圖標：

 

1.在整個項目所在文件夾下建立res文件夾，裏邊再分別建立兩個文件夾Android和iOS。

 

2.針對Android平臺：將咱們的要替換的啓動圖標放如android文件夾下。能夠分別起名爲：mdpi.png(48*48),hdpi(72*72)、xhdpi(96*96)、xxhdpi(144*144) 和 xxxhdpiI(192*192)。

  針對ios的，待補充。

 

3.在config.xml中添加

 <platform name="android">
              <icon src="res/android/ldpi.png" density="ldpi" />
              <icon src="res/android/mdpi.png" density="mdpi" />
              <icon src="res/android/hdpi.png" density="hdpi" />
              <icon src="res/android/xhdpi.png" density="xhdpi" />
 </platform>

其中src中的圖片路徑就爲整個項目的相對路徑。

我這裏偷了個懶，只搞了一個最高像素密度的應用圖標（192px*192px）進去，安卓會自動進行壓縮。 

這裏順便說一下若是要修改應用的名稱，只要修改name標籤裏的內容便可。

這樣在命令行中從新運行ionic run android，就能看到應用圖標和名字已經被替換了。

啓動畫面：

    將啓動畫面的圖片拷貝到以前的android文件夾下，splash-land-hdpi.png（640*480）splash-land-ldpi.png（426 × 320）splash-land-mdpi.png（470 × 320）splash-land-xhdpi.png（960 × 720）splash-port-hdpi.png（480*640）splash-port-ldpi.png（320*426）splash-port-mdpi.png（320*470）splash-port-xhdpi.png（720*960）

（名稱可隨意，只要和config.xml對應上便可）。

    在config.xml中添加

  <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>

    <preference name="SplashScreen" value="screen"/>

    <preference name="SplashScreenDelay" value="10000" />

其中10000單位爲毫秒，即10秒後隱藏啓動畫面。若是不寫第三句，默認3秒隱藏。

以下圖所示：

我這裏沒有那麼多分辨率下的圖片，就隨便找了一個稍大分辨率的，density也沒寫。它會自動將該圖片拷貝到drawable文件夾。

這時候再從新運行程序，便可看到啓動畫面。

用以上的方法，啓動畫面的顯示時長是固定的，很明顯不太友好。

未完持續...

以上方法已經能夠使用Ionic命令行工具來自動生成了，步驟以下：

1.在項目的根目錄下建立resources文件夾。

2.在文件夾中都放入icon.png（應用圖標，最小192x192px，不帶圓角），splash.png（啓動屏幕，最小2208x2208px，中間區域1200x1200px）(能夠是png、psd、ai)

3.在cmd中進入項目所在文件夾執行：

ionic resources

 執行該命令後，會自動在resources文件夾下建立已添加的平臺名稱的文件夾，如：android，其中會自動將圖片進行縮放、裁剪，生成不一樣分辨率的圖片，並在config.xml中添加相應內容。

也可分開執行：

ionic resources --icon
ionic resources --splash

配置啓動頁效果

首先找到咱們項目下面 res下面的config.xml,而後加入下面兩句就能夠解決。更多配置參考官方文檔


<preference name="FadeSplashScreen" value="false"/>    //隱藏淡入淡出
    
    <preference name="SplashScreenDelay" value="5000" />   //設置啓動畫面事件
    
    <preference name="ShowSplashScreenSpinner" value="false"/>   //隱藏啓動畫面那個laoding圖片