J'ai créé un nouveau projet phonegap (v 3.0.0-0.14.0) avec le fichier config.xml par défaut, puis j'ai ajouté iOS et les plateformes Android).
La configuration contient tous les chemins d'accès à toutes les icônes de plate-forme.
J'ai écrasé les icônes par défaut pour iOS et Android), de sorte que le chemin d'accès et le nom correspondent toujours à ces pngs.
Lors de l'exécution dans le simulateur, les icônes n'apparaissent pas. Je l'ai cherché dans xCode où il me dit que le dossier "Ressources" des icônes contient toujours les icônes par défaut de phonegap. Même avec Android.
Qu'est-ce que je fais mal?
Comment puis-je ajouter des icônes d'applications 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" />
Heureusement, il y a un peu dans la documentation sur les images splash, ce qui m'a permis de trouver le bon emplacement pour les images d'icônes. Alors voilà.
Où les fichiers sont placés Une fois que vous avez construit votre projet en utilisant l'interface de ligne de commande "cordova build ios", vous devez avoir une structure de fichier complète pour votre application iOS dans le dossier platforms/ios/
.
À l'intérieur de ce dossier se trouve un dossier portant le nom de votre application. Qui contient à son tour un répertoire resources/
Dans lequel vous trouverez les dossiers icons/
Et splashscreen/
.
Dans le dossier des 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 d'espace réservé Phonegap que vous avez vues jusqu'à présent.
Que faire
Tout ce que vous avez à faire est d’enregistrer les fichiers d’icône dans ce dossier. Donc, c'est:
YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons
Même chose pour les fichiers splashscreen.
Notes
Après y avoir placé les fichiers, 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 Phonegap.
Il est plus sage de renommer vos fichiers de manière iOS/Apple (par exemple, icô[email protected], etc.) au lieu de modifier les noms dans info.plist ou config.xml. Au moins cela a fonctionné pour moi.
Et au fait, ignorez le chemin et le nom de fichier étranges donnés pour les icônes dans config.xml (c'est-à-dire <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
). Je viens de laisser ces définitions là-bas, et les icônes se présentaient parfaitement, même si mon icône de 114px s'appelait [email protected]
Au lieu de icon-57-2x.png
.
N'utilisez pas le fichier config.xml pour empêcher l'effet de brillant 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 Cible et faites défiler jusqu'à la section des icônes).
Je présente ma réponse en tant que général FAQ) qui peut vous aider à résoudre de nombreux problèmes rencontrés en traitant des icônes/écrans de démarrage. Vous découvrirez peut-être comme moi que la documentation n'est pas toujours très détaillée. clear ni à jour, cela ira probablement à documentation StackOverflow lorsque disponible.
Comment puis-je ajouter des icônes d'application personnalisées pour iOS et Android avec Phonegap?
Dans votre version de Cordova , la balise icon
est inutile. Cela n'est même pas documenté dans Cordova 3.0.0. Vous devez utiliser la version de la documentation qui correspond à la CLI que vous utilisez et non la plus récente!
La balise icône ne fonctionne pas pour Android avant la version 3.5.0 selon ce que je peux voir dans les différentes versions de la documentation. Dans la version 3.4.0, il est toujours conseillé de copier manuellement les fichiers
Dans les versions plus récentes : votre config.xml
semble mieux pour les nouvelles versions de Cordova. Cependant, il y a encore beaucoup de choses que vous voudrez peut-être savoir. Si vous décidez de mettre à niveau, voici quelques choses utiles à modifier:
gap:
espace de noms<preference name="SplashScreen" value="screen" />
Pour AndroidVoici plus de détails sur les questions que vous pourriez vous poser lorsque vous essayez de gérer les icônes et l'écran de démarrage:
Non, la fonctionnalité icône/écran de démarrage ne se trouvait pas dans les versions antérieures de Cordova, vous devez donc utiliser une version récente. Dans les versions antérieures, Phonegap Build ne gérait que les icônes/écrans de démarrage, de sorte que la création locale et la gestion des icônes n'étaient possibles qu'avec un crochet. Je ne connais pas la version minimale pour utiliser cette fonctionnalité, mais avec la version 5.1.1, cela fonctionne très bien dans Cordova/Phonegap cli. Avec Cordova 3.5, cela n’a pas fonctionné pour moi.
Modifier : pour Android vous devez utiliser au moins 3.5.0
Le cli utilise une commande CP. Si vous fournissez un chemin d'icône non valide, une erreur cp
apparaîtra:
sebastien@sebastien-xps:cordova (dev *+$%)$ cordova run Android --device
cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png
Edit : vous avez utilisé cordova build <platform> --verbose
pour obtenir les journaux d'utilisation de la commande cp pour voir où vos icônes sont copiées
Les icônes doivent aller dans un dossier en fonction de la configuration. Pour moi, cela se trouve dans plusieurs sous-dossiers dans: platforms/Android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Ensuite, vous pouvez trouver le fichier APK et l’ouvrir en tant qu’archive Zip pour vérifier si les icônes sont présentes. Ils doivent être dans un res/drawable*
dossier parce que c'est un dossier spécial pour Android.
Dans de nombreux exemples, vous trouverez que les icônes/écrans de démarrage sont déclarés dans un dossier res
. Ce res
est un dossier spécial Android dans le fichier APK de sortie, mais cela ne signifie pas que vous devez utiliser un dossier res
dans votre projet.
Vous pouvez placer votre icône n'importe où, mais le chemin que vous utilisez doit être relatif à la racine du projet, et pas www
alors faites attention! Ceci est documenté, mais pas clairement parce que tous les exemples utilisent res
et vous ne savez pas où se trouve ce dossier :(
Je veux dire si vous mettez l'icône dans www/icon.png
vous devez absolument inclure www
dans votre chemin.
Edit Mars 2016 : après la mise à niveau de mes versions, il semble maintenant que les icônes soient relatives au dossier www
mais la documentation n’a pas été modifiée (- numéro )
<icon src="icon.png"/>
travail?Non, ce n'est pas le cas! .
Sur Android, il semble que cela fonctionnait auparavant (lorsque l'attribut de densité n'était pas encore pris en charge?), Mais plus maintenant. Voir ceci numéro de Cordova
Sur iOS, il semble utiliser cette déclaration globale peut écraser déclarations plus spécifiques, prenez donc garde et construisez avec --verbose
pour que tout fonctionne comme prévu.
Oui, vous pouvez. Vous pouvez même utiliser le même fichier pour l'icône et l'écran de démarrage (juste pour tester!). J'ai utilisé un "gros" fichier d'icônes de 65kb sans aucun problème.
<icon src="icon.png" platform="Android" density="ldpi" />
est le même que
<platform name="Android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
D'après mon expérience, les nouvelles versions de Phonegap ou de Cordova sont toutes deux capables de comprendre les déclarations d'icônes sans utiliser aucun gap:
espace de noms xml.
Cependant, j'attends toujours une réponse valide ici: plugin cordova/phonegap add VS config.xml
Pour autant que je sache, certaines fonctionnalités du gap:
L'espace de nommage peut être disponible plus tôt dans PhonegapBuild, puis dans Phonegap et ensuite être porté sur Cordova (?)
<preference name="SplashScreen" value="screen" />
Champs obligatoires?Au moins pour Android oui, j’ai ouvert n problème avec des explications supplémentaires.
Oui! Cela n’aura peut-être pas d’impact sur Android mais c’est sur iOS d’après mes tests. C’est un comportement inattendu et non documenté. J’ai donc ouvert autre problème .
cordova-plugin-splashscreen
?Oui, c'est absolument nécessaire si vous voulez que l'écran de démarrage fonctionne. La documentation n'est pas claire ( numéro ) et pensons que le plug-in est requis uniquement pour offrir une API javascript pour un écran de démarrage.
Il existe des outils pour vous aider à le faire. Le meilleur pour moi est http://makeappicon.com/ mais il faut fournir une adresse e-mail.
Les autres solutions possibles sont:
Oui. Voici mon vrai config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="co.x" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:Android="http://schemas.Android.com/apk/res/Android" xmlns:cdv="http://cordova.Apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
<name>x</name>
<description>
x
</description>
<author email="[email protected]" href="https://x.co">
x
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="webviewbounce" value="false" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#0177C6" />
<preference name="detect-data-types" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="Android-minSdkVersion" value="14" />
<preference name="Android-targetSdkVersion" value="22" />
<preference name="phonegap-version" value="cli-5.1.1" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashScreen" value="screen" />
<plugin name="cordova-plugin-device" spec="1.0.1" />
<plugin name="cordova-plugin-console" spec="1.0.1" />
<plugin name="cordova-plugin-whitelist" spec="1.1.0" />
<plugin name="cordova-plugin-crosswalk-webview" spec="1.2.0" />
<plugin name="cordova-plugin-statusbar" spec="1.0.1" />
<plugin name="cordova-plugin-screen-orientation" spec="1.3.6" />
<plugin name="cordova-plugin-splashscreen" spec="2.1.0" />
<access Origin="http://*" />
<access Origin="https://*" />
<access launch-external="yes" Origin="tel:*" />
<access launch-external="yes" Origin="geo:*" />
<access launch-external="yes" Origin="mailto:*" />
<access launch-external="yes" Origin="sms:*" />
<access launch-external="yes" Origin="market:*" />
<platform name="Android">
<icon src="www/stample_icon.png" density="ldpi" />
<icon src="www/stample_icon.png" density="mdpi" />
<icon src="www/stample_icon.png" density="hdpi" />
<icon src="www/stample_icon.png" density="xhdpi" />
<icon src="www/stample_icon.png" density="xxhdpi" />
<icon src="www/stample_icon.png" density="xxxhdpi" />
<splash src="www/stample_splash.png" density="land-hdpi"/>
<splash src="www/stample_splash.png" density="land-ldpi"/>
<splash src="www/stample_splash.png" density="land-mdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="port-hdpi"/>
<splash src="www/stample_splash.png" density="port-ldpi"/>
<splash src="www/stample_splash.png" density="port-mdpi"/>
<splash src="www/stample_splash.png" density="port-xhdpi"/>
<splash src="www/stample_splash.png" density="port-xxhdpi"/>
<splash src="www/stample_splash.png" density="port-xxxhdpi"/>
</platform>
<platform name="ios">
<icon src="www/stample_icon.png" width="180" height="180" />
<icon src="www/stample_icon.png" width="60" height="60" />
<icon src="www/stample_icon.png" width="120" height="120" />
<icon src="www/stample_icon.png" width="76" height="76" />
<icon src="www/stample_icon.png" width="152" height="152" />
<icon src="www/stample_icon.png" width="40" height="40" />
<icon src="www/stample_icon.png" width="80" height="80" />
<icon src="www/stample_icon.png" width="57" height="57" />
<icon src="www/stample_icon.png" width="114" height="114" />
<icon src="www/stample_icon.png" width="72" height="72" />
<icon src="www/stample_icon.png" width="144" height="144" />
<icon src="www/stample_icon.png" width="29" height="29" />
<icon src="www/stample_icon.png" width="58" height="58" />
<icon src="www/stample_icon.png" width="50" height="50" />
<icon src="www/stample_icon.png" width="100" height="100" />
<splash src="www/stample_splash.png" width="320" height="480"/>
<splash src="www/stample_splash.png" width="640" height="960"/>
<splash src="www/stample_splash.png" width="768" height="1024"/>
<splash src="www/stample_splash.png" width="1536" height="2048"/>
<splash src="www/stample_splash.png" width="1024" height="768"/>
<splash src="www/stample_splash.png" width="2048" height="1536"/>
<splash src="www/stample_splash.png" width="640" height="1136"/>
<splash src="www/stample_splash.png" width="750" height="1334"/>
<splash src="www/stample_splash.png" width="1242" height="2208"/>
<splash src="www/stample_splash.png" width="2208" height="1242"/>
</platform>
<allow-intent href="*" />
<engine name="browser" spec="^3.6.0" />
<engine name="Android" spec="^4.0.2" />
</widget>
Les kits de démarrage sont une bonne source d’exemples. Comme phonegap-start ou démarreur ionique
A partir de Cordova 3.5.0-0.2.6, l'élément _<icon />
_ du fichier config.xml résout les problèmes suivants:
L'attribut src
est un chemin relatif au dossier racine de votre projet. Le suivi des problèmes à propos de ce problème est la raison pour laquelle le changement.
L'élément _<icon src="..." />
_ sans résolution/dpi est documenté en tant qu'icône utilisée par toutes les plateformes en tant qu'icône par défaut. Cependant, sur Android construit, l’icône par défaut est uniquement copiée dans le dossier Android, sans résolution spécifique définie. Ceci fait apparaître l’icône personnalisée dans le _/res/drawable
_ et l’icône par défaut de Cordova avec des résolutions spécifiques existe dans les autres dossiers du fichier apk final (c.-à-d. _/res/drawable-ldpi
_). Vous devez ajouter un élément d’icône dans _config.xml
_ pour chaque résolution du = Android plate-forme.
Par exemple, si votre image d'icône se trouve dans le chemin _www/res/img/icon.png
_ par rapport à votre projet racine, cette ligne dans _config.xml
_ crée l'icône de votre application dans Android fonctionne:
_<!-- 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" />
_
Une fois cette configuration en place, vous pouvez avoir une seule icône d'image pour toutes les résolutions, écrasant ainsi l'icône Cordova par défaut et sans crochet personnalisé. Construire simplement avec _cordova build Android
_ devrait faire l'affaire.
Si vous voulez un moyen simple d’ajouter automatiquement des icônes lors de la construction locale (cordova emulate ios
, cordova run Android
, etc) regardez ce Gist:
https://Gist.github.com/LinusU/7515016
Espérons que cela commencera à fonctionner dans le futur, voici le rapport de bogue sur le projet Cordova:
Étant donné que la plupart des réponses concernent iOS, voici une solution pour changer d’icône dans Android.
Pour Android:
Apportez des modifications dans <emplacement du projet>\plateformes\Android\ant-build\res et non <emplacement du projet>\plates-formes\Android\res
Certaines personnes ayant effectué des modifications à ce dernier emplacement ont peut-être fonctionné, mais après avoir remarqué que Phonegap copiait de\Android\res vers\Android\ant-build\res, j’ai décidé de me connecter et j’ai trouvé un ensemble séparé de dossiers pouvant être dessinés, contenant le dossier par défaut. icône phonegap.
Changer ceux finalement travaillés.
Étant donné que je crée 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 été effectuée. t fonctionne non plus.
Vous devez créer un fichier config.xml dans lequel vous placerez 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>
Vérifiez ceci: https://build.phonegap.com/docs/config-xml
il y a des icônes spécifiques iOS
J'utilise phonegap 3.1.0-0.15.0, puisque iOS7 a changé la résolution en 120x120px, je viens d'ajouter un fichier avec ces dimensions au projet, puis de modifier le fichier info.plist.
Plus d'informations peuvent être trouvées ici: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-1
Pour réparer l'écran de démarrage dans iOS, je viens de coller de nouveaux fichiers avec les mêmes dimensions et les mêmes noms de fichiers, en remplaçant les anciens. N'oubliez pas de vous rendre dans Produit> Nettoyer dans la barre de menus de Xcode (raccourci Maj + Commande + K) et tout devrait fonctionner correctement! :)
Dans cordova 3.3.1-0.1.2, le comportement attendu ne fonctionne pas correctement.
dans
http://cordova.Apache.org/docs/fr/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
il est clairement indiqué que vous êtes censé les placer dans votre dossier www principal dans un dossier appelé res et des icônes qui suivent une convention de dénomination particulière au lieu de la manière spécifiable par défaut config.xml (dans laquelle vous pointez sur un fichier de votre choix, qui était/est beaucoup mieux). il faudrait ensuite partir de là pour chaque plate-forme et les placer dans les plates-formes /? android?/res/drawable-? dpi/icon.png mais il n’existe pas un tel comportement correct pour le moment… bogue.
donc je suppose que nous devons les mettre manuellement pour chaque plate-forme. il faudrait bien entendu supprimer cela de la dupliquer à nouveau dans le dossier www. pour moi, je devais quand même totalement remplacer le contenu du dossier principal www parce que cela ne fonctionnait tout simplement pas avec hello world sans pirater une redirection index.html pour y trouver un dossier aléatoire étrange. Mettre le dossier res près de www est tout à fait sensé mais quoi que ce soit qui me semble provenir de cette série de choix/défauts de conception en cascade et déroutants.
dans certains cas, les attaches internes de Cordova ne mettent pas les icônes dans le bon dossier. Vous pouvez donc voir le robot f *** Cordova au lieu de votre propre icône.
Utilisez le script hook .;)
trois-crochets-votre-cordovaphonegap-projet-besoins
Créez un dossier "after_platform_add" dans le dossier de raccordement et insérez/modifiez le dernier script de devgirl.
N'oubliez pas de définir les droits exécutifs du script, sous linux "chmod 777 <script>"
bonne chance!
Ajoutez simplement ce code dans votre fichier config.xml
<icon src="path to your icon image">
par exemple:
<icon src="icon.png">
Rappelez-vous que vous devez utiliser l'extension .png
Tout ce que j'ai fait a été ajouté aux lignes ci-dessous dans config.xml <icon src="www/img/appIcon.png" />
Et cela a fonctionné parfaitement
Je viens de noter que je viens de changer mon fichier config.xml pour ressembler à l'exemple de Sebastian.
Ce qui est également utile pour le débogage de tout cela, en particulier si vous ne faites pas de builds locaux ... est de télécharger les fichiers XAP/IPA/APK construits à partir du cloud PhoneGap et de créer des dossiers pour chacun. Renommez chaque fichier avec une extension .Zip et extrayez le contenu de chacun dans leurs dossiers respectifs. Donc, en gros, vous pouvez maintenant voir le contenu du paquet qui sera envoyé au téléphone.
En faisant cela, je constate que la plate-forme Microsoft Phone ignore en grande partie toutes mes tentatives de remplacement de l'icône ou de l'écran de démarrage. Si vous remplacez ensuite ApplicationIcon.png et SplashScreenImage.jpg, puis recompressez le jeu de dossiers et renommez-le à nouveau en fichier .XAP, vous pourrez ensuite le déployer sur votre téléphone et cela fonctionnera parfaitement. D'une manière ou d'une autre, il existe un moyen d'obtenir simplement que la version PhoneGap transforme votre icon.png et votre icon.jpg en ces deux fichiers. La suggestion de Masood est peut-être une possibilité ici et utilise un script hook.
Si vous procédez de la même manière pour le fichier .IPA (iOS), vous obtenez plusieurs fichiers tels que icon-something.png au niveau parent situé au-dessus de www. Ils semblent tous être vides.
Si vous procédez de la même manière pour le fichier .APK (Android), vous obtenez un ensemble de dossiers res/drawable-quelque-chose et il semble que mon fichier icon.png y figure. C'est le plus proche d'un succès que je peux prétendre pour le moment.
Je suis également en train d'essayer de comprendre comment tout cela se connecte.
Voici ce que j'ai trouvé jusqu'à présent dans XCode, mais j'espère être corrigé ou confirmé si mes hypothèses sont correctes. Je n'ai pas trouvé de version prête à l'emploi pour xcode de Cordova qui applique correctement les icônes. Comme vous, j'ai mis à jour toutes les icônes listées dans le fichier config.xml mais pas de dés.
Alors...
Premièrement, je mets généralement à jour le fichier config.xml à la racine du projet avec celui de mon dossier "www" (je ne le fais pas en sachant que le fichier www/config.xml a la priorité ou même s’il est appliqué)
Deuxièmement, je mets à jour les "phases de construction" du projet. Développez "Copier les ressources du paquet", vous avez déjà remarqué toutes les images dans "Ressources/icônes", "Ressources/éclaboussure". Vous pouvez soit:
Pendant que je travaillais à cela, vous pourriez être en mesure de mettre à jour très simplement les images à partir de l'onglet "Résumé".
Glissez-déposez vos images de vos dossiers res vers l'image appropriée dans l'onglet "Résumé". (res/icon/ios -> icônes de l'application et res/screen/ios -> lancer des images). Je le fais uniquement pour iPhone puisque mon application est uniquement pour iPhone. Cochez "Prérendered" si vous ne voulez pas que le gloss apparaisse.
Mettez ensuite à jour le fichier "icon.png" référencé dans le fichier de liste de projets du projet: PROJECT_NAME-Info.plist ou dans l'onglet "Info" lorsque vous regardez la cible du projet. Renommez-le "icon-57.png" (qui réside maintenant dans la racine de votre projet, cela a été automatiquement ajouté à la racine lorsque vous avez effectué le glisser-déposer.
Construisez et vous devriez une icône d'application mise à jour.