ionic config.xml設置啟動頁


由於Ionic更新了命令行工具,以后修改應用圖標和添加啟動畫面就簡單了,最新方法見最下方:
 
應用圖標:
 

1.在整個項目所在文件夾下創建res文件夾,里邊再分別創建兩個文件夾AndroidiOS

 
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中進入項目所在文件夾執行:
 
  1. ionic resources  
 執行該命令后,會自動在resources文件夾下創建已添加的平台名稱的文件夾,如:android,其中會自動將圖片進行縮放、裁剪,生成不同分辨率的圖片,並在config.xml中添加相應內容。
也可分開執行:
 
  1. ionic resources --icon       
  2. ionic resources --splash  

配置啟動頁效果

首先找到我們項目下面 res下面的config.xml,然后加入下面兩句就可以解決。更多配置參考官方文檔


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM