如何在 phonegap 项目中添加应用程序图标? [英] How to add app icon within phonegap projects?

问题描述

我使用默认的 config.xml 创建了一个新的 phonegap (v 3.0.0-0.14.0) 项目，然后添加了 iOS 和 Android 平台.

I created a new phonegap (v 3.0.0-0.14.0) project with default config.xml and then added iOS and Android platforms.

配置包含所有平台图标的所有路径.

The config contains all the paths to all platform icons.

我已经覆盖了 iOS 和 Android 的默认图标，以便路径和名称仍然与那些 png 匹配.

I have overwritten the default icons for iOS and Android so that path and name still matches those pngs.

在模拟器中运行时，图标不显示.我在 xCode 中查找过它，它告诉我图标的资源"文件夹仍然包含 phonegap 默认图标.与安卓相同.

When running in simulator the icons don't show up. I have looked it up in xCode where it tells me that the "Resources" folder for the icons still contains the phonegap default icons. Same with Android.

我做错了什么?

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

谢谢

我的 config.xml

my 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" />

推荐答案

幸运的是，文档中有一些关于启动图像的内容，这也让我走上了为图标图像找到正确位置的道路.就这样吧.

Fortunately there is a little bit in the docs about the splash images, which put me on the road to getting the right location for the icon images as well. So here it goes.

放置文件的位置使用命令行界面cordova build ios"构建项目后，您应该在 platforms/ios/ 文件夹中拥有完整的 iOS 应用文件结构.

Where the files are placed Once you have built your project using command-line interface "cordova build ios" you should have a complete file structure for your iOS app in the platforms/ios/ folder.

该文件夹内有一个包含您的应用程序名称的文件夹.其中包含一个 resources/ 目录，您可以在其中找到 icons/ 和 splashscreen/ 文件夹.

Inside that folder is a folder with the name of your app. Which in turn contains a resources/ directory where you will find the icons/ and splashscreen/ folders.

在图标文件夹中，您将找到四个图标文件(分别为 57 像素和 72 像素，分别为常规和 @2x 版本).这些是您目前看到的 Phonegap 占位符图标.

In the icons folder you will find four icon files (for 57px and 72 px, each in regular and @2x version). These are the Phonegap placeholder icons you've been seeing so far.

做什么

您所要做的就是将图标文件保存在此文件夹中.就是这样:

All you have to do is save the icon files in this folder. So that's:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

对于闪屏文件也是如此.

Same for splashscreen files.

注意事项

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

1. After placing the files there, rebuild the project using cordova build ios AND use xCode's 'Clean product' menu command. Without this, you'll still be seeing the Phonegap placeholders.

最明智的做法是以 iOS/Apple 方式重命名您的文件(即 [e-mail] 等)，而不是编辑 info.plist 或 config.xml 中的名称.至少这对我有用.

It's wisest to rename your files the iOS/Apple way (i.e. [e-mail] etc) instead of editing the names in the info.plist or config.xml. At least that worked for me.

顺便说一下，忽略 config.xml 中为图标提供的奇怪路径和奇怪的文件名(即 <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114"/>).我只是把这些定义留在那里，即使我的 114px 图标被命名为 [e-mail] 而不是 icon-57-2x.png ，图标也显示得很好.

And by the way, ignore the weird path and the weird filename given for the icons in config.xml (i.e. <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />). I just left those definitions there, and the icons showed up just fine even though my 114px icon was named [e-mail] instead of icon-57-2x.png.

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

Don't use config.xml to prevent Apple's gloss effect on the icon. Instead, tick the box in xCode (click the project title in the left navigation column, select your app under the Target header, and scroll down to the icons section).

这篇关于如何在 phonegap 项目中添加应用程序图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！