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é les plates-formes iOS et Android.
La configuration contient tous les chemins vers toutes les icônes de 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 png.
Lors de l'exécution dans le simulateur, les icônes ne s'affichent pas. Je l'ai recherché dans xCode où il me dit que le dossier "Resources" pour les icônes contient toujours les icônes par défaut phonegap. Même chose 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" />
Réponses:
Heureusement, il y a un peu dans la documentation sur les images de démarrage, ce qui m'a mis sur la route pour trouver le bon emplacement pour les images d'icônes. Alors voilà.
Emplacement des fichiers Une fois que vous avez construit votre projet à l'aide de l'interface de ligne de commande "cordova build ios", vous devriez avoir une structure de fichiers complète pour votre application iOS dans le
platforms/ios/
dossier.À l'intérieur de ce dossier se trouve un dossier portant le nom de votre application. Qui à son tour contient un
resources/
répertoire où vous trouverez les dossiersicons/
etsplashscreen/
.Dans le dossier des icônes, vous trouverez quatre fichiers d'icônes (pour 57px et 72 px, chacun en version standard 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 de sauvegarder les fichiers d'icônes dans ce dossier. Donc, c'est:
YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons
Idem pour les fichiers d'écran de démarrage.
Remarques
Après avoir placé les fichiers là-bas, 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 la manière iOS / Apple (c'est-à-dire [email protected] etc.) au lieu d'éditer les noms dans info.plist ou config.xml. Au moins cela a fonctionné pour moi.
Et au fait, ignorez le chemin étrange et le nom de fichier étrange donné pour les icônes dans config.xml (ie
<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 sont apparues très bien même si mon icône 114px a été nommée à la[email protected]
place deicon-57-2x.png
.N'utilisez pas config.xml pour empêcher l'effet de brillance d'Apple sur l'icône. Au lieu de cela, cochez 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).
la source
FAQ: ÉCRAN ICÔNE / SPLASH (Cordova 5.x / 2015)
Je présente ma réponse sous forme de FAQ générale qui peut vous aider à résoudre de nombreux problèmes que j'ai rencontrés lors de l'utilisation des icônes / écrans de démarrage. Vous découvrirez peut-être comme moi que la documentation n'est pas toujours très claire ni à jour. Cela ira probablement à la documentation StackOverflow lorsqu'elle sera disponible.
Premièrement: répondre à la question
Dans votre version de Cordova, la
icon
balise est inutile. Il n'est même pas documenté dans Cordova 3.0.0. Vous devez utiliser la version de la documentation qui correspond au cli que vous utilisez et non la dernière!La balise icon ne fonctionne pas du tout pour Android avant la version 3.5.0 selon ce que je peux voir dans les différentes versions de la documentation. Dans 3.4.0, ils conseillent toujours de copier manuellement les fichiers
Dans les versions plus récentes : votre
config.xml
apparence est meilleure 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 éléments utiles à modifier:gap:
espace de noms<preference name="SplashScreen" value="screen" />
d'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:
Puis-je utiliser une ancienne version de Cordova / Phonegap
Non, la fonction icône / écran de démarrage n'était pas dans les anciennes versions de Cordova, vous devez donc utiliser une version récente. Dans les versions précédentes, seul Phonegap Build gérait les icônes / l'écran de démarrage, donc la construction locale et la gestion des icônes n'étaient possibles qu'avec un hook. Je ne connais pas la version minimale pour utiliser cette fonctionnalité, mais avec la version 5.1.1, cela fonctionne bien à la fois dans Cordova / Phonegap cli. Avec Cordova 3.5, cela n'a pas fonctionné pour moi.
Edit : pour Android, vous devez utiliser au moins 3.5.0
Comment puis-je déboguer le processus de génération des icônes?
Le cli utilise une commande CP. Si vous fournissez un chemin d'icône non valide, une
cp
erreur s'affiche :Edit : vous avez utilisé
cordova build <platform> --verbose
pour obtenir des journaux d'utilisation de la commande cp pour voir où vos icônes sont copiéesLes icônes doivent aller dans un dossier selon la configuration. Pour moi, cela va dans de nombreux sous-dossiers dans:
platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Ensuite, vous pouvez trouver l'APK et l'ouvrir en tant qu'archive zip pour vérifier que les icônes sont présentes. Ils doivent être dans un
res/drawable*
dossier car il s'agit d'un dossier spécial pour Android.Où dois-je placer les icônes / écrans de démarrage dans mon projet?
Dans de nombreux exemples, vous trouverez que les icônes / écrans de démarrage sont déclarés dans un
res
dossier. Ilres
s'agit d'un dossier Android spécial dans l'APK de sortie, mais cela ne signifie pas que vous devez utiliser unres
dossier 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 ne faites pas
www
attention! Ceci est documenté, mais pas clairement car tous les exemples utilisentres
et vous ne savez pas où se trouve ce dossier :(Je veux dire que si vous mettez l'icône en
www/icon.png
vous, vous devez absolument l'inclurewww
dans votre chemin.Edit Mars 2016 : après la mise à jour de mes versions, il semble maintenant que les icônes sont relatives au
www
dossier mais la documentation n'a pas été modifiée ( problème )Ça
<icon src="icon.png"/>
marche?Non! .
Sur Android, il semble que cela fonctionnait avant (quand l'attribut de densité n'était pas encore pris en charge?) Mais plus maintenant. Voir ce numéro de Cordova
Sur iOS, il semble que l'utilisation de cette déclaration globale puisse remplacer des déclarations plus spécifiques, alors faites attention et construisez avec
--verbose
pour vous assurer que tout fonctionne comme prévu.Puis-je utiliser le même fichier icône / écran de démarrage pour toutes les densités.
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 65 Ko sans aucun problème.
Quelle est la différence lors de l'utilisation de la balise platform par rapport à l'attribut platform
est le même que
Dois-je utiliser l'espace de noms gap: si j'utilise Phonegap?
D'après mon expérience, les nouvelles versions de Phonegap ou Cordova sont toutes les deux capables de comprendre les déclarations d'icônes sans utiliser d'
gap:
espace de noms xml.Cependant, j'attends toujours une réponse valide ici: le plugin cordova / phonegap ajoute VS config.xml
Pour autant que je sache, certaines fonctionnalités avec l'
gap:
espace de noms peuvent être disponibles plus tôt dans PhonegapBuild, puis dans Phonegap, puis portées sur Cordova (?)Est
<preference name="SplashScreen" value="screen" />
nécessaire?Au moins pour Android, oui. J'ai ouvert un numéro avec des explications supplémentaires.
L'ordre de déclaration des icônes est-il important?
Oui! Cela n'a peut-être aucun impact sur Android mais sur iOS d'après mes tests. C'est un comportement inattendu et non documenté, j'ai donc ouvert un autre problème .
Ai-je besoin
cordova-plugin-splashscreen
?Oui, cela est absolument nécessaire si vous voulez que l'écran de démarrage fonctionne. La documentation n'est pas claire ( problème ) et pensons que le plugin n'est nécessaire que pour proposer une API javascript en écran de démarrage.
Comment puis-je redimensionner rapidement les images pour toutes les largeurs / hauteurs / densités
Il existe des outils pour vous aider à le faire. Le meilleur pour moi est http://makeappicon.com/ mais il nécessite de fournir une adresse e-mail.
Les autres solutions possibles sont:
Pouvez-vous me donner un exemple de configuration?
Oui. Voici mon vrai
config.xml
Les kits de démarrage constituent une bonne source d’exemples. Comme phonegap-start ou Ionic starter
la source
cordova build android --verbose
pour identifier et résoudre mon problème. Merci!Depuis Cordova 3.5.0-0.2.6, l'
<icon />
élément dans config.xml fonctionne avec les mises en garde suivantes:L'
src
attribut est un chemin relatif au dossier racine de votre projet. Le suivi des problèmes sur ce problème raison pour laquelle le changement.L'
<icon src="..." />
élément sans résolution / dpi est documenté comme l'icône utilisée par toutes les plates-formes comme icône par défaut. Cependant, sur les versions Android, l'icône par défaut n'est copiée que dans le dossier dessinable Android, sans définition de résolutions spécifiques. Cela vous fait apparaître une icône personnalisée dans le/res/drawable
dossier, 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ôneconfig.xml
pour chaque résolution sur la plate-forme Android.Par exemple, si votre image d'icône se trouve dans le chemin
www/res/img/icon.png
relatif à votre projet racine, ces lignes dansconfig.xml
font que l'icône de votre application dans Android fonctionne:Avec cette configuration en place, vous pouvez avoir une seule icône d'image pour toutes les résolutions écrasant l'icône de cordova par défaut, et sans hoooks personnalisés. Construire simplement avec
cordova build android
devrait faire l'affaire.la source
density
. J'ai changé<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
pour<icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
Si vous voulez un moyen facile à utiliser pour ajouter des icônes automatiquement lors de la construction sur place (
cordova emulate ios
,cordova run android
, etc.) un coup d' oeil à ce point essentiel:https://gist.github.com/LinusU/7515016
Espérons que cela commencera à fonctionner dès le départ dans le futur, voici le rapport de bogue pertinent sur le projet Cordova:
https://issues.apache.org/jira/browse/CB-2606
la source
Vous devez créer un fichier config.xml dans lequel vous mettrez le fichier icône
Vérifiez ceci: https://build.phonegap.com/docs/config-xml
il y a des icônes spécifiques à iOS
la source
Étant donné que la plupart des réponses ici sont destinées à iOS, voici une solution pour changer d'icône sous Android.
Pour Android:
Apportez des modifications dans <emplacement du projet> \ plates-formes \ android \ ant-build \ res et non dans <emplacement du projet> \ plates-formes \ android \ res
Pour certaines personnes, apporter des modifications à ce dernier emplacement a peut-être fonctionné, mais après avoir remarqué que Phonegap copiait de \ android \ res vers \ android \ ant-build \ res, j'ai décidé de m'y enregistrer et j'ai trouvé un ensemble séparé de dossiers pouvant être dessinés contenant la valeur par défaut icône de phonegap.
Changer ceux-ci a finalement fonctionné.
Étant donné que 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 ne fonctionnait pas non plus.
la source
J'utilise phonegap 3.1.0-0.15.0, depuis iOS7 a changé la résolution en 120x120px, je viens d'ajouter un fichier avec ces dimensions au projet, puis j'ai changé le fichier info.plist.
Plus d'informations peuvent être trouvées ici: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13
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 écrasant les anciens. N'oubliez pas d'aller dans Produit> Nettoyer dans la barre de menu de Xcode (raccourci Shift + Commande + K) et cela devrait fonctionner correctement! :)
la source
Dans cordova 3.3.1-0.1.2, le comportement attendu ne fonctionne pas correctement.
dans
http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
il indique clairement que vous êtes supposé les mettre 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écifiée par config.xml personnalisable d'origine (dans laquelle vous pointez vers un fichier de votre choix, ce qui était / est beaucoup mieux). il devrait alors prendre à partir de là pour chaque plate-forme et les mettre dans les plates-formes /? android? / res / drawable-? dpi / icon.png mais il ne fait pas un tel comportement correct pour le moment ... bug.
donc je suppose que nous devons les mettre manuellement pour chaque plate-forme. il faudrait bien sûr supprimer cela pour le dupliquer à nouveau dans le dossier www. pour moi, je devais de toute façon remplacer totalement le contenu du dossier principal www, car cela ne fonctionnait tout simplement pas avec hello world sans pirater un index.html de redirection pour y trouver un dossier aléatoire étrange. Mettre le dossier res à côté de www a le plus de sens, mais ce qui me semble être causé par cette série de choix / défauts de conception en cascade et déroutants.
la source
dans certains cas, les skripts internes de cordova ne placent 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-project-besoins
Créez un dossier "after_platform_add" dans le dossier hook et mettez / changez le dernier skript de devgirl.
N'oubliez pas de définir les droits exécutifs pour le script, sous Linux
"chmod 777 <script>"
bonne chance!
la source
Tout ce que j'ai fait a été ajouté les lignes ci-dessous dans config.xml
<icon src="www/img/appIcon.png" />
Et ça a très bien fonctionné
la source
Ajoutez simplement ce code dans votre fichier config.xml
par exemple:
Rappelez-vous toujours que vous devez utiliser l'extension .png
la source
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 construction prête à l'emploi pour xcode de cordova qui applique correctement les icônes. Comme vous, j'ai mis à jour toutes les icônes répertoriées dans le config.xml mais pas de dés.
Donc...
Tout d'abord, je mets généralement à jour le fichier config.xml à la racine du projet avec celui de mon dossier "www" (je le fais par incertitude quant au fait que le www / config.xml a une priorité ou s'il est même appliqué)
Deuxièmement, je mets à jour les "Phases de construction" du projet. Développez "Copier les ressources du bundle", vous avez déjà remarqué toutes les images dans "Ressources / icônes", "Ressources / splash". Tu peux soit:supprimez tous ces éléments pour éviter d'écraser vos images OUmettre à jour toutes ces images avec les vôtres (en renommant le nom de l'image répertorié)Pendant que j'y travaillais, vous pourriez être en mesure de mettre à jour au minimum les images à partir de l'onglet "Résumé".
Faites glisser et déposez vos images de vos dossiers res vers l'image appropriée dans l'onglet "Résumé". (res / icon / ios -> Icônes d'application et res / screen / ios -> Launch Images). Je le fais uniquement pour iPhone car mon application est uniquement iPhone. Cochez "Prérendu" si vous ne voulez pas que le brillant apparaisse.
Puis mettez à jour le "icon.png" référencé dans le fichier plist du projet: PROJECT_NAME-Info.plist ou dans l'onglet "Info" en regardant la cible du projet. Renommez-le en "icon-57.png" (qui vit maintenant dans la racine de votre projet, cela a été automatiquement ajouté à la racine lorsque vous avez fait le glisser-déposer.
Construisez et vous devriez une icône d'application mise à jour.
la source
Juste en notant que je viens de changer mon config.xml pour ressembler à l'exemple de Sebastian.
Quelque chose qui est également utile pour déboguer tout cela, surtout si vous ne faites pas de builds locaux ... est de télécharger les fichiers XAP / IPA / APK tels que 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, fondamentalement, vous pouvez maintenant voir ce qui est dans le paquet qui sera expédié au téléphone.
En faisant cela, je peux voir que pour la plate-forme Microsoft Phone, elle ignore largement 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 re-zip le dossier et renommez-le à nouveau en tant que fichier .XAP, vous pouvez 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 la version PhoneGap pour transformer votre icon.png et icon.jpg en ces deux fichiers. Peut-être que la suggestion de Masood est une possibilité ici et utilise un script hook.
Faire de même pour le fichier .IPA (iOS) entraîne la création de plusieurs fichiers comme icon-something.png au niveau parent au-dessus de www. Ils semblent tous vierges.
Faire de même pour le fichier .APK (Android) donne un ensemble de dossiers res / drawable-something et il semble y avoir mon icon.png dans chacun d'eux. C'est le succès le plus proche que je puisse revendiquer pour le moment.
la source