我使用默认的config.xml创建了一个新的phonegap(v 3.0.0-0.14.0)项目,然后添加了iOS和Android平台。
配置包含所有平台图标的所有路径。
我已覆盖iOS和Android的默认图标,因此路径和名称仍与这些png匹配。
在模拟器中运行时,图标不会显示。我在xCode中查找了它,它告诉我图标的“Resources”文件夹仍然包含phonegap默认图标。与Android相同。
我做错了什么?
如何使用phonegap为iOS和Android添加自定义应用图标?
感谢
我的config.xml
<icon src="icon.png" />
<icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.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="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="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" />
答案 0 :(得分:67)
幸运的是,关于启动图像的文档中有一点点,这让我在获取图标图像的正确位置的道路上。所以就这样了。
放置文件的位置
使用命令行界面“cordova build ios”构建项目后,您应该在platforms/ios/
文件夹中拥有适用于iOS应用程序的完整文件结构。
在该文件夹中是一个包含应用名称的文件夹。其中包含resources/
目录,您可在其中找到icons/
和splashscreen/
个文件夹。
在icons文件夹中,您会找到四个图标文件(57px和72像素,每个都是常规版本和@ 2x版本)。这些是您目前看到的Phonegap占位符图标。
怎么做
您所要做的就是将图标文件保存在此文件夹中。那就是:
YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons
与splashscreen文件相同。
备注强>
将文件放在那里后,使用cordova build ios
重建项目并使用xCode的“清洁产品”菜单命令。如果没有这个,你仍然会看到Phonegap占位符。
最明智的做法是以iOS / Apple方式重命名文件(例如icon-72@2x.png等),而不是编辑info.plist或config.xml中的名称。至少那对我有用。
顺便说一下,忽略为config.xml中的图标指定的奇怪路径和奇怪的文件名(即<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
)。我刚刚将这些定义留在那里,即使我的114px图标被命名为icon@2x.png
而不是icon-57-2x.png
,图标也显示正常。
请勿使用config.xml来防止Apple对图标产生光泽效果。相反,勾选xCode中的框(单击左侧导航栏中的项目标题,在Target标题下选择您的应用,然后向下滚动到图标部分)。
答案 1 :(得分:45)
我将我的答案作为一般常见问题解答,可以帮助您解决我在处理图标/启动画面时遇到的许多问题。你可能会发现像我这样的文档并不总是很清楚也不是最新的。这可能会在可用时转到StackOverflow documentation。
如何使用phonegap为iOS和Android添加自定义应用图标?
在您的Cordova版本中,icon
标记无用。它甚至没有记录在Cordova 3.0.0中。您应该使用适合您正在使用的cli而不是最新版本的文档版本!
根据我在不同版本的文档中看到的内容,图标标记在版本3.5.0之前根本不适用于Android。在3.4.0中,他们仍建议手动复制文件
在较新版本中:您的config.xml
看起来更适合较新的Cordova版本。但是,您可能还想知道很多事情。如果你决定升级这里有一些有用的东西需要修改:
gap:
命名空间<preference name="SplashScreen" value="screen" />
以下是您在尝试处理图标和启动画面时可能会问自己的问题的更多细节:
不,以前版本的Cordova中没有图标/启动画面功能,因此您必须使用最新版本。在以前的版本中,只有Phonegap Build确实处理了图标/启动画面,因此在本地构建和处理图标只能使用钩子。我不知道使用此功能的最低版本,但使用5.1.1,它在Cordova / Phonegap cli中都能正常工作。有了Cordova 3.5,它对我没用。
修改:对于Android,您必须至少使用3.5.0
cli使用CP命令。如果您提供的图标路径无效,则会显示cp
错误:
sebastien@sebastien-xps:cordova (dev *+$%)$ cordova run android --device
cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png
修改:您已使用cordova build <platform> --verbose
获取cp命令用法的日志,以查看您的图标复制位置
图标应根据配置进入文件夹。
对我而言,它包含在platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
然后你可以找到APK,并将其作为zip存档打开以检查图标是否存在。它们必须位于res/drawable*
文件夹中,因为它是Android的special folder。
在许多示例中,您会发现图标/启动画面在res
文件夹中声明。此res
是输出APK中的一个特殊Android文件夹,但这并不意味着您必须在项目中使用res
文件夹。
您可以将图标放在任何位置,但您使用的路径必须相对于项目的根,而不是www
所以请注意!这是记录在案的,但不清楚,因为所有示例都使用res
并且您不知道此文件夹的位置:(
我的意思是,如果您将图标放在www/icon.png
中,则绝对必须在您的路径中包含www
。
编辑Mars 2016 :升级版本后,现在看来图标与www
文件夹相关,但文档尚未更改(issue)
<icon src="icon.png"/>
是否有效?不,不是!。
在Android上,它似乎以前曾经工作过(当时还不支持密度属性?)但现在不行了。见Cordova issue
在iOS上,似乎使用此全局声明may override更具体的声明,因此请注意并使用--verbose
进行构建,以确保一切按预期工作。
是的,你可以。您甚至可以对图标和启动画面使用相同的文件(只是为了测试!)。我使用过&#34; big&#34;图标文件65kb没有任何问题。
<icon src="icon.png" platform="android" density="ldpi" />
与
相同<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
根据我的经验,新版本的Phonegap或Cordova都能够在不使用任何gap:
xml命名空间的情况下理解图标声明。
但是,我仍在等待有效答案:cordova/phonegap plugin add VS config.xml
据我所知,gap:
命名空间的某些功能可能早于PhonegapBuild,然后在Phonegap中,然后移植到Cordova(?)
<preference name="SplashScreen" value="screen" />
?至少对Android来说是的。我打开an issue进行了额外的解释。
cordova-plugin-splashscreen
吗?是的,如果您希望启动画面工作,这绝对是必需的。 文档不清楚(issue),让我们认为插件只需要提供启动画面的JavaScript API。
有一些工具可以帮助您实现这一目标。 对我来说最好的是http://makeappicon.com/但它需要提供一个电子邮件地址。
其他可能的解决方案是:
是。这是我的真实config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="co.x" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
<name>x</name>
<description>
x
</description>
<author email="info@x.co" href="https://x.co">
x
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="webviewbounce" value="false" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#0177C6" />
<preference name="detect-data-types" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-targetSdkVersion" value="22" />
<preference name="phonegap-version" value="cli-5.1.1" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashScreen" value="screen" />
<plugin name="cordova-plugin-device" spec="1.0.1" />
<plugin name="cordova-plugin-console" spec="1.0.1" />
<plugin name="cordova-plugin-whitelist" spec="1.1.0" />
<plugin name="cordova-plugin-crosswalk-webview" spec="1.2.0" />
<plugin name="cordova-plugin-statusbar" spec="1.0.1" />
<plugin name="cordova-plugin-screen-orientation" spec="1.3.6" />
<plugin name="cordova-plugin-splashscreen" spec="2.1.0" />
<access origin="http://*" />
<access origin="https://*" />
<access launch-external="yes" origin="tel:*" />
<access launch-external="yes" origin="geo:*" />
<access launch-external="yes" origin="mailto:*" />
<access launch-external="yes" origin="sms:*" />
<access launch-external="yes" origin="market:*" />
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
<icon src="www/stample_icon.png" density="mdpi" />
<icon src="www/stample_icon.png" density="hdpi" />
<icon src="www/stample_icon.png" density="xhdpi" />
<icon src="www/stample_icon.png" density="xxhdpi" />
<icon src="www/stample_icon.png" density="xxxhdpi" />
<splash src="www/stample_splash.png" density="land-hdpi"/>
<splash src="www/stample_splash.png" density="land-ldpi"/>
<splash src="www/stample_splash.png" density="land-mdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="port-hdpi"/>
<splash src="www/stample_splash.png" density="port-ldpi"/>
<splash src="www/stample_splash.png" density="port-mdpi"/>
<splash src="www/stample_splash.png" density="port-xhdpi"/>
<splash src="www/stample_splash.png" density="port-xxhdpi"/>
<splash src="www/stample_splash.png" density="port-xxxhdpi"/>
</platform>
<platform name="ios">
<icon src="www/stample_icon.png" width="180" height="180" />
<icon src="www/stample_icon.png" width="60" height="60" />
<icon src="www/stample_icon.png" width="120" height="120" />
<icon src="www/stample_icon.png" width="76" height="76" />
<icon src="www/stample_icon.png" width="152" height="152" />
<icon src="www/stample_icon.png" width="40" height="40" />
<icon src="www/stample_icon.png" width="80" height="80" />
<icon src="www/stample_icon.png" width="57" height="57" />
<icon src="www/stample_icon.png" width="114" height="114" />
<icon src="www/stample_icon.png" width="72" height="72" />
<icon src="www/stample_icon.png" width="144" height="144" />
<icon src="www/stample_icon.png" width="29" height="29" />
<icon src="www/stample_icon.png" width="58" height="58" />
<icon src="www/stample_icon.png" width="50" height="50" />
<icon src="www/stample_icon.png" width="100" height="100" />
<splash src="www/stample_splash.png" width="320" height="480"/>
<splash src="www/stample_splash.png" width="640" height="960"/>
<splash src="www/stample_splash.png" width="768" height="1024"/>
<splash src="www/stample_splash.png" width="1536" height="2048"/>
<splash src="www/stample_splash.png" width="1024" height="768"/>
<splash src="www/stample_splash.png" width="2048" height="1536"/>
<splash src="www/stample_splash.png" width="640" height="1136"/>
<splash src="www/stample_splash.png" width="750" height="1334"/>
<splash src="www/stample_splash.png" width="1242" height="2208"/>
<splash src="www/stample_splash.png" width="2208" height="1242"/>
</platform>
<allow-intent href="*" />
<engine name="browser" spec="^3.6.0" />
<engine name="android" spec="^4.0.2" />
</widget>
一个很好的例子来源是入门套件。与phonegap-start或Ionic starter
相同答案 2 :(得分:32)
从Cordova 3.5.0-0.2.6开始,config.xml中的<icon />
元素可以使用以下警告:
src
属性是相对于项目根文件夹的路径。有关此问题的问题跟踪器会导致更改原因。
没有分辨率/ dpi的<icon src="..." />
元素被记录为所有平台用作默认图标的图标。但是,在android版本中,默认图标仅复制到android drawable文件夹,没有设置特定的分辨率。这使您自定义图标显示在/res/drawable
文件夹中,并且具有特定分辨率的cordova默认图标存在于最终apk内的其他文件夹中(即/res/drawable-ldpi
)。您必须在config.xml
为android平台上的每个分辨率添加一个图标元素。
例如,如果您的图标图片位于相对于根项目的www/res/img/icon.png
路径中,则config.xml
中的这一行会使您的Android应用图标生效:
<!-- Default application icon -->
<icon src="www/res/img/icon.png" />
<!--
Default icon should work, but cordova don't overwrite
the default on all densities
-->
<icon src="www/res/img/icon.png" platform="android" density="ldpi" />
<icon src="www/res/img/icon.png" platform="android" density="mdpi" />
<icon src="www/res/img/icon.png" platform="android" density="hdpi" />
<icon src="www/res/img/icon.png" platform="android" density="xhdpi" />
使用该配置后,您可以使用单个图像图标覆盖所有分辨率,覆盖默认的cordova图标,而无需自定义连接。只需使用cordova build android
进行构建即可。
答案 3 :(得分:8)
如果您想要一种易于使用的方式在本地构建时自动添加图标(cordova emulate ios
,cordova run android
等),请查看以下内容:
https://gist.github.com/LinusU/7515016
希望将来某个时候开始使用,这是关于Cordova项目的相关错误报告:
答案 4 :(得分:4)
您必须创建一个config.xml文件,您将在其中放置图标文件
<?xml version="1.0" encoding="ISO-8859-1" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "example"
version = "1.0.0">
<icon src="icon.png" />
</widget>
检查一下: https://build.phonegap.com/docs/config-xml
有iOS特定图标
答案 5 :(得分:4)
由于此处的大多数答案都是针对iOS的,因此这是一个在Android中更改图标的解决方案。
对于android:
在&lt;项目位置&gt; \ platforms \ android \ ant-build \ res 中进行更改,而不是&lt;项目位置&gt; \ platforms \ android \ res
对于有些人在后一个位置进行更改可能有效,但是注意到Phonegap从\ android \ res复制到\ android \ ant-build \ res,我决定在那里办理登机手续并找到一套单独的可绘制文件夹包含默认的phonegap图标。
改变那些最终有效。
由于我在本地构建和运行而不使用Adobe PhoneGap Build,因此更改&lt;项目位置&gt; \ www \ res \ icon \ android 中的图标无效
答案 6 :(得分:3)
我正在运行phonegap 3.1.0-0.15.0,因为iOS7将分辨率更改为120x120px我只是将具有这些尺寸的文件添加到项目中,然后更改了info.plist文件。
可以在此处找到更多信息:http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13
要修复iOS中的启动画面,我只是粘贴在具有相同尺寸和相同文件名的新文件中,覆盖旧文件。只需记住转到Xcode菜单栏中的产品&gt;清理(快捷键Shift + Command + K),它应该可以正常工作! :)
答案 7 :(得分:3)
在cordova 3.3.1-0.1.2中,预期的行为无效。
in
http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
它清楚地表明你想把它们放在一个名为res的文件夹中的主www文件夹中,并按照特定的命名约定而不是原始的可自定义的config.xml指定方式(在其中指向一个文件你的选择,这是/更好)。 它应该从那里开始为每个平台并将它们放入平台/?android?/ res / drawable-?dpi / icon.png,但此时它没有这样正确的行为... bug。
所以我想我们必须手动将它们放在每个平台上。 它当然需要删除它再次复制到www文件夹。 对我来说,我不得不完全替换主www文件夹中的内容,因为它根本无法使用甚至hello world而不用黑客重定向index.html来找到一些奇怪的随机文件夹。 将res文件夹放在www旁边是最有意义的,但是对于我来说这似乎是由于这一系列级联和混乱的设计选择/缺陷引起的。
答案 8 :(得分:2)
在某些情况下,cordova的内部skripts不会将图标放在正确的文件夹中,因此您可以看到f *** cordova机器人而不是您自己的图标。
使用钩子脚本。;)
three-hooks-your-cordovaphonegap-project-needs
在hook文件夹中创建一个文件夹“after_platform_add”,然后从devgirl中输入/更改最后一个skript。
不要忘记在linux "chmod 777 <script>"
答案 9 :(得分:1)
我所做的只是在config.xml中添加了以下行
<icon src="www/img/appIcon.png" />
它工作得很好
答案 10 :(得分:1)
只需将此代码添加到config.xml文件
即可<icon src="path to your icon image">
例如:
<icon src="icon.png">
记住你需要使用.png扩展名
答案 11 :(得分:0)
我也在试图了解这一切是如何联系的。
这是我到目前为止在XCode中发现的内容,但如果我的假设是正确的,我希望得到纠正或肯定。我没有找到开箱即用的构建来自cordova的xcode正确应用图标。和你一样,我已经更新了config.xml中列出的所有图标但没有骰子。
因此...
首先,我通常使用我的“www”文件夹中的那个来更新项目根目录中的config.xml(这是因为www / config.xml具有任何优先级或者甚至应用它的不确定性)
其次,我更新了项目的“构建阶段”。展开“复制包资源”,您已经注意到“资源/图标”,“资源/启动”中的所有图像。您可以:
在我解决这个问题的过程中,您可以从“摘要”标签中最低限度地更新图片。
将图像从res文件夹拖放到“摘要”标签中的相应图像。 (res / icon / ios - &gt;应用程序图标和res / screen / ios - &gt;启动图像)。我这样做只适用于iPhone,因为我的应用只是iPhone。如果您不希望出现光泽,请选中“预呈现”。
然后在查看项目目标时更新项目的plist文件中引用的“icon.png”:PROJECT_NAME-Info.plist或“信息”选项卡。将其重命名为“icon-57.png”(现在位于项目根目录中,当您执行拖放操作时,它会自动添加到根目录中。
构建,你应该有一个更新的应用程序图标。
答案 12 :(得分:0)
只是注意到我刚刚将config.xml改为看起来像Sebastian的例子。
在调试所有这些方面也有帮助的东西,特别是如果你不进行本地构建......就是下载从PhoneGap云构建的XAP / IPA / APK文件,并为每个文件创建文件夹。使用.ZIP扩展名重命名每个文件,并将每个文件的内容提取到各自的文件夹中。所以基本上,您现在可以看到包装中将要发送到手机的内容。
这样做,我可以看到,对于Microsoft Phone平台,它在很大程度上忽略了我替换图标或闪屏的所有尝试。如果您随后替换ApplicationIcon.png和SplashScreenImage.jpg,然后重新压缩文件夹并将其重新命名为.XAP文件,然后将其部署到您的手机,它将完美地工作。不知何故,有一种方法可以让你的PhoneGap构建将你的icon.png和icon.jpg变成这两个文件。也许马苏德的建议是可行的,并使用钩子脚本。
对.IPA文件(iOS)执行相同操作会导致在www之上的父级别上有几个文件,例如icon-something.png。它们似乎都是空白的。
对.APK文件(Android)执行相同操作会生成res / drawable-something文件夹集,并且每个文件夹中都显示my icon.png。这是我目前可以宣称的最接近的成功。
答案 13 :(得分:0)
对我来说,自定义图标不起作用,然后我更新了以下位置的图标,它起作用了。
{projectlocation}\platforms\android\app\src\main\res