Génération d'icônes iOS et Android dans Cordova / PhoneGap
J'ai un projet Cordova fraîchement créé avec la configuration suivante config.xml (utilisé les instructions de http://docs.phonegap.com/en/edge/config_ref_images.md.html ). J'ai aussi ajouté 2 plateformes (iOS et Android).
quand 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 les icônes automatiquement basé dans le icon.png 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="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<icon src="icon.png" />
</widget>
7 réponses
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 une icône".png" fichier et le placer dans le dossier racine de votre projet, puis exécuter:
cordova-icon
et il va générer toutes les icônes nécessaires pour les plates-formes de votre projet.
vous pouvez également le configurer comme un crochet dans votre projet cordova les icônes sera généré à chaque fois que vous générez le projet, basé sur l'icône.png que vous avez ajouté. (instructions dans le readme).
si vous utilisez cordova 3.5.0 ils ont mis à jour les docs. Dans les anciennes versions, j'ai toujours eu à remplacer les icônes manuellement dans le projet, mais la dernière version de cordoue 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 problème. Donc, si vous utilisez une version plus ancienne de cordova je recommande de la mettre à jour avec la commande npm update -g cordova
et après cela, vous devriez mettre à jour votre configuration.xml à 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/icon-60@2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="www/res/ios/icon-76.png" width="76" height="76" />
<icon src="www/res/ios/icon-76@2x.png" 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/icon-40@2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="www/res/ios/icon.png" width="57" height="57" />
<icon src="www/res/ios/icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="www/res/ios/icon-72.png" width="72" height="72" />
<icon src="www/res/ios/icon-72@2x.png" 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/icon-small@2x.png" 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/icon-50@2x.png" width="100" height="100" />
</platform>
comme vous pouvez le voir, les URI sont relatifs au chemin du projet cordova, pas au dossier www.
les paramètres config.xml pour les icônes ne fonctionnent qu'avec le service de construction PhoneGap. Après l'ajout de deux plates-formes, vous devez manuellement (ou vous pouvez créer un crochet, mais je n'ai pas fait moi-même) placer vos icônes dans les 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, l'utilisation comme s'applique à votre application, mais au minimum ajouter à res/drawable
puis cordova prepare ou build ou run 151990920"
si vous êtes prêt à installer un logiciel supplémentaire pour la génération d'icône, vous pouvez utiliser Ionic qui a une telle fonction.
Faire ce qui suit:
-
npm install ionic -g - Put png, psd or .les fichiers ai pour les icônes et/ou splashscreens à
${project_location}/resources -
ionic resources
si vous voulez générer des icônes seulement, il y a une clé pratique pour cela:
ionic resources --icon
plus de détails ici
ne devez-vous pas spécifier le dossier qui contient l'icône? Cordova remplace l'icône par 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" />
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
une petite explication pour les gens qui disent <icon src="res/icon.png" /> pas de travail !
, Vous devez mettre l'icône.png dans ces deux dossiers
project_name/res /
et
project_name/platform_name/res/
Suit:
cordova create hello com.example.hello HelloWorld
cd hello
Copiez votre icône.png à project_name/res/
Ouvert config.xml et mettre <icon src="res/icon.png" />
après cette course
cordova platform add android
Maintenant, copiez votre icône.les png ... 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 le périphérique votre application avec votre icône