[Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置

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/[email protected]" width="180" height="180" />
  <icon src="res/icon/ios/icon-60.png" width="60" height="60" />
  <icon src="res/icon/ios/[email protected]" width="120" height="120" />
  <icon src="res/icon/ios/icon-76.png" width="76" height="76" />
  <icon src="res/icon/ios/[email protected]" width="152" height="152" />
  <icon src="res/icon/ios/icon-40.png" width="40" height="40" />
  <icon src="res/icon/ios/[email protected]" width="80" height="80" />
  <icon src="res/icon/ios/icon.png" width="57" height="57" />
  <icon src="res/icon/ios/[email protected]" width="114" height="114" />
  <icon src="res/icon/ios/icon-72.png" width="72" height="72" />
  <icon src="res/icon/ios/[email protected]" width="144" height="144" />
  <icon src="res/icon/ios/icon-small.png" width="29" height="29" />
  <icon src="res/icon/ios/[email protected]" width="58" height="58" />
  <icon src="res/icon/ios/icon-50.png" width="50" height="50" />
  <icon src="res/icon/ios/[email protected]" width="100" height="100" />
  <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
  <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="960"/>
  <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
  <splash src="res/screen/ios/[email protected]~ipad.png" width="1536" height="2048"/>
  <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
  <splash src="res/screen/ios/[email protected]~ipad.png" width="2048" height="1536"/>
  <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="1136"/>
</platform>

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

安卓图标具体规格如下(存放目录:phonegap/res/icon/android/)

icon-36-ldpi.png 36×36
icon-48-mdpi.png 48×48
icon-72-hdpi.png 72×72
icon-96-xhdpi.png 96×96

安卓启动画面具体规格如下(存放目录:phonegap/res/screen/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

iOS图标具体规格如下(存放目录:phonegap/res/icon/ios/)

[email protected] 180×180
icon-60.png 60×60
[email protected] 120×120
icon-76.png 76×76
[email protected] 152×152
icon-40.png 40×40
[email protected] 80×80
icon.png 57×57
[email protected] 114×114
icon-72.png 72×72
[email protected] 144×144
icon-small.png 29×29
[email protected] 58×58
icon-50.png 50×50
[email protected] 100×100

iOS启动画面具体规格如下(存放目录:phonegap/res/screen/ios/)

Default~iphone.png 320×480
[email protected]~iphone.png 640×960
Default-Portrait~ipad.png 768×1024
[email protected]~ipad.png 1536×2048
Default-Landscape~ipad.png 1024×768
[email protected]~ipad.png 2048×1536
[email protected]~iphone.png 640×1136
Default-667h.png 750×1334(好像cordova4.0才支持)
Default-736h.png ?1242×2208 (好像cordova4.0才支持)
Default-Landscape-736h.png 2208×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文件了。

参考文档:

1、Cordova官方文档《Icons and Splash Screens

2、Phonegap官方文档《Icons and Splash Screens

---------------------------------------------------------------------------------------------------------------------------------------------------------

欢迎加入Sencha Touch + Phonegap 群:194182999

共同学习交流(博主QQ:479858761

求赞助:

1、百度情感转账,只要支付1分钱,你得10元,我得5元

2、百度透明小金库,支付我1分钱,就可以赞助我

3、百度钱包支付1分钱,获得体彩顶呱刮兑换码。把兑换码发给我可以赞助我

时间: 2024-10-22 14:56:11

[Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置的相关文章

[Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程序名称(图标下面的文字)也是"MyApp" 如果要换成其他名字,修改 MyApp\config.xml 文件,把顶部"<name>MyApp</name>"中间MyApp的改成需要的名字. 注意如果xml内容有中文,要改成utf-8编码,注意是文

[Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程序名称(图标以下的文字)也是"MyApp" 假设要换成其它名字,改动 MyApp\config.xml 文件,把顶部"<name>MyApp</name>"中间MyApp的改成须要的名字. 注意假设xml内容有中文,要改成utf-8编码,注意是文

[Phonegap+Sencha Touch] 移动开发30、phonegap的camera插件的几个问题

<span style="font-size:14px;">navigator.camera.getPicture(function(uri){ //得到拍摄的图片路径 }, function(err){}, { quality: 70, allowEdit: true, //拍摄完进行裁剪编辑 targetWidth: 250, targetHeight: 250, destinationType: navigator.camera.DestinationType.FIL

[Phonegap+Sencha Touch] 移动开发29 安卓navigator.camera.getPicture得到图片的真实路径

phonegap的拍照插件选择图库中的图片,代码如下: navigator.camera.getPicture(function(uri){ console.log(uri);//这里得到图片的uri }, function(err){ console.log(err); }, { quality: 70, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.Pictur

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

[Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview点击穿透的缓解办法

安卓的webview和自带浏览器下有个奇怪的现象. 现象: 1.如果输入框input或者textarea的正上方(z轴方向,即上层)有个div,当点击这个div使得div隐藏了之后,input会得到焦点,导致软键盘弹出. 2.浏览视图点击某个地方切换到编辑视图,如果浏览视图点击的位置 在 编辑视图相应位置有个输入框,那么切换过去之后,编辑页的输入框会自动得到焦点. 这个体验很不舒服. 讨论: 这个不是点击事件的事件冒泡导致的(因为e.stopPropagation()和return false是

[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容

原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cordova-hot-code-push 以下是我对GitHub项目readme的翻译 ---------------------------------------------- Cordova Hot Code Push Plugin 此插件提供了能够使cordova app自己主动更新web内容的功

[Phonegap+Sencha Touch] 移动开发16 安卓webview中,input输入框不触发backspace回退键事件的解决办法

可以用安卓手机浏览器打开 http://javascript.info/tutorial/keyboard-events#test-stand-test-stand 测试看看. Android 4.2自带浏览器和webview的测试结果(其他版本没试过,估计4.X都是这样): 当input有内容的时候,点击软键盘回退键(keyCode=8),是有keyEvents事件(keyup keydown)触发的:当input是空的时候,再点击,就不触发keyEvents了. Chrome浏览器测试结果: