Preguntas frecuentes: PANTALLA DE ICONOS / SALPICADURAS (Cordova 5.x / 2015)
Presento mi respuesta como una pregunta frecuente general que puede ayudarlo a resolver muchos problemas que he encontrado al tratar con iconos / pantallas de presentación. Como yo, puede que descubra que la documentación no siempre es muy clara ni está actualizada. Esto probablemente irá a la documentación de StackOverflow cuando esté disponible.
Primero: respondiendo la pregunta
¿Cómo puedo agregar íconos de aplicaciones personalizados para iOS y Android con phonegap?
En tu versión de Cordova la iconetiqueta es inútil. Ni siquiera está documentado en Cordova 3.0.0. ¡Debe usar la versión de documentación que se ajuste a la cli que está usando y no la última!
La etiqueta de icono no funciona para Android en absoluto antes de la versión 3.5.0 según lo que puedo ver en las diferentes versiones de la documentación. En 3.4.0 todavía aconsejan copiar manualmente los archivos
En versiones más recientes : se config.xmlve mejor para las versiones más recientes de Cordova. Sin embargo, todavía hay muchas cosas que quizás desee saber. Si decide actualizar, aquí hay algunas cosas útiles para modificar:
- No necesitas el
gap:espacio de nombres
- Necesitas
<preference name="SplashScreen" value="screen" />para Android
A continuación, se muestran más detalles de las preguntas que puede hacerse al tratar de lidiar con los iconos y la pantalla de presentación:
¿Puedo usar una versión antigua de Cordova / Phonegap?
No, la función de icono / pantalla de presentación no estaba en versiones anteriores de Cordova, por lo que debe usar una versión reciente. En versiones anteriores, solo Phonegap Build manejaba los íconos / pantalla de presentación, por lo que construir localmente y manejar íconos solo era posible con un gancho. No conozco la versión mínima para usar esta función, pero con 5.1.1 funciona bien tanto en Cordova / Phonegap cli. Con Cordova 3.5 no funcionó para mí.
Editar : para Android debes usar al menos 3.5.0
¿Cómo puedo depurar el proceso de creación de iconos?
El cli usa un comando CP. Si proporciona una ruta de icono no válida, mostrará un cperror:
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
Editar : tiene uso cordova build <platform> --verbosepara obtener registros del uso del comando cp para ver dónde se copian sus iconos
Los iconos deberían ir en una carpeta de acuerdo con la configuración. Para mí, va en muchas subcarpetas en:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Luego puede encontrar el APK y abrirlo como un archivo zip para verificar que los íconos estén presentes. Deben estar en una res/drawable*carpeta porque es una carpeta especial para Android.
¿Dónde debo colocar los iconos / pantallas de presentación en mi proyecto?
En muchos ejemplos, encontrará que los iconos / pantallas de presentación se declaran dentro de una rescarpeta. Esta reses una carpeta especial de Android en el APK de salida, pero no significa que tenga que usar una rescarpeta en su proyecto.
Puede poner su icono en cualquier lugar, pero la ruta que utilice debe ser relativa a la raíz del proyecto , ¡y no wwwtenga cuidado! Esto está documentado, pero no claramente porque todos los ejemplos están usando resy no sabe dónde está esta carpeta :(
Quiero decir que si pones el ícono en www/icon.pngabsoluto debes incluirlo wwwen tu ruta.
Editar Mars 2016 : después de actualizar mis versiones, ahora parece que los íconos son relativos a la wwwcarpeta, pero la documentación no se ha cambiado ( problema )
¿ <icon src="icon.png"/>Funciona?
¡No, no lo hace! .
En Android, parece que solía funcionar antes (¿cuando el atributo de densidad aún no era compatible?) Pero ya no. Ver este número de Córdoba
En iOS, parece que el uso de esta declaración global puede anular declaraciones más específicas, así que tenga cuidado y compile con--verbose para asegurarse de que todo funcione como se espera.
¿Puedo usar el mismo archivo de icono / pantalla de presentación para todas las densidades?
Sí tu puedes. Incluso puede utilizar el mismo archivo para el icono y la pantalla de presentación (¡solo para probar!). He utilizado un archivo de icono "grande" de 65kb sin ningún problema.
¿Cuál es la diferencia cuando se usa la etiqueta de plataforma frente al atributo de plataforma?
<icon src="icon.png" platform="android" density="ldpi" />
es lo mismo que
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
¿Debo usar el espacio de nombres gap: si uso Phonegap?
En mi experiencia, las nuevas versiones de Phonegap o Cordova pueden comprender las declaraciones de iconos sin utilizar ningún gap:espacio de nombres xml.
Sin embargo, todavía estoy esperando una respuesta válida aquí: cordova / phonegap plugin add VS config.xml
Por lo que tengo entendido, algunas funciones con el gap:espacio de nombres pueden estar disponibles antes en PhonegapBuild, luego en Phonegap y luego ser transferidas a Cordova (?)
¿Se <preference name="SplashScreen" value="screen" />requiere?
Al menos para Android sí lo es. Abrí un problema con explicaciones adicionales.
¿Importa el orden de declaración de iconos?
¡Sí lo hace! Puede que no tenga ningún impacto en Android pero sí en iOS según mis pruebas. Este es un comportamiento inesperado e indocumentado, así que abrí otro problema .
¿Necesito cordova-plugin-splashscreen?
Sí, esto es absolutamente necesario si desea que la pantalla de presentación funcione. La documentación no es clara ( problema ) y pensemos que el complemento es necesario solo para ofrecer una API de JavaScript en la pantalla de presentación.
¿Cómo puedo cambiar el tamaño de las imágenes para todos los anchos / altos / densidades rápidamente?
Hay herramientas que le ayudarán a hacer eso. El mejor para mí es http://makeappicon.com/ pero requiere proporcionar una dirección de correo electrónico.
Otras posibles soluciones son:
¿Puedes darme una configuración de ejemplo?
Si. Aquí está mi verdaderoconfig.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>
Una buena fuente de ejemplos son los kits de inicio. Como phonegap-start o starter iónico