如何在phonegap项目中添加app图标?

时间:2013-07-23 20:32:05

标签: cordova

我使用默认的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" />

14 个答案:

答案 0 :(得分:67)

幸运的是,关于启动图像的文档中有一点点,这让我在获取图标图像的正确位置的道路上。所以就这样了。

放置文件的位置 使用命令行界面“cordova build ios”构建项目后,您应该在platforms/ios/文件夹中拥有适用于iOS应用程序的完整文件结构。

在该文件夹中是一个包含应用名称的文件夹。其中包含resources/目录,您可在其中找到icons/splashscreen/个文件夹。

在icons文件夹中,您会找到四个图标文件(57px和72像素,每个都是常规版本和@ 2x版本)。这些是您目前看到的Phonegap占位符图标。

怎么做

您所要做的就是将图标文件保存在此文件夹中。那就是:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

与splashscreen文件相同。

备注

  1. 将文件放在那里后,使用cordova build ios重建项目并使用xCode的“清洁产品”菜单命令。如果没有这个,你仍然会看到Phonegap占位符。

  2. 最明智的做法是以iOS / Apple方式重命名文件(例如icon-72@2x.png等),而不是编辑info.plist或config.xml中的名称。至少那对我有用。

  3. 顺便说一下,忽略为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,图标也显示正常。

  4. 请勿使用config.xml来防止Apple对图标产生光泽效果。相反,勾选xCode中的框(单击左侧导航栏中的项目标题,在Target标题下选择您的应用,然后向下滚动到图标部分)。

答案 1 :(得分:45)

常见问题:ICON / SPLASH SCREEN(Cordova 5.x / 2015)

我将我的答案作为一般常见问题解答,可以帮助您解决我在处理图标/启动画面时遇到的许多问题。你可能会发现像我这样的文档并不总是很清楚也不是最新的。这可能会在可用时转到StackOverflow documentation

第一:回答问题

  

如何使用phonegap为iOS和Android添加自定义应用图标?

在您的Cordova版本中,icon标记无用。它甚至没有记录在Cordova 3.0.0中。您应该使用适合您正在使用的cli而不是最新版本的文档版本!

根据我在不同版本的文档中看到的内容,图标标记在版本3.5.0之前根本不适用于Android。在3.4.0中,他们仍建议手动复制文件

在较新版本中:您的config.xml看起来更适合较新的Cordova版本。但是,您可能还想知道很多事情。如果你决定升级这里有一些有用的东西需要修改:

  • 您不需要gap:命名空间
  • Android版需要<preference name="SplashScreen" value="screen" />

以下是您在尝试处理图标和启动画面时可能会问自己的问题的更多细节:

我可以使用旧版本的Cordova / Phonegap

不,以前版本的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,我应该使用gap:名称空间吗?

根据我的经验,新版本的Phonegap或Cordova都能够在不使用任何gap: xml命名空间的情况下理解图标声明。

但是,我仍在等待有效答案:cordova/phonegap plugin add VS config.xml

据我所知,gap:命名空间的某些功能可能早于PhonegapBuild,然后在Phonegap中,然后移植到Cordova(?)

是否需要<preference name="SplashScreen" value="screen" />

至少对Android来说是的。我打开an issue进行了额外的解释。

图标声明顺序是否重要?

是的,确实如此!它可能对Android没有任何影响,但根据我的测试它在iOS上。这是意外且未记录的行为,因此我打开了another 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-startIonic starter

相同

答案 2 :(得分:32)

从Cordova 3.5.0-0.2.6开始,config.xml中的<icon />元素可以使用以下警告:

  1. src属性是相对于项目根文件夹的路径。有关此问题的问题跟踪器会导致更改原因。

  2. 没有分辨率/ dpi的<icon src="..." />元素被记录为所有平台用作默认图标的图标。但是,在android版本中,默认图标仅复制到android drawable文件夹,没有设置特定的分辨率。这使您自定义图标显示在/res/drawable文件夹中,并且具有特定分辨率的cordova默认图标存在于最终apk内的其他文件夹中(即/res/drawable-ldpi)。您必须在config.xml为android平台上的每个分辨率添加一个图标元素。

  3. 例如,如果您的图标图片位于相对于根项目的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 ioscordova run android等),请查看以下内容:

https://gist.github.com/LinusU/7515016

希望将来某个时候开始使用,这是关于Cordova项目的相关错误报告:

https://issues.apache.org/jira/browse/CB-2606

答案 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文件。

  1. 通过右键单击Xco​​de中的项目文件并选择“将文件添加到”[您的项目名称]“...
  2. ,将120x120文件添加到项目中
  3. 转到Xcode中的info.plist文件“资源/ [您的项目名称] -info.plist”
  4. “图标文件(iOS 5)/主要图标/图标文件”下,将“第2项”更改为您的文件所具有的文件名(我称之为“icon” -120.png,我放在项目文件夹旁边的所有其他图标,虽然这应该没关系)
  5. 可以在此处找到更多信息: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