Creé un nuevo proyecto phonegap (v 3.0.0-0.14.0) con config.xml predeterminado y luego agregué plataformas iOS y Android.
La configuración contiene todas las rutas a todos los iconos de la plataforma.
He sobrescrito los iconos predeterminados para iOS y Android para que la ruta y el nombre aún coincidan con esos png.
Cuando se ejecuta en el simulador, los iconos no aparecen. Lo he buscado en xCode donde me dice que la carpeta "Recursos" para los íconos todavía contiene los íconos predeterminados de phonegap. Lo mismo con Android.
¿Qué estoy haciendo mal?
¿Cómo puedo agregar íconos de aplicaciones personalizados para iOS y Android con phonegap?
Gracias
mi 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" />
Respuestas:
Afortunadamente, hay un poco en los documentos sobre las imágenes de bienvenida, lo que me puso en el camino de encontrar la ubicación correcta para las imágenes de los iconos. Así que aquí va.
Dónde se colocan los archivos Una vez que haya creado su proyecto utilizando la interfaz de línea de comandos "cordova build ios", debe tener una estructura de archivo completa para su aplicación iOS en la
platforms/ios/
carpeta.Dentro de esa carpeta hay una carpeta con el nombre de su aplicación. Que a su vez contiene un
resources/
directorio donde encontrará las carpetasicons/
ysplashscreen/
.En la carpeta de iconos encontrará cuatro archivos de iconos (para 57px y 72 px, cada uno en versión regular y @ 2x). Estos son los íconos de marcadores de posición de Phonegap que ha estado viendo hasta ahora.
Qué hacer
Todo lo que tiene que hacer es guardar los archivos de iconos en esta carpeta. Así que eso es:
YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons
Lo mismo para los archivos de pantalla de bienvenida.
Notas
Después de colocar los archivos allí, reconstruya el proyecto usando
cordova build ios
Y use el comando de menú 'Limpiar producto' de xCode. Sin esto, seguirá viendo los marcadores de posición Phonegap.Es más prudente cambiar el nombre de sus archivos de la manera iOS / Apple (es decir, [email protected], etc.) en lugar de editar los nombres en info.plist o config.xml. Al menos eso funcionó para mí.
Y, por cierto, ignore la ruta extraña y el nombre de archivo extraño dado para los iconos en config.xml (es decir
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
). Dejé esas definiciones allí, y los íconos aparecieron bien a pesar de que mi ícono de 114px fue nombrado en[email protected]
lugar deicon-57-2x.png
.No use config.xml para evitar el efecto de brillo de Apple en el icono. En su lugar, marque la casilla en xCode (haga clic en el título del proyecto en la columna de navegación izquierda, seleccione su aplicación debajo del encabezado Target y desplácese hacia abajo hasta la sección de iconos).
fuente
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
En tu versión de Cordova la
icon
etiqueta 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.xml
ve 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:gap:
espacio de nombres<preference name="SplashScreen" value="screen" />
para AndroidA 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
cp
error:Editar : tiene uso
cordova build <platform> --verbose
para obtener registros del uso del comando cp para ver dónde se copian sus iconosLos 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
res
carpeta. Estares
es una carpeta especial de Android en el APK de salida, pero no significa que tenga que usar unares
carpeta 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
www
tenga cuidado! Esto está documentado, pero no claramente porque todos los ejemplos están usandores
y no sabe dónde está esta carpeta :(Quiero decir que si pones el ícono en
www/icon.png
absoluto debes incluirlowww
en tu ruta.Editar Mars 2016 : después de actualizar mis versiones, ahora parece que los íconos son relativos a la
www
carpeta, 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?
es lo mismo que
¿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 verdadero
config.xml
Una buena fuente de ejemplos son los kits de inicio. Como phonegap-start o starter iónico
fuente
cordova build android --verbose
para identificar y resolver mi problema. ¡Gracias!A partir de Cordova 3.5.0-0.2.6, el
<icon />
elemento en config.xml funciona con las siguientes advertencias:El
src
atributo es una ruta relativa a la carpeta raíz de su proyecto. El rastreador de problemas sobre este problema es el motivo del cambio.El
<icon src="..." />
elemento sin resolución / dpi se documenta como el icono utilizado por todas las plataformas como icono predeterminado. Sin embargo, en las compilaciones de Android, el icono predeterminado solo se copia en la carpeta de diseño de Android, sin establecer resoluciones específicas. Esto hace que aparezca un ícono personalizado en la/res/drawable
carpeta, y el ícono predeterminado de cordova con resoluciones específicas existe en las otras carpetas dentro del apk final (es decir/res/drawable-ldpi
). Debe agregar un elemento de iconoconfig.xml
para cada resolución en la plataforma Android.Por ejemplo, si la imagen de su icono está en la ruta
www/res/img/icon.png
relativa a su proyecto raíz, estas líneasconfig.xml
hacen que el icono de su aplicación en Android funcione:Con esa configuración en su lugar, puede tener un solo ícono de imagen para todas las resoluciones que sobrescriba el ícono de cordova predeterminado y sin anexos personalizados. Simplemente construir con
cordova build android
debería funcionar.fuente
density
. Me cambié<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
a<icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
Si quieres una forma fácil de usar para agregar iconos de forma automática cuando se construye localmente (
cordova emulate ios
,cordova run android
, etc.) tienen un vistazo a esto lo esencial:https://gist.github.com/LinusU/7515016
Con suerte, esto comenzará a funcionar de inmediato en el futuro, aquí está el informe de error relevante sobre el proyecto Cordova:
https://issues.apache.org/jira/browse/CB-2606
fuente
Tienes que crear un archivo config.xml en el que pondrás el archivo de icono
Mira esto: https://build.phonegap.com/docs/config-xml
hay iconos específicos de iOS
fuente
Dado que la mayoría de las respuestas aquí están dirigidas a iOS, aquí hay una solución para cambiar el ícono en Android.
Para Android:
Realice cambios en <ubicación del proyecto> \ plataformas \ android \ ant-build \ res y no <ubicación del proyecto> \ plataformas \ android \ res
Para algunas personas, hacer cambios en la última ubicación puede haber funcionado, pero habiendo notado que Phonegap copiaba desde \ android \ res a \ android \ ant-build \ res, decidí registrarme allí y encontré un conjunto separado de carpetas dibujables que contenían el archivo predeterminado. icono de phonegap.
Cambiar esos finalmente funcionó.
Como estoy compilando y ejecutando localmente y no uso Adobe PhoneGap Build, cambiar los íconos en <ubicación del proyecto> \ www \ res \ icon \ android tampoco funcionó.
fuente
Estoy ejecutando phonegap 3.1.0-0.15.0, ya que iOS7 cambió la resolución a 120x120px. Acabo de agregar un archivo con esas dimensiones al proyecto y luego cambié el archivo info.plist.
Encuentra más información aquí: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13
Para arreglar la pantalla de bienvenida en iOS, simplemente pegué archivos nuevos con las mismas dimensiones y los mismos nombres de archivo, sobrescribiendo los antiguos. Solo recuerde ir a Producto> Limpiar en la barra de menú en Xcode (atajo Shift + Command + K) y debería funcionar bien. :)
fuente
En Córdoba 3.3.1-0.1.2, el comportamiento esperado no funciona correctamente.
en
http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
indica claramente que se supone que debe colocarlos en su carpeta principal www en una carpeta llamada res e íconos que siguen una convención de nomenclatura particular en lugar de la forma original configurable config.xml especificada (en la que señala un archivo de su elección, que fue / es mucho mejor). debería tomar desde allí para cada plataforma y ponerlos en las plataformas /? android? / res / drawable-? dpi / icon.png pero no tiene un comportamiento tan correcto en este momento ... error.
así que supongo que tenemos que ponerlos manualmente allí para cada plataforma. por supuesto, tendría que eliminarlo para no duplicarlo en la carpeta www nuevamente. para mí, tuve que reemplazar totalmente el contenido en la carpeta principal www de todos modos porque simplemente no funcionaba ni siquiera con hello world sin hackear un index.html de redirección para encontrar una carpeta aleatoria extraña allí. Poner la carpeta res al lado de www tiene más sentido, pero lo que sea que me parezca causado por esta serie de opciones / defectos de diseño confusos y en cascada.
fuente
en algunos casos los skripts internos de cordova no ponen los íconos en la carpeta correcta, por lo tanto puedes ver el robot f *** cordova en lugar de tu propio ícono.
Utilice el guión de gancho .;)
tres-ganchos-tu-cordovaphonegap-proyecto-necesidades
Cree una carpeta "after_platform_add" en la carpeta hook y ponga / cambie el último skript de devgirl.
No olvide establecer derechos ejecutivos para el script, en linux.
"chmod 777 <script>"
¡buena suerte!
fuente
Todo lo que hice fue agregar las siguientes líneas en config.xml
<icon src="www/img/appIcon.png" />
Y funcionó totalmente bien
fuente
Simplemente agregue este código en su archivo config.xml
p.ej:
Siempre recuerda que necesitas usar la extensión .png
fuente
También estoy tratando de entender cómo se conecta todo esto.
Esto es lo que encontré hasta ahora en XCode, pero espero ser corregido o confirmado si mis suposiciones son correctas. No he encontrado una compilación lista para usar en xcode de cordova que aplique correctamente los íconos. Como tú, actualicé todos los íconos enumerados en config.xml pero no dados.
Entonces...
Primero, generalmente actualizo el config.xml en la raíz del proyecto con el de mi carpeta "www" (esto lo hago por la incertidumbre de que www / config.xml tiene alguna precedencia o si incluso se aplica)
En segundo lugar, actualizo las "Fases de construcción" del proyecto. Expanda "Copiar recursos del paquete", ya ha notado todas las imágenes en "Recursos / iconos", "Recursos / presentación". Tu también puedes:elimine todos estos para evitar sobrescribir sus imágenes Oactualice todas estas imágenes con las suyas propias (cambie el nombre al nombre de la imagen que aparece en la lista)Mientras trabajaba en esto, es posible que pueda actualizar mínimamente las imágenes desde la pestaña "Resumen".
Arrastre y suelte sus imágenes desde sus carpetas de resolución a la imagen correspondiente en la pestaña "Resumen". (res / icon / ios -> Iconos de aplicaciones y res / screen / ios -> Iniciar imágenes). Lo hago solo para iPhone ya que mi aplicación es solo para iPhone. Marque "renderizado previamente" si no desea que aparezca el brillo.
Luego actualice el "icon.png" al que se hace referencia en el archivo plist del proyecto: PROJECT_NAME-Info.plist o en la pestaña "Información" cuando se mira el objetivo del proyecto. Cambie el nombre a "icon-57.png" (que ahora vive en la raíz de su proyecto, esto se agregó automáticamente a la raíz cuando hizo el arrastrar y soltar).
Construye y deberías tener un ícono de aplicación actualizado.
fuente
Solo notando que acabo de cambiar mi config.xml para que se parezca al ejemplo de Sebastian.
Algo que también es útil para depurar todo esto, especialmente si no realiza compilaciones locales ... es descargar los archivos XAP / IPA / APK creados desde la nube PhoneGap y crear carpetas para cada uno. Cambie el nombre de cada archivo con una extensión .ZIP y extraiga el contenido de cada uno en sus respectivas carpetas. Básicamente, ahora puede ver qué hay en el paquete que se enviará al teléfono.
Al hacer esto, puedo ver que para la plataforma Microsoft Phone está ignorando en gran medida todos mis intentos de reemplazar el ícono o la pantalla de bienvenida. Si luego reemplaza ApplicationIcon.png y SplashScreenImage.jpg, luego vuelva a comprimir el conjunto de carpetas y cambie el nombre nuevamente como un archivo .XAP, luego puede implementarlo en su teléfono y funcionará perfectamente. De alguna manera, hay una manera de obtener la compilación de PhoneGap para convertir su icon.png e icon.jpg en esos dos archivos. Quizás la sugerencia de Masood sea una posibilidad aquí y utilice un guión de gancho.
Hacer lo mismo para el archivo .IPA (iOS) da como resultado varios archivos como icon-something.png en el nivel principal por encima de www. Todos parecen estar en blanco.
Hacer lo mismo con el archivo .APK (Android) da como resultado un conjunto de carpetas res / drawable-something y parece tener mi icon.png en cada una. Es lo más cercano a un éxito que puedo afirmar en este momento.
fuente