Eu criei um novo projeto phonegap (v 3.0.0-0.14.0) com config.xml padrão e, em seguida, adicionei as plataformas iOS e Android.

A configuração contém todos os caminhos para todos os ícones de plataforma.

Substituí os ícones padrão para iOS e Android para que o caminho e o nome ainda correspondam a esses pngs.

Ao rodar no simulador os ícones não aparecem. Eu pesquisei no xCode onde ele me diz que a pasta "Recursos" para os ícones ainda contém os ícones padrão do phonegap. O mesmo acontece com o Android.

O que estou fazendo errado?

Como posso adicionar ícones de aplicativos personalizados para iOS e Android com o phonegap?

obrigado

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

Felizmente, há algumas informações nos documentos sobre as imagens iniciais, que me colocaram no caminho certo para encontrar o local certo para as imagens dos ícones também. Então aqui vai.

Onde os arquivos são colocados Depois de criar seu projeto usando a interface de linha de comando "cordova build ios", você deve ter uma estrutura de arquivo completa para seu aplicativo iOS na platforms/ios/pasta.

Dentro dessa pasta está uma pasta com o nome do seu aplicativo. Que por sua vez contém um resources/diretório onde você encontrará as pastas icons/e splashscreen/.

Na pasta de ícones você encontrará quatro arquivos de ícones (para 57px e 72 px, cada um na versão regular e @ 2x). Estes são os ícones de espaço reservado do Phonegap que você tem visto até agora.

O que fazer

Tudo que você precisa fazer é salvar os arquivos de ícone nesta pasta. Então isso é:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

O mesmo para arquivos de tela inicial.

Notas

1. Depois de colocar os arquivos lá, reconstrua o projeto usando cordova build iosE use o comando de menu 'Limpar produto' do xCode. Sem isso, você ainda verá os espaços reservados do Phonegap.

2. É mais sensato renomear seus arquivos do jeito iOS / Apple (ou seja, [email protected] etc) em vez de editar os nomes no info.plist ou config.xml. Pelo menos isso funcionou para mim.

3. E a propósito, ignore o caminho estranho e o nome de arquivo estranho fornecido para os ícones em config.xml (ou seja <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />). Acabei de deixar essas definições lá, e os ícones apareceram muito bem, embora meu ícone de 114px tenha sido nomeado em [email protected]vez de icon-57-2x.png.

4. Não use config.xml para evitar o efeito de brilho da Apple no ícone. Em vez disso, marque a caixa no xCode (clique no título do projeto na coluna de navegação à esquerda, selecione seu aplicativo sob o cabeçalho Destino e role para baixo até a seção de ícones).

FAQ: ICON / SPLASH SCREEN (Cordova 5.x / 2015)

Apresento minha resposta como um FAQ geral que pode ajudá-lo a resolver muitos problemas que encontrei ao lidar com ícones / telas iniciais. Você pode descobrir como eu que a documentação nem sempre é muito clara e nem sempre atualizada. Isso provavelmente irá para a documentação StackOverflow, quando disponível.

Primeiro: respondendo à pergunta

Como posso adicionar ícones de aplicativos personalizados para iOS e Android com o phonegap?

Na sua versão do Cordova, a iconetiqueta é inútil. Nem mesmo está documentado no Cordova 3.0.0. Você deve usar a versão de documentação que se ajusta ao CLI que está usando e não a mais recente!

A tag de ícone não funciona para Android antes da versão 3.5.0 de acordo com o que posso ver nas diferentes versões da documentação. No 3.4.0 eles ainda aconselham copiar manualmente os arquivos

Em versões mais recentes : sua config.xmlaparência fica melhor nas versões mais recentes do Cordova. No entanto, ainda há muitas coisas que você pode querer saber. Se você decidir fazer upgrade, aqui estão algumas coisas úteis para modificar:

• Você não precisa do gap:namespace
• Você precisa <preference name="SplashScreen" value="screen" />para Android

Aqui estão mais detalhes das perguntas que você pode se fazer ao tentar lidar com ícones e tela inicial:

Posso usar uma versão antiga do Cordova / Phonegap

Não, o recurso de ícone / tela inicial não estava nas versões anteriores do Cordova, portanto, você deve usar uma versão recente. Nas versões anteriores, apenas o Phonegap Build lidava com os ícones / tela inicial, portanto, construir localmente e lidar com os ícones só era possível com um gancho. Não sei a versão mínima para usar este recurso, mas com 5.1.1 funciona bem em ambos os cli Cordova / Phonegap. Com Cordova 3.5 não funcionou para mim.

Editar : para Android, você deve usar pelo menos 3.5.0

Como posso depurar o processo de construção de ícones?

O cli usa um comando CP. Se você fornecer um caminho de ícone inválido, ele mostrará um cperro:

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 : você deve usar cordova build <platform> --verbosepara obter registros de uso do comando cp para ver onde seus ícones são copiados

Os ícones devem ir para uma pasta de acordo com a configuração. Para mim, ele vem em muitas subpastas em:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

Em seguida, você pode encontrar o APK e abri-lo como um arquivo zip para verificar se os ícones estão presentes. Eles devem estar em uma res/drawable*pasta porque é uma pasta especial para Android.

Onde devo colocar os ícones / telas iniciais no meu projeto?

Em muitos exemplos, você encontrará que os ícones / telas iniciais são declarados dentro de uma respasta. Esta resé uma pasta Android especial no APK de saída, mas isso não significa que você precisa usar uma respasta em seu projeto.

Você pode colocar seu ícone em qualquer lugar, mas o caminho que você usa deve ser relativo à raiz do projeto , e nem por wwwisso tome cuidado! Isso está documentado, mas não claramente, porque todos os exemplos estão usando rese você não sabe onde esta pasta está :(

Quer dizer, se você colocar o ícone em www/icon.pngvocê, absolutamente deve incluir wwwno seu caminho.

Editar Marte 2016 : depois de atualizar minhas versões, agora parece que os ícones são relativos à wwwpasta, mas a documentação não foi alterada ( problema )

Funciona <icon src="icon.png"/>?

Não, não tem! .

No Android, parece que funcionava antes (quando o atributo densidade ainda não era suportado?), Mas não funciona mais. Veja este problema de Cordova

No iOS, parece que o uso dessa declaração global pode substituir declarações mais específicas, portanto, tome cuidado e crie --verbosepara garantir que tudo funcione conforme o esperado.

Posso usar o mesmo arquivo de ícone / tela inicial para todas as densidades.

Sim você pode. Você pode até usar o mesmo arquivo para o ícone e a tela inicial (apenas para testar!). Eu usei um arquivo de ícone "grande" de 65kb sem nenhum problema.

Qual é a diferença ao usar a tag de plataforma e o atributo de plataforma

<icon src="icon.png" platform="android" density="ldpi" />

é o mesmo que

<platform name="android">
    <icon src="www/stample_icon.png" density="ldpi" />
</platform>

Devo usar gap: namespace se estiver usando Phonegap?

Na minha experiência, novas versões do Phonegap ou Cordova são capazes de entender declarações de ícones sem usar nenhum gap:namespace xml.

No entanto, ainda estou esperando uma resposta válida aqui: plug-in cordova / phonegap add VS config.xml

Pelo que eu entendi, alguns recursos com o gap:namespace podem estar disponíveis anteriormente no PhonegapBuild, depois no Phonegap e sendo transferidos para o Cordova (?)

É <preference name="SplashScreen" value="screen" />necessário?

Pelo menos para Android sim. Abri um problema com explicações adicionais.

A ordem da declaração do ícone é importante?

Sim! Pode não ter nenhum impacto no Android, mas tem no iOS de acordo com meus testes. Este é um comportamento inesperado e não documentado, então abri outro problema .

Eu preciso cordova-plugin-splashscreen?

Sim, isso é absolutamente necessário se você quiser que a tela inicial funcione. A documentação não é clara ( problema ) e vamos pensar que o plugin é necessário apenas para oferecer uma API javascript de tela inicial.

Como posso redimensionar as imagens para todas as larguras / alturas / densidades rapidamente

Existem ferramentas para ajudá-lo a fazer isso. O melhor para mim é http://makeappicon.com/, mas requer um endereço de e-mail.

Outras soluções possíveis são:

• AndroidAssetStudio
• https://gist.github.com/LinusU/7515016
• ícone de cordova

Você pode me dar um exemplo de configuração?

Sim. Aqui está o meu verdadeiroconfig.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>

Uma boa fonte de exemplos são os kits iniciais. Como phonegap-start ou Ionic starter

A partir do Cordova 3.5.0-0.2.6, o <icon />elemento em config.xml funciona com as seguintes ressalvas:

1. O srcatributo é um caminho relativo à pasta raiz do projeto. O rastreador de problemas sobre o motivo da mudança.

2. O <icon src="..." />elemento sem resolução / dpi é documentado como o ícone usado por todas as plataformas como o ícone padrão. No entanto, em versões do Android, o ícone padrão é apenas copiado para a pasta de desenho do Android, sem definições de resoluções específicas. Isso faz com que seu ícone personalizado apareça na /res/drawablepasta, e o ícone padrão cordova com resoluções específicas existe nas outras pastas dentro do apk final (ou seja /res/drawable-ldpi). Você deve adicionar um elemento de ícone config.xmlpara cada resolução na plataforma Android.

Por exemplo, se a imagem do seu ícone estiver no caminho www/res/img/icon.pngrelativo ao seu projeto raiz, essas linhas config.xmlfarão com que o ícone do seu aplicativo no 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" />

Com essa configuração em vigor, você pode ter um único ícone de imagem para todas as resoluções substituindo o ícone de cordova padrão e sem hoooks personalizados. Simplesmente construir com cordova build androiddeve resolver o problema.

Se você quiser uma maneira fácil de usar para adicionar ícones automaticamente quando construir localmente ( cordova emulate ios, cordova run android, etc) ter um olhar para esta essência:

https://gist.github.com/LinusU/7515016

Esperançosamente, isso começará a funcionar fora da caixa em algum momento no futuro. Aqui está o relatório de bug relevante no projeto Cordova:

https://issues.apache.org/jira/browse/CB-2606

Você tem que criar um arquivo config.xml no qual você deve colocar o arquivo de ícone

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

Verifique isto: https://build.phonegap.com/docs/config-xml

há ícones específicos para iOS

Como a maioria das respostas aqui são direcionadas ao iOS, aqui está uma solução para alterar o ícone no Android.

Para Android:

Faça alterações em <localização do projeto> \ plataformas \ android \ ant-build \ res e não em <localização do projeto> \ plataformas \ android \ res

Para algumas pessoas, fazer alterações no último local pode ter funcionado, mas tendo notado o Phonegap copiando de \ android \ res para \ android \ ant-build \ res, decidi fazer o check-in lá e encontrei um conjunto separado de pastas drawable contendo o padrão ícone do fone de ouvido.

Mudar aqueles finalmente funcionou.

Como estou compilando e executando localmente e não estou usando o Adobe PhoneGap Build, alterar os ícones em <localização do projeto> \ www \ res \ icon \ android também não funcionou.

Estou executando o phonegap 3.1.0-0.15.0, pois o iOS7 alterou a resolução para 120x120px. Acabei de adicionar um arquivo com essas dimensões ao projeto e, em seguida, alterei o arquivo info.plist.

1. Adicione um arquivo 120x120 ao projeto, clicando com o botão direito do mouse no arquivo do projeto no Xcode e selecionando "Adicionar arquivos a" [Nome do seu projeto] "...
2. Vá para o arquivo info.plist no Xcode "Resources / [Your Project Name] -info.plist"
3. Em "Arquivos de ícone (iOS 5) / Ícone principal / Arquivos de ícone", altere o "Item 2" para qualquer nome de arquivo do seu arquivo (chamei o meu "icon-120.png que coloquei na pasta Projeto ao lado de todos os outros ícones , embora isso não deva importar)

Mais informações podem ser encontradas aqui: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

Para corrigir a tela inicial no iOS, apenas colei novos arquivos com as mesmas dimensões e os mesmos nomes de arquivo, substituindo os antigos. Apenas lembre-se de ir para Produto> Limpar na barra de menu no Xcode (atalho Shift + Command + K) e deve funcionar bem! :)

No cordova 3.3.1-0.1.2 o comportamento esperado não está funcionando direito.

dentro

http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

ele afirma claramente que você deve colocá-los em sua pasta www principal em uma pasta chamada res e ícones que seguem uma convenção de nomenclatura específica, em vez da maneira original especificada pelo config.xml customizável (na qual você aponta para um arquivo de sua escolha, que era / é muito melhor). ele deve partir daí para cada plataforma e colocá-los em plataformas /? android? / res / drawable-? dpi / icon.png, mas não tem esse comportamento correto no momento ... bug.

então acho que temos que colocá-los manualmente lá para cada plataforma. obviamente, seria necessário remover isso para duplicá-lo na pasta www novamente. para mim, eu tive que substituir totalmente o conteúdo da pasta www principal de qualquer maneira, porque simplesmente não funcionava nem mesmo com hello world sem hackear um index.html de redirecionamento para encontrar alguma pasta estranha aleatória lá. Colocar a pasta res ao lado de www faz mais sentido, mas o que quer que pareça ser causado por esta série de opções / falhas de design em cascata e confusas.

em alguns casos os skripts internos de cordova não colocam os ícones na pasta certa, portanto você pode ver o robô f *** cordova ao invés do seu próprio ícone.

Faça uso do script de gancho .;)

three-hooks-your-cordovaphonegap-project-needs

Crie uma pasta "after_platform_add" na pasta do gancho e coloque / mude o último skript de devgirl.

Não se esqueça de definir direitos executivos para o script, em linux "chmod 777 <script>"

boa sorte!

Tudo o que fiz foi adicionar as linhas abaixo em config.xml <icon src="www/img/appIcon.png" />

E funcionou perfeitamente bem

Basta adicionar este código ao seu arquivo config.xml

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

por exemplo:

<icon src="icon.png">

Lembre-se sempre de que você precisa usar a extensão .png

Também estou tentando entender como tudo isso se conecta.

Aqui está o que eu encontrei até agora no XCode, mas espero ser corrigido ou confirmado se minhas suposições estiverem corretas. Eu não encontrei um out of the box build to xcode de Cordova que aplique corretamente os ícones. Como você, atualizei todos os ícones listados no config.xml, mas nenhum dado.

Então...

Em primeiro lugar, normalmente atualizo o config.xml na raiz do projeto com o da minha pasta "www" (isso eu faço sem a certeza de que o www / config.xml tem alguma precedência ou se é mesmo aplicado)

Em segundo lugar, atualizo as "fases de construção" do projeto. Expanda "Copiar recursos do pacote", você já notou todas as imagens em "Recursos / ícones", "Recursos / splash". Você também pode:

• remova tudo isso para evitar sobrescrever suas imagens OU
• atualize todas essas imagens com as suas (renomeando para o nome da imagem listado)

Enquanto eu estava trabalhando nisso, você pode ser capaz de atualizar as imagens minimamente na guia "Resumo".

Arraste e solte suas imagens de suas pastas res para a imagem apropriada na guia "Resumo". (res / icon / ios -> ícones de aplicativos e res / screen / ios -> Imagens de inicialização). Eu faço isso apenas para iPhone, pois meu aplicativo é apenas para iPhone. Marque "pré-renderizado" se não quiser que o brilho apareça.

Em seguida, atualize o "icon.png" referenciado no arquivo plist do projeto: PROJECT_NAME-Info.plist ou na guia "Info" ao olhar para o destino do projeto. Renomeie-o para "icon-57.png" (que agora reside na raiz do seu projeto, foi adicionado automaticamente à raiz quando você arrastou e soltou.

Crie e você deve um ícone de aplicativo atualizado.

Apenas observando que acabei de alterar meu config.xml para se parecer com o exemplo de Sebastian.

Algo que também é útil para depurar tudo isso, especialmente se você não fizer compilações locais ... é baixar os arquivos XAP / IPA / APK construídos a partir da nuvem do PhoneGap e criar pastas para cada um. Renomeie cada arquivo com uma extensão .ZIP e extraia o conteúdo de cada um para suas respectivas pastas. Então, basicamente, agora você pode ver o que está no pacote que será enviado para o telefone.

Ao fazer isso, posso ver que, para a plataforma Microsoft Phone, ela está ignorando em grande parte todas as minhas tentativas de substituir o ícone ou a tela inicial. Se você substituir ApplicationIcon.png e SplashScreenImage.jpg, compactar novamente o conjunto de pastas e renomeá-lo como um arquivo .XAP, poderá implantá-lo em seu telefone e ele funcionará perfeitamente. De alguma forma, há uma maneira de apenas obter a compilação do PhoneGap para transformar seu icon.png e icon.jpg nesses dois arquivos. Talvez a sugestão de Masood seja uma possibilidade aqui e utilize um script de gancho.

Fazer o mesmo para o arquivo .IPA (iOS) resulta em vários arquivos como icon-something.png no nível pai acima de www. Todos eles parecem estar em branco.

Fazer o mesmo para o arquivo .APK (Android) resulta em um conjunto de pastas res / drawable-something e parece ter meu icon.png em cada uma. É o mais próximo de um sucesso que posso reivindicar no momento.