輕鬆學習Ionic (四) 修改應用表徵圖及啟動畫面

來源:互聯網
上載者:User

標籤:

應用表徵圖:

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 (四) 修改應用表徵圖及啟動畫面

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.