¿Cómo agregar el ícono de la aplicación dentro de los proyectos de phonegap?

85

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" />
Markus
fuente
4
es esto? la compilación local ignora el archivo de configuración? stackoverflow.com/questions/15018098/…
Markus
Markus tiene razón, su comentario debería ser una respuesta
drodsou
1
Me tomé el tiempo para hacer una pregunta frecuente sobre todo lo que debe saber para depurar / hacer que los íconos funcionen (cordova 5.1.1). Compruebe stackoverflow.com/a/31674547/82609
Sebastien Lorber

Respuestas:

67

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 carpetas icons/y splashscreen/.

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

  1. Después de colocar los archivos allí, reconstruya el proyecto usando cordova build iosY use el comando de menú 'Limpiar producto' de xCode. Sin esto, seguirá viendo los marcadores de posición Phonegap.

  2. 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í.

  3. 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 de icon-57-2x.png.

  4. 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).

Wytze
fuente
¿Dejar nombres de archivo en config.xml no romperá la compilación con el servicio de compilación phonegap? esto solo funciona porque la compilación local ignora config.xml. ¿y si phonegap decide leerlo? Sugeriría copiar esos archivos con algún tipo de proceso de compilación.
Markus
1
Hola Markus, no tengo experiencia con el servicio Phonegap Build (excepto que fue desconcertante cuando lo intenté brevemente y sin éxito). Así que no puedo juzgar tu comentario, pero tomaré tu palabra. Por lo tanto, mi respuesta solo está dirigida a aquellos que hacen sus propias construcciones.
Wytze
1
Esta respuesta está desactualizada (pero funciona para 3.0.0). Ya no se requiere ningún proceso manual para manejar esto. Verifique el documento de borde y mi respuesta aquí stackoverflow.com/a/31674547/82609
Sebastien Lorber
46

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="[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>

Una buena fuente de ejemplos son los kits de inicio. Como phonegap-start o starter iónico

Sebastien Lorber
fuente
2
Creé una pequeña utilidad cli (entre muchas otras), que maneja el ícono de la aplicación, la pantalla de inicio y la generación de vista previa https://github.com/mmacmillan/cordova-imaging , lo menciono porque está impulsado por un archivo de configuración que está bien documentado con respecto los tamaños / dimensiones / ubicaciones, y contiene enlaces a la documentación específica de la plataforma; esto puede ayudar a complementar la respuesta detallada que se tomó el tiempo para proporcionar
Mike MacMillan
Hice todo esto, con Cordova 5.1, los archivos se copian en el .apk como mencionaste, pero aún así la tableta no muestra el ícono nuevo. ¿Algunas ideas?
Gringo Suave
Lo que debe hacer es desinstalar la versión anterior de la aplicación y luego instalar la nueva versión. Entonces la tableta notó que algo cambió. Entonces, pude obtener el nuevo ícono.
Gringo Suave
1
¡Qué fantástica respuesta! Usé tu sugerencia cordova build android --verbosepara identificar y resolver mi problema. ¡Gracias!
Sarah
Buena respuesta Sebastien;) pulgar hacia arriba
Alaeddine
32

A partir de Cordova 3.5.0-0.2.6, el <icon />elemento en config.xml funciona con las siguientes advertencias:

  1. El srcatributo es una ruta relativa a la carpeta raíz de su proyecto. El rastreador de problemas sobre este problema es el motivo del cambio.

  2. 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/drawablecarpeta, 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 icono config.xmlpara cada resolución en la plataforma Android.

Por ejemplo, si la imagen de su icono está en la ruta www/res/img/icon.pngrelativa a su proyecto raíz, estas líneas config.xmlhacen que el icono de su aplicación en Android funcione:

<!-- 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" />

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 androiddebería funcionar.

Ronoaldo Pereira
fuente
¿Tiene un enlace de informe de error para el problema 2? Acabo de encontrar este problema en un nuevo proyecto y al principio me confundió. Me gustaría seguir el progreso para saber cuándo se solucionó, si es posible. Salud.
Mike
¡Dios mío finalmente lo hizo funcionar! Gracias por usted 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" />
Tha Leang
@Ronoaldo Periera eres mi salvador !! <icono ..> etiqueta para cada densidad! ¡¡brillante!!
Hittz
El ícono predeterminado src no funciona bien para Android, ¡así que en realidad se ignora! Verifique mi respuesta aquí: stackoverflow.com/a/31674547/82609
Sebastien Lorber
8

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

Linus Unnebäck
fuente
Linus, como se explica en mi respuesta, sí, ahora funciona, pero también parece que se han roto algunas cosas, consulte stackoverflow.com/a/31674547/82609
Sebastien Lorber
4

Tienes que crear un archivo config.xml en el que pondrás el archivo de icono

<?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>

Mira esto: https://build.phonegap.com/docs/config-xml

hay iconos específicos de iOS

João Pimentel Ferreira
fuente
mi archivo de configuración ya contiene todos los iconos. se crea de forma predeterminada al crear un nuevo proyecto phonegap
Markus
2
No funciona. Funcionó con PG Build, pero Cordova 3.x cli no toma en consideración los íconos especificados en config.xml (ni icon.png & screen.png en la raíz). También buscando la respuesta a esta pregunta.
lefnire
¡Sí, config.xml es solo para PhoneGap Build! ¿Alguien sabe cómo hacer esto?
Michael
En Cordova 3.5.0-0.2.6, el soporte para íconos funciona, con algunas advertencias en Android. Vea mi respuesta para más detalles.
Ronoaldo Pereira
4

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ó.

Elixander Chen
fuente
3

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.

  1. Agregue un archivo de 120x120 al proyecto, haciendo clic derecho en el archivo del proyecto en Xcode y seleccionando "Agregar archivos a" [Nombre de su proyecto] "...
  2. Vaya al archivo info.plist en Xcode "Resources / [Your Project Name] -info.plist"
  3. En "Archivos de icono (iOS 5) / Icono principal / Archivos de icono", cambie "Elemento 2" por el nombre de archivo que tenga su archivo (llamé al mío "icon-120.png que coloqué en la carpeta Proyecto junto con todos los demás iconos , aunque esto no debería importar)

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. :)

Luddig
fuente
3

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.

MistereeDevlord
fuente
2

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!

Masood Moshref
fuente
1

Todo lo que hice fue agregar las siguientes líneas en config.xml <icon src="www/img/appIcon.png" />

Y funcionó totalmente bien

Ali Sadiq
fuente
Gracias hombre. Intenté poner un icono en res / icon.png (como en los ejemplos de documentación ...) y nunca funcionó en ios. Finalmente me di por vencido con esa confusa carpeta "res" y puse el ícono debajo de "www" como sugirió y funcionó como un encanto para mí también. Esto funciona para Cordova 6.0.0. plataforma ios.
firepol
1

Simplemente agregue este código en su archivo config.xml

<icon src="path to your icon image">

p.ej:

<icon src="icon.png">

Siempre recuerda que necesitas usar la extensión .png

Jobincs
fuente
intente usar imágenes png
Jobincs
0

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 O
  • actualice 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.

Sam Tsai
fuente
Construí el proyecto con Cordova 3.0.3, pero imagino que es lo mismo con las compilaciones de phonegap.
Sam Tsai
0

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.

Michael Blankenship
fuente