图标和启动画面
这一部分描述了怎样去配置应用程序的图标及为各种平台配置的启动画面,使用CLI或者SDK工具进行开发的都可以。
CLI配置图标
当使用CLI进行工作时,图标都是保存在各个平台的子目录下面的,目录为:www/res/icon。新创建的项目使用Cordova图标去代替平台特定的图标。
Android特定平台的图标,提供了low、medium、high及extra-high分辨率的。
android/icon-36-ldpi.png
android/icon-48-mdpi.png
android/icon-72-hdpi.png
android/icon-96-xhdpi.png
IOS平台指定72pixel的图标用于ipad,而57pixel的用于iphone和ipod,retina则使用高分辨率的2x:
ios/icon-57-2x.png
ios/icon-57.png
ios/icon-72-2x.png
ios/icon-72.png
window phone平台默认使用48pixel的图标,然后使用背景平铺的方式满足
windows-phone/icon-48.png
windows-phone/icon-62-tile.png
windows-phone/icon-173-tile.png
BlackBerry则需要在config.xml中标识一个icon元素:
<icon src="blackberry10/icon-86.png" />
Tizen则需要一个128pixel的图标:
tizen/icon-128.png
CLI配置启动画面
在许多平台上,可以使用Splashscreen API去显示应用程序的启动画面。当使用CLI进行工作的时候,启动画面的源文件位于项目的 www/res/screens子目录下面。
Android平台需要横竖方向的启动画面图片,包含low/mediu/high/extra-high分辨率的,如:
android/screen-hdpi-landscape.png
android/screen-hdpi-portrait.png
android/screen-ldpi-landscape.png
android/screen-ldpi-portrait.png
android/screen-mdpi-landscape.png
android/screen-mdpi-portrait.png
android/screen-xhdpi-landscape.png
android/screen-xhdpi-portrait.png
IOS平台指定了为IPhone/IPod 、IPad、retina屏幕及为IPhone 5的taller屏幕的586h文件,如下:
ios/screen-ipad-landscape-2x.png
ios/screen-ipad-landscape.png
ios/screen-ipad-portrait-2x.png
ios/screen-ipad-portrait.png
ios/screen-iphone-landscape-2x.png
ios/screen-iphone-landscape.png
ios/screen-iphone-portrait-2x.png
ios/screen-iphone-portrait.png
ios/screen-iphone-portrait-568h-2x.png
Window Phone使用一个简单的图片就可以标识:
windows-phone/screen-portrait.jpg
下面的部分详细描述当使用SDK进行开发的时候怎样设置启动画面。
注意:在使用navigator.splashscreen.hide()和navigator.splashscreen.show()时,不要忘记安装 Splashscreen插件。
Android平台的启动画面
放置九宫格(9-patch)图片文件到项目的 platforms/android/res/drawable* 子目录下。
每一个的尺寸应该是:
- xlarge (xhdpi): 至少 960 × 720
- large (hdpi): 至少 640 × 480
- medium (mdpi): 至少 470 × 320
- small (ldpi): 至少 426 × 320
platforms/android/www/res/screen/android目录复制png图片到platforms/android/res/drawable*/目录下:
cd platforms/android/res
mkdir drawable-port-ldpi
cp -p ../assets/www/res/screen/android/screen-ldpi-portrait.png drawable-port-ldpi/screen.png
mkdir drawable-land-ldpi
cp -p ../assets/www/res/screen/android/screen-ldpi-landscape.png drawable-land-ldpi/screen.png
mkdir drawable-port-mdpi
cp -p ../assets/www/res/screen/android/screen-mdpi-portrait.png drawable-port-mdpi/screen.png
mkdir drawable-land-mdpi
cp -p ../assets/www/res/screen/android/screen-mdpi-landscape.png drawable-land-mdpi/screen.png
mkdir drawable-port-hdpi
cp -p ../assets/www/res/screen/android/screen-hdpi-portrait.png drawable-port-hdpi/screen.png
mkdir drawable-land-hdpi
cp -p ../assets/www/res/screen/android/screen-hdpi-landscape.png drawable-land-hdpi/screen.png
mkdir drawable-port-xhdpi
cp -p ../assets/www/res/screen/android/screen-xhdpi-portrait.png drawable-port-xhdpi/screen.png
mkdir drawable-land-xhdpi
cp -p ../assets/www/res/screen/android/screen-xhdpi-landscape.png drawable-land-xhdpi/screen.png
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="10000" />