Comment ajouter une icône d'application dans les projets phonegap ?

Question

J'ai créé un nouveau projet phonegap (v 3.0.0-0.14.0) avec le config.xml par défaut puis j'ai ajouté les plateformes iOS et Android.

La configuration contient tous les chemins vers toutes les icônes de la plate-forme.

J'ai écrasé les icônes par défaut pour iOS et Android afin que le chemin et le nom correspondent toujours à ces pngs.

Lors de l'exécution dans le simulateur, les icônes n'apparaissent pas. J'ai regardé dans xCode où il me dit que le dossier "Resources" pour les icônes contient toujours les icônes par défaut de phonegap. Même chose pour Android.

Qu'est-ce que je fais de mal ?

Comment puis-je ajouter des icônes d'application personnalisées pour iOS et Android avec phonegap ?

merci

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

Answer 1

Heureusement, la documentation contient quelques informations sur les images d'accueil, ce qui m'a permis de trouver le bon emplacement pour les images d'icône. Alors voilà.

Où les fichiers sont placés Une fois que vous avez construit votre projet à l'aide de l'interface de ligne de commande "cordova build ios", vous devriez disposer d'une structure de fichiers complète pour votre application iOS dans le dossier "Cordova build ios". platforms/ios/ dossier.

Dans ce dossier se trouve un dossier portant le nom de votre application. Qui contient à son tour un resources/ où vous trouverez le icons/ et splashscreen/ les dossiers.

Dans le dossier icônes, vous trouverez quatre fichiers d'icônes (pour 57px et 72 px, chacun en version normale et @2x). Ce sont les icônes de remplacement de Phonegap que vous avez vues jusqu'à présent.

Que faire ?

Il vous suffit de sauvegarder les fichiers d'icônes dans ce dossier. Donc c'est ça :

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

Idem pour les fichiers splashscreen.

Notes

1. Après avoir placé les fichiers là, reconstruisez le projet en utilisant cordova build ios ET utilisez la commande de menu "Nettoyer le produit" de xCode. Sans cela, vous verrez toujours les espaces réservés de Phonegap.

2. Il est plus sage de renommer vos fichiers à la manière iOS/Apple (c'est-à-dire icon-72@2x.png, etc.) plutôt que de modifier les noms dans info.plist ou config.xml. En tout cas, cela a fonctionné pour moi.

3. Et d'ailleurs, ignorez le chemin et le nom de fichier bizarres donnés pour les icônes dans le fichier config.xml (par ex. <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" /> ). J'ai laissé ces définitions en place, et les icônes se sont affichées sans problème, même si mon icône de 114px s'appelait icon@2x.png au lieu de icon-57-2x.png .

4. N'utilisez pas config.xml pour empêcher l'effet de brillance d'Apple sur l'icône. Cochez plutôt la case dans xCode (cliquez sur le titre du projet dans la colonne de navigation de gauche, sélectionnez votre application sous l'en-tête Target, puis faites défiler la liste jusqu'à la section icônes).

Answer 2

À partir de Cordova 3.5.0-0.2.6, la fonction <icon /> dans le fichier config.xml fonctionne avec les réserves suivantes :

1. Le site src est un chemin relatif au dossier racine de votre projet. L'issue tracker de ce problème explique la raison de ce changement.

2. Le site <icon src="..." /> sans résolution/dpi est documenté comme l'icône utilisée par toutes les plateformes comme icône par défaut. Cependant, dans les versions d'Android, l'icône par défaut est uniquement copiée dans le dossier Android drawable, sans que des résolutions spécifiques soient définies. Cela fait que votre icône personnalisée apparaît dans le dossier /res/drawable et l'icône par défaut de Cordova avec des résolutions spécifiques existe dans les autres dossiers à l'intérieur de l'apk final (c'est à dire /res/drawable-ldpi ). Vous devez ajouter un élément d'icône dans config.xml pour chaque résolution sur la plateforme Android.

Par exemple, si votre image d'icône se trouve dans le chemin www/res/img/icon.png relatif à votre projet Root, ces lignes en config.xml fait fonctionner l'icône de votre application dans 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" />

Avec cette configuration en place, vous pouvez avoir une icône d'image unique pour toutes les résolutions écrasant l'icône par défaut de Cordova, et sans hoooks personnalisés. Il suffit de construire avec cordova build android devrait faire l'affaire.

Answer 3

Si vous souhaitez un moyen simple d'ajouter automatiquement des icônes lors de la construction locale ( cordova emulate ios , cordova run android etc.), jetez un coup d'œil à cette liste :

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

J'espère que cela commencera à fonctionner à l'avenir. Voici le rapport de bogue correspondant sur le projet Cordova :

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

Answer 4

Puisque la plupart des réponses ici sont destinées à iOS, voici une solution pour changer l'icône dans Android.

Pour Android :

Effectuer des changements dans <emplacement du projet> \platforms\android\ant -build \res et non <emplacement du projet> \platforms\android\res

Pour certaines personnes, le fait d'apporter des modifications à ce dernier emplacement peut avoir fonctionné, mais ayant remarqué que Phonegap copiait depuis le site de \android\res en \android\ant -build \res J'ai décidé d'y jeter un coup d'oeil et j'ai trouvé un ensemble séparé de dossiers dessinables contenant l'icône par défaut de phonegap.

Les changer a finalement fonctionné.

Puisque je construis et exécute localement et que je n'utilise pas Adobe PhoneGap Build, la modification des icônes dans <emplacement du projet> \www\res\icon\android n'a pas fonctionné non plus.

Answer 5

Vous devez créer un fichier config.xml dans lequel vous mettrez le fichier icône

<?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>

Regarde ça : https://build.phonegap.com/docs/config-xml

il existe des icônes spécifiques à iOS