Cordova项目的图标和启动画面

Phonegap/Cordova项目中的config.xml文件，里面配置了下面的内容：

<icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" /><icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" /><icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png" /><icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" /><icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" /><icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" /><icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" /><icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" /><icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" /><icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" /><icon gap:platform="webos" src="res/icon/webos/icon-64.png" /><icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" /><icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" /><gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" /><gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" /><gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" /><gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" /><gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" /><gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" /><gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" /><gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" /><gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" /><gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" /><gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />

这个 res/icon和res/screen目录是相对于phonegap项目目录的 ，也就是类似phonegap/res/icon/android/icon-36-ldpi.png，你的 图标和启动画面必须在这两个目录下 。

phonegap3.5以前的config.xml中src="res/........"，phonegap3.5开始变为了src="www/res/......."，而实际图标和启动画面文件都是存在于www/res下面的。因此phonegap3.4没应用上图标和启动画面是情有可原的（因为路径没指定对）。

不过尽管将src改为"www/res/......."，也将我们自己的图标和启动画面文件放在了phonegap/www/res/...下，

但是最后build之后的安卓项目和ios项目，图标和启动画面还是没有我们自己的。

后来看了Cordova文档，对config.xml做了一些修改，才配置成功。

1、去掉上面config.xml中的图标和启动画面配置，改为下面的

<platform name="android">  <icon src="res/icon/android/icon-36-ldpi.png" density="ldpi" />  <icon src="res/icon/android/icon-48-mdpi.png" density="mdpi" />  <icon src="res/icon/android/icon-72-hdpi.png" density="hdpi" />  <icon src="res/icon/android/icon-96-xhdpi.png" density="xhdpi" />  <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"/></platform><platform name="ios">  <icon src="res/icon/ios/[e-mail]" width="180" height="180" />  <icon src="res/icon/ios/icon-60.png" width="60" height="60" />  <icon src="res/icon/ios/[e-mail]" width="120" height="120" />  <icon src="res/icon/ios/icon-76.png" width="76" height="76" />  <icon src="res/icon/ios/[e-mail]" width="152" height="152" />  <icon src="res/icon/ios/icon-40.png" width="40" height="40" />  <icon src="res/icon/ios/[e-mail]" width="80" height="80" />  <icon src="res/icon/ios/icon.png" width="57" height="57" />  <icon src="res/icon/ios/[e-mail]" width="114" height="114" />  <icon src="res/icon/ios/icon-72.png" width="72" height="72" />  <icon src="res/icon/ios/[e-mail]" width="144" height="144" />  <icon src="res/icon/ios/icon-small.png" width="29" height="29" />  <icon src="res/icon/ios/[e-mail]" width="58" height="58" />  <icon src="res/icon/ios/icon-50.png" width="50" height="50" />  <icon src="res/icon/ios/[e-mail]" width="100" height="100" />  <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>  <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>  <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>  <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>  <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>  <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>  <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/></platform>

2、你需要准备好你自己的app图标和启动画面png文件：

安卓图标具体规格如下（存放目录：phonegap/res/icon/android/）

icon-36-ldpi.png36×36icon-48-mdpi.png48×48icon-72-hdpi.png72×72icon-96-xhdpi.png96×96

安卓启动画面具体规格如下（存放目录：phonegap/res/screen/android/）

splash-land-hdpi.png640×480splash-land-ldpi.png426×320splash-land-mdpi.png470×320splash-land-xhdpi.png960×720splash-port-hdpi.png480×640splash-port-ldpi.png320×426splash-port-mdpi.png320×470splash-port-xhdpi.png720×960

iOS图标具体规格如下（存放目录：phonegap/res/icon/ios/）

[e-mail]180×180icon-60.png60×[e-mail]120×120icon-76.png76×[e-mail]152×152icon-40.png40×[e-mail]80×80icon.png57×[e-mail]114×114icon-72.png72×[e-mail]144×144icon-small.png29×[e-mail]58×58icon-50.png50×[e-mail]100×100

iOS启动画面具体规格如下（存放目录：phonegap/res/screen/ios/）

Default~iphone.png320×480Default@2x~iphone.png640×960Default-Portrait~ipad.png768×1024Default-Portrait@2x~ipad.png1536×2048Default-Landscape~ipad.png1024×768Default-Landscape@2x~ipad.png2048×1536Default-568h@2x~iphone.png640×1136Default-667h.png750×1334( 好像 cordova4.0才支持)Default-736h.png1242×2208  (好像cordova4.0才支持)Default-Landscape-736h.png2208×1242 (好像cordova4.0才支持)

3、如何显示splashscreen启动画面？

iOS默认可以启用启动画面 ，安装到手机后运行就可以看到；

安卓 的的话本来也是默认也有启动画面的，只不过因为 配置有问题，没有显示出来，原因如下：

phonegap生成安卓项目的时候，会自动把phonegap/res/screen/android/ 下面的各个图片文件 命名为screen.png，放到安卓项目的各个 res/drawable* 目录底下 ，而在CordovaLib\src\org\apache\cordova\Config.java中指定的文件名却是"splash.png"。app启动时找不到splash.png，所以就没显示。

因此，我们要在config.xml中添加下面两个preference配置，用"SplashScreen"指定文件名为screen.png：

<preference name="SplashScreen" value="screen" /><preference name="SplashScreenDelay" value="3000" />

"SplashScreenDelay"指定启动画面多长时间后自动隐藏， 这里配置了3000ms，也就是3秒钟。

4、好了，到这就配置完毕了，重新build你的phonegap项目吧，你的安卓和ios都能显示你自己的图标和启动画面了。

ps：我推荐是每次buildphonegap项目的时候都将以下目录和文件删除后再build：

对于安卓，删除phonegap/plugins/android.json文件和phonegap/platforms/android文件夹

对于ios，删除phonegap/plugins/ios.json文件和phonegap/platforms/ios文件夹

但是有的手机速度慢，或者js和css文件大，上面设置的 3秒钟根本不足够js和css加载完 ，这时就会出现启动画面隐藏了，然后 黑屏或者白屏几秒种，然后才出现web界面 。这怎么办？

cordova有一个 插件 ，叫 org.apache.cordova.splashscreen ， 地址在这里

这个插件的作用就是让你 自己控制启动画面的显示与隐藏 。

我们可以将"SplashScreenDelay"设置的大一点，比如10000ms，即10秒钟。等到我们的web界面出来以后，我们手动再把启动画面隐藏。你需要做以下工作：

1、在config.xml中修改"SplashScreenDelay"配置，改为10000

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

2、在config.xml中修改"auto-hide-splash-screen"配置，改为false（也就是 不自动隐藏）

<preference name="auto-hide-splash-screen" value="false" />

3、在你的app逻辑代码中， 自己手动调用 下面的代码 隐藏启动画面 ：

navigator.splashscreen.hide();

这句代码必须在deviceready事件中调用（如果是sencha touch，只要在app.js的launch方法中调用就行了）

对于安卓，还有个问题，安卓手机太多参差不齐，分辨率也五花八门，上面配置的4中（横竖屏共8个）分辨率的 启动画面 ，在有的手机上会出现 拉伸变形 的情况。

介绍一种图片格式—— 9-patch图片 (.9.png后缀)。与传统的png 格式图片相比， 9.png 格式图片在图片四周有一圈一个像素点组成的边沿，该边沿用于对图片的可扩展区和内容显示区进行定义。 这种格式的图片在android 环境下具有 自适应调节大小 的能力。

具体介绍和制作方法，可以看这篇博文

好了，9-patch格式的启动画面我们也准备好了，怎么用到我们的phonegap（安卓）项目中呢？

phonegap（安卓）项目默认根据config.xml中指定的"SplashScreen"这个配置，也就是上面我们配置的"screen"作为启动画面文件名（没有找到这个配置的话就用"splash"）。

9-patch文件名必须以".9.png"结尾，也就是我们的启动画面文件名必须是"screen.9.png"。上面说了phonegap在build的时候生成的安卓项目启动画面文件名是"screen.png"。要想让它变成"screen.9.png"，我们需要去改phonegap/Cordova的nodejs代码。

1、config.xml中配置安卓启动画面的部分要改改了：

<platform name="android">  <icon src="res/icon/android/icon-36-ldpi.png" density="ldpi" />  <icon src="res/icon/android/icon-48-mdpi.png" density="mdpi" />  <icon src="res/icon/android/icon-72-hdpi.png" density="hdpi" />  <icon src="res/icon/android/icon-96-xhdpi.png" density="xhdpi" />  <splash src="res/screen/android/splash-land-hdpi.9.png" density="land-hdpi"/>  <splash src="res/screen/android/splash-land-ldpi.9.png" density="land-ldpi"/>  <splash src="res/screen/android/splash-land-mdpi.9.png" density="land-mdpi"/>  <splash src="res/screen/android/splash-land-xhdpi.9.png" density="land-xhdpi"/>  <splash src="res/screen/android/splash-port-hdpi.9.png" density="port-hdpi"/>  <splash src="res/screen/android/splash-port-ldpi.9.png" density="port-ldpi"/>  <splash src="res/screen/android/splash-port-mdpi.9.png" density="port-mdpi"/>  <splash src="res/screen/android/splash-port-xhdpi.9.png" density="port-xhdpi"/></platform>

也就是

把文件改成9-patch图片，文件后缀改为.9.png

2、打开文件C:\Users\xxxxx\AppData\Roaming\npm\node_modules\phonegap\node_modules\cordova-lib\src\cordova\metadata\android_parser.js

作如下修改：

3、重新build你的phonegap项目，此时生成的安卓项目中各个 res/drawable* 文件夹中就都有screen.9.png文件了。