PhoneGap 11 图标和启动画面（Icons and Splash Screens）

图标和启动画面

这一部分描述了怎样去配置应用程序的图标及为各种平台配置的启动画面，使用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

如果你希望使用Cordova提供的默认启动画面，你需要从 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

drawable目录的名称命名必须遵循Android的命名规范。

在www目录下面的config.xml文件里面，加上下面的语句：

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

第一行设置图片作为启动画面显示。这是在drawable目录下面的png图片的名称。如果你的名称不是splash.png，你需要修改value属性。记住不要包含文件的扩展名（如：.png)。如果你想使用Cordova提供的默认画面，value使用screen即可。

第二行显示了启动画面停留的时间，以毫秒为单位，默认值为3000毫秒。

最后，启动画面应该是在必要的时候才显示。当启动app并且webview已经下载完成的情况下，最好是能够隐藏启动画面并且显示主WebView。由于App开始会很快，建议显示使用navigator.splashscreen.hide()方法去隐藏启动画面。

原文链接： Icons and Splash Screens