原文地址:http://blog.csdn.net/lovelyelfpop/article/details/40780111
官方文档中的图标和启动图说明,请拖到本文最底下。
Phonegap项目中的config.xml文件,里面配置了下面的内容(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/.......",而实际图标和启动画面文件都是存在于phonegap/www/res下面的。因此phonegap3.4没应用上图标和启动画面是情有可原的(因为路径没指定对)。
不过尽管将src改为"www/res/.......",也将我们自己的图标和启动画面文件放在了phonegap/www/res/...下,
但是最后build之后的安卓项目和ios项目,图标和启动画面还是没有变成我们自己的。
后来看了Cordova文档,对config.xml做了一些修改,才配置成功。
注意:如果你是cordova/phonegap 5.x,请先加上cordova-plugin-splashscreen插件
1、去掉上面config.xml中的图标和启动画面配置(如果有),改为下面的
<platform name="android">
<icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
<icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
<icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
<icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
<icon density="xxhdpi" src="res/icon/android/icon-144-xxhdpi.png" />
<icon density="xxxhdpi" src="res/icon/android/icon-192-xxxhdpi.png" />
<splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png" />
<splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />
<splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png" />
<splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png" />
<splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
<splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
<splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
<splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
</platform>
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/icon/ios/icon-40.png" width="40" height="40" />
<icon src="res/icon/ios/icon-40@2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/icon.png" width="57" height="57" />
<icon src="res/icon/ios/icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icon/ios/icon-small.png" width="29" height="29" />
<icon src="res/icon/ios/icon-small@2x.png" width="58" height="58" />
<icon src="res/icon/ios/icon-small@3x.png" width="87" height="87" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icon/ios/icon-50.png" width="50" height="50" />
<icon src="res/icon/ios/icon-50@2x.png" 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"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>
安卓图标具体规格如下(存放目录:phonegap/res/icon/android/)
36*36 | icon-36-ldpi.png |
48*48 | icon-48-ldpi.png |
72*72 | icon-72-ldpi.png |
96*96 | icon-96-ldpi.png |
144*144 | icon-144-ldpi.png |
192*192 | icon-192-ldpi.png |
安卓启动画面具体规格如下(存放目录:phonegap/res/screen/android/)
960*720 | splash-land-xhdpi.png |
640*480 | splash-land-hdpi.png |
470*320 | splash-land-mdpi.png |
426*320 | splash-land-ldpi.png |
720*960 | splash-port-xhdpi.png |
480*640 | splash-port-hdpi.png |
320*470 | splash-port-mdpi.png |
320*426 | splash-port-ldpi.png |
iOS图标具体规格如下(存放目录:phonegap/res/icon/ios/)
29*29 | icon-small.png |
58*58 | icon-small@2x.png |
87*87 | icon-small@3x.png |
40*40 | icon-40.png |
80*80 | icon-40@2x.png |
50*50 | icon-50.png |
100*100 | icon-50@2x.png |
60*60 | icon-60.png |
120*120 | icon-60@2x.png |
180*180 | icon-60@3x.png |
72*72 | icon-72.png |
144*144 | icon-72@2x.png |
76*76 | icon-76.png |
152*152 | icon-76@2x.png |
iOS启动画面具体规格如下(存放目录:phonegap/res/screen/ios/)
320*480 | Default~iphone.png |
640*960 | Default@2x~iphone.png |
768*1024 | Default-Portrait~ipad.png |
1536*2048 | Default-Portrait@2x~ipad.png |
1024*768 | Default-Landscape~ipad.png |
2048*1536 | Default-Landscape@2x~ipad.png |
640*1136 | Default-568h@2x~iphone.png |
750*1334 | Default-667h.png |
1242*2208 | Default-736h.png |
2208*1242 | Default-Landscape-736h.png |
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有一个插件,叫cordova-plugin-splashscreen,地址在这里
这个插件的作用就是让你自己控制启动画面的显示与隐藏。
我们可以将"SplashScreenDelay"设置的大一点,比如10000ms,即10秒钟。等到我们的web界面出来以后,我们手动再把启动画面隐藏。你需要做以下工作:
1、在config.xml中修改"SplashScreenDelay"配置,改为10000,也就是10秒
<preference name="SplashScreenDelay" value="10000" />
2、在config.xml中修改"AutoHideSplashScreen"配置,改为false(也就是不自动隐藏)
<preference name="AutoHideSplashScreen" value="false" />
3、在你的app逻辑代码中,自己手动调用下面的代码隐藏启动画面:
if(navigator.splashscreen)
navigator.splashscreen.hide();
这句代码必须在deviceready事件中调用(如果是sencha touch,只要在app.js的launch方法中调用就行了)
config.xml 中还可以加上以下几个配置:
<preference name="ShowSplashScreenSpinner" value="false" />
是否在启动图中间显示一个菊花的动画(表示加载中)。默认值true,表示有菊花动画
<preference name="FadeSplashScreen" value="false" />
隐藏启动图的时候是否有渐变效果(渐渐消失)。默认true,表示有渐变效果
<preference name="SplashShowOnlyFirstTime" value="false" />
是否只在第一次显示启动图,退出后(但是app进程没有终止)再进不显示。默认true,表示之第一次进入app有启动图(只适用于Android)
对于安卓,还有个问题,安卓手机太多参差不齐,分辨率也五花八门,上面配置的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 density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
<icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
<icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
<icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
<icon density="xxhdpi" src="res/icon/android/icon-144-xxhdpi.png" />
<icon density="xxxhdpi" src="res/icon/android/icon-192-xxxhdpi.png" />
<splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.9.png" />
<splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.9.png" />
<splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.9.png" />
<splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.9.png" />
<splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.9.png" />
<splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.9.png" />
<splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.9.png" />
<splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.9.png" />
</platform>
也就是把文件改成9-patch图片,文件后缀改为.9.png
如果你是phonegap/cordova 3.X,请继续看第2步;如果你是phonegap/cordova 4+,请忽略第2步
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文件了。
参考文档:
1、Cordova官方文档《Customize Icons》《cordova-plugin-splashscreen》
2、Phonegap官方文档《Icons and Splash Screens》