[轉]輕鬆學習Ionic （四） 修改應用表徵圖及添加啟動畫面（更新官方命令列工具自動產生）

標籤：

本文轉自：http://blog.csdn.net/zapzqc/article/details/42237935

由於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中進入項目所在檔案夾執行： [html] view plain copy print?

1. ionic resources  

ionic resources

 執行該命令後，會自動在resources檔案夾下建立已添加的平台名稱的檔案夾，如：android，其中會自動將圖片進行縮放、裁剪，產生不同解析度的圖片，並在config.xml中添加相應內容。 也可分開執行： [html] view plain copy print?

1. ionic resources --icon       
2. ionic resources --splash  

ionic resources --icon     ionic resources --splash

注意：執行以上命令時需線上！

 

[轉]輕鬆學習Ionic （四） 修改應用表徵圖及添加啟動畫面（更新官方命令列工具自動產生）