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
Comment puis-je ajouter des icônes d'applications personnalisées pour iOS et Android avec phonegap?
Dans votre version de Cordova, la iconbalise 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.xmlapparence 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:
- Vous n'avez pas besoin de l'
gap:espace de noms
- Vous avez besoin
<preference name="SplashScreen" value="screen" />d'Android
Voici 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 cperreur s'affiche :
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> --verbosepour obtenir des journaux d'utilisation de la commande cp pour voir où vos icônes sont copiées
Les 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 resdossier. Il ress'agit d'un dossier Android spécial dans l'APK de sortie, mais cela ne signifie pas que vous devez utiliser un resdossier 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 wwwattention! Ceci est documenté, mais pas clairement car tous les exemples utilisent reset vous ne savez pas où se trouve ce dossier :(
Je veux dire que si vous mettez l'icône en www/icon.pngvous, vous devez absolument l'inclure wwwdans votre chemin.
Edit Mars 2016 : après la mise à jour de mes versions, il semble maintenant que les icônes sont relatives au wwwdossier 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 --verbosepour 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
<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>
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 vraiconfig.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="info@x.co" 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 constituent une bonne source d’exemples. Comme phonegap-start ou Ionic starter