且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在phonegap项目中添加应用程序图标?

更新时间:2023-02-16 18:23:18

幸运的是,飞溅的图像,这让我在路上获得图标图像的正确位置。



文件放置位置
一旦你已经使用命令行界面cordova build ios,您应该在 platforms / ios / 文件夹中为您的iOS应用程序提供完整的文件结构。



该文件夹是具有您的应用程序名称的文件夹。其中包含 resources / 目录,您将在其中找到 icons / splashscreen /



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



操作



所有您需要做的是将图标文件保存在此文件夹中。这是:



YourPhonegapProject / Platforms / ios / YourAppName / Resources / icons



与splashscreen文件相同



注意



  • 将文件放在那里后,使用 cordova build ios 重建项目,并使用xCode的'清洁产品'菜单命令。


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


  • 顺便说一下,忽略怪异的路径和给config.xml中的图标c $ c>< icon gap:platform =iosheight =114src =res / icon / ios / icon-57-2x.pngwidth =114/> )。我只是把那些定义放在那里,图标显示得很好,即使我的114px图标被命名为 icon@2x.png ,而不是图标-57 -2x.png


  • 不要使用config.xml来防止Apple对图标的光泽效果。而是选中xCode中的框(点击左侧导航栏中的项目标题,在Target标题下选择您的应用,向下滚动到图标部分)。



  • 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.

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

    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.

    What am I doing wrong?

    How can I add custom app icons for iOS and Android with phonegap?

    thanks

    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.

    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.

    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.

    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.

    What to do

    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.

    Notes

    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.

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

    3. 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 icon@2x.png instead of icon-57-2x.png.

    4. 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).