web-dev-qa-db-fra.com

Génération d'iOS et d'icônes Android dans Cordova / PhoneGap

J'ai un projet Cordova fraîchement créé avec la configuration config.xml Suivante (utilisé les instructions de http://docs.phonegap.com/en/Edge/config_ref_images.md.html ). J'ai également ajouté 2 plateformes (iOS et Android).

Lorsque j'exécute cordova run ios Ou cordova run Android, Le projet a toujours les icônes Cordova par défaut. Ma compréhension de la documentation est que Corodva est censé créer automatiquement les icônes basées sur le icon.png Que j'ai fourni dans le config.xml.

config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.testapp" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.Apache.org/ns/1.0">
    <name>SingleApp</name>
  <preference name="DisallowOverscroll" value="true" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="false" />
  <preference name="target-device" value="handset" />

  <description>
      A sample Apache Cordova application that responds to the deviceready event.
  </description>
  <author email="[email protected]" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access Origin="*" />

  <icon src="icon.png" />

</widget>
androidioscordovaphonegap-pluginscordova-plugins
31
aporat

J'ai écrit un script qui génère automatiquement des icônes pour cordova en utilisant ImageMagick:

https://github.com/AlexDisler/cordova-icon

Pour l'utiliser, créez un fichier "icon.png" et placez-le dans le dossier racine de votre projet, puis lancez:

cordova-icon

et il générera toutes les icônes requises pour les plateformes de votre projet.

Vous pouvez également le configurer comme un crochet dans votre projet cordova afin que les icônes soient générées à chaque fois que vous générez le projet en fonction du icon.png que vous avez ajouté. (instructions dans le fichier lisez-moi).

69
Alex

Si vous utilisez cordova 3.5.0, ils ont mis à jour les documents. Dans les anciennes versions, j'ai toujours dû remplacer les icônes manuellement dans le projet, mais la dernière version de cordova fonctionne bien.

http://cordova.Apache.org/docs/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

Comme vous pouvez le voir ici https://github.com/phonegap/phonegap-cli/issues/58 cela a été un problème courant. Donc, si vous utilisez une ancienne version de cordova, je recommande de la mettre à jour avec la commande npm update -g cordova

Et après cela, vous devez mettre à jour votre config.xml pour quelque chose comme ceci:

    <icon src="www/res/drawable-xxxhdpi/icon.png" />
    <platform name="Android">
          <icon src="www/res/drawable-ldpi/icon.png" density="ldpi" />
          <icon src="www/res/drawable-mdpi/icon.png" density="mdpi" />
          <icon src="www/res/drawable-hdpi/icon.png" density="hdpi" />
          <icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" />
    </platform>

    <platform name="ios">
              <!-- iOS 7.0+ -->
              <!-- iPhone / iPod Touch  -->
              <icon src="www/res/ios/icon-60.png" width="60" height="60" />
              <icon src="www/res/ios/[email protected]" width="120" height="120" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-76.png" width="76" height="76" />
              <icon src="www/res/ios/[email protected]" width="152" height="152" />
              <!-- iOS 6.1 -->
              <!-- Spotlight Icon -->
              <icon src="www/res/ios/icon-40.png" width="40" height="40" />
              <icon src="www/res/ios/[email protected]" width="80" height="80" />
              <!-- iPhone / iPod Touch -->
              <icon src="www/res/ios/icon.png" width="57" height="57" />
              <icon src="www/res/ios/[email protected]" width="114" height="114" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-72.png" width="72" height="72" />
              <icon src="www/res/ios/[email protected]" width="144" height="144" />
              <!-- iPhone Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-small.png" width="29" height="29" />
              <icon src="www/res/ios/[email protected]" width="58" height="58" />
              <!-- iPad Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-50.png" width="50" height="50" />
              <icon src="www/res/ios/[email protected]" width="100" height="100" />
     </platform>

Comme vous pouvez le voir, les URI sont relatifs au chemin du projet cordova, pas au dossier www.

13
Javier Abrego

Le config.xml les paramètres des icônes ne fonctionnent qu'avec le service PhoneGap Build. Après avoir ajouté vos deux plates-formes, vous devez manuellement (ou vous pouvez créer un crochet, mais je ne l'ai pas fait moi-même) placer vos icônes dans les bons chemins.

Pour iOS:

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

Pour Android:

PROJECT_PATH/platforms/Android/res/drawable

Android a de nombreux res/drawable-* dossiers, utilisez tel qu'appliqué à votre application mais ajoutez au moins res/drawable

Exécutez ensuite cordova prepare ou build ou run

8
Dawson Loudon

Si vous souhaitez installer un logiciel supplémentaire pour la génération d'icônes, vous pouvez utiliser Ionic qui a une telle fonction.

Procédez comme suit:

  1. npm install ionic -g
  2. Placez les fichiers png, psd ou .ai pour les icônes et/ou les écrans de démarrage dans ${project_location}/resources
  3. ionic resources

Si vous souhaitez générer uniquement des icônes, il existe une clé pratique pour cela:

ionic resources --icon

Plus de détails ici

7
Aleksandr Kravets

N'avez-vous pas besoin de spécifier le dossier sur lequel figure l'icône? Cordova remplace l'icône par défaut lorsqu'elle n'est pas trouvée.

Avez-vous essayé de remplacer par quelque chose comme:

<icon src="res/icon.png" />
2
Davi S.

Essayez de suivre https://www.npmjs.org/package/cordova-gen-icon

Exemple:

$ cordova create hello com.example.hello
Creating a new cordova project with name "HelloCordova" and id "com.example.hello" at location "hello"
$ cd hello
$ cordova platform add ios
Creating ios project...
Preparing ios project
$ cordova-gen-icon 
Generate cordova icons with
project: .
icon   : ./www/img/logo.png
target : 

generate iOS icons
Success generate icon set
0
mrded

Une petite explication pour les gens qui disent <icon src="res/icon.png" /> Ne marche pas!

Vous devez mettre icon.png dans ces deux dossiers

nom_projet/res /

et

nom_projet/plateformes/nom_plateforme/res /

Pas:

cordova create hello com.example.hello HelloWorld
cd hello

Copiez votre icon.png dans project_name/res/ Ouvrir config.xml et met <icon src="res/icon.png" />

Après cette course

cordova platform add Android

Copiez maintenant votre icon.png dans ... hello/platforms/Android/res/

puis

cordova build Android

et enfin

adb install  platforms/Android/build/outputs/apk/Android-debug.apk

Après cela, vous pouvez voir sur votre appareil votre application avec votre icône

0
MTK