Como adicionar o ícone do aplicativo em projetos phonegap?

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

A configuração contém todos os caminhos para todos os icons da plataforma.

Eu substituí os icons padrão do iOS e do Android para que o caminho e o nome ainda correspondam a esses pngs.

Ao correr no simulador, os icons não aparecem. Eu procurei no xCode onde ele diz que a pasta “Resources” dos icons ainda contém os icons padrão do phonegap. O mesmo com o Android.

O que estou fazendo de errado?

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

obrigado

meu config.xml

              

Felizmente há um pouco nos documentos sobre as imagens splash, o que me colocou no caminho para obter o local certo para as imagens de icons também. Então aqui vai.

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

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

Na pasta de icons, você encontrará quatro arquivos de icons (para 57 px e 72 px, cada um na versão normal e na versão 2x). Estes são os icons do placeholder do Phonegap que você tem visto até agora.

O que fazer

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

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

O mesmo para arquivos splashscreen.

Notas

  1. Depois de colocar os arquivos lá, reconstrua o projeto usando o cordova build ios e use o comando de menu ‘Clean product’ do xCode. Sem isso, você ainda verá os espaços reservados do Phonegap.

  2. É mais sábio renomear seus arquivos para o modo iOS / Apple (ou seja, icon-72@2x.png etc) em vez de editar os nomes no arquivo 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 dado para os icons em config.xml (ou seja, ). Acabei de deixar as definições lá, e os icons apareceram muito bem, embora o meu ícone de 114px foi nomeado icon@2x.png vez de icon-57-2x.png .

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

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 icons / canvass iniciais. Você pode descobrir como eu que a documentação nem sempre é muito clara e atualizada. Isso provavelmente irá para a documentação do StackOverflow quando disponível.

Primeiro: respondendo a pergunta

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

Na sua versão do Cordova, a tag de icon é inútil. Nem sequer é documentado no Cordova 3.0.0. Você deve usar a versão de documentação que combina com o cli que você está usando e não com o mais recente!

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

Em versões mais recentes : seu config.xml parece melhor para versões mais novas do Cordova. No entanto, ainda há muitas coisas que você pode querer saber. Se você decidir atualizar aqui, algumas coisas úteis serão modificadas:

  • Você não precisa da gap: namespace
  • Você precisa de para Android

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

Posso usar uma versão antiga do Cordova / Phonegap

Não, o recurso de ícone / canvas 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 icons / canvas inicial, portanto, construir localmente e manipular os icons só era possível com um gancho. Eu não sei a versão mínima para usar esse recurso, mas com 5.1.1 funciona bem em ambos os Cordova / Phonegap cli. Com Cordova 3.5 não funcionou para mim.

Edit : para Android você deve usar pelo menos 3.5.0

Como posso depurar o processo de compilation sobre icons?

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

 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 : você tem que usar o cordova build --verbose para obter logs do uso do comando cp para ver onde seus icons são copiados

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

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

Onde devo colocar os icons / canvass no meu projeto?

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

Você pode colocar seu ícone em qualquer lugar, mas o caminho que você usa deve ser relativo à raiz do projeto , e não www então tome cuidado! Isto está documentado, mas não claramente porque todos os exemplos estão usando res e você não sabe onde esta pasta é 🙁

Quero dizer, se você colocar o ícone em www/icon.png você deve include www em seu caminho.

Edit Mars 2016 : depois de atualizar minhas versões, agora parece que os icons são relativos à pasta www mas a documentação não foi alterada ( edição )

O funciona?

Não, não tem! .

No Android, parece que costumava trabalhar antes (quando o atributo de densidade ainda não era suportado?), Mas não mais. Veja esta questão Cordova

No iOS, parece que usar essa declaração global pode replace declarações mais específicas, portanto, tome cuidado e construa com --verbose para garantir que tudo funcione conforme o esperado.

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

Sim você pode. Você pode até usar o mesmo arquivo para o ícone e canvas inicial (apenas para testar!). Eu usei um arquivo de ícone “grande” de 65kb sem qualquer problema.

Qual é a diferença ao usar a tag da plataforma versus o atributo platform

  

é o mesmo que

    

Devo usar o intervalo: namespace se estiver usando o Phonegap?

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

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

Tanto quanto eu entendo, alguns resources com o gap: namespace podem estar disponíveis anteriormente no PhonegapBuild, em seguida, no Phonegap e, em seguida, sendo portado para Cordova (?)

O

obrigatório?

Pelo menos para o Android sim, é. Eu abri um problema com explicações adicionais.

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

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

Preciso de cordova-plugin-splashscreen ?

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

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

Existem ferramentas para ajudar você a fazer isso. O melhor para mim é http://makeappicon.com/, mas é necessário fornecer um endereço de e-mail.

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

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

Sim. Aqui está o meu verdadeiro config.xml

   x  x   x                                                                               

Uma boa fonte de exemplos são os kits iniciais. Como phonegap-start ou iniciador iônico

A partir do Cordova 3.5.0-0.2.6, o elemento no config.xml funciona com as seguintes ressalvas:

  1. O atributo src é um caminho relativo à sua pasta raiz do projeto. O rastreador de problemas sobre esse problema explica por que a mudança.

  2. O elemento sem resolução / dpi é documentado como o ícone usado por todas as plataformas como o ícone padrão. No entanto, no android cria, o ícone padrão é copiado apenas para a pasta drawable android, sem definir resoluções específicas. Isso faz com que você ícone personalizado aparecer na pasta /res/drawable , 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 no config.xml para cada resolução na plataforma Android.

Por exemplo, se a imagem do seu ícone estiver no caminho www/res/img/icon.png relação ao projeto raiz, as linhas no config.xml que o ícone do aplicativo no android funcione:

        

Com essa configuração em vigor, você pode ter um único ícone de imagem para todas as resoluções sobrescrevendo o ícone cordova padrão e sem assaltos personalizados. Simplesmente construindo com cordova build android deve fazer o truque.

Se você quiser uma maneira fácil de usar para adicionar icons automaticamente ao construir localmente ( cordova emulate ios , cordova run android , etc) dê uma olhada nesta essência:

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

Espero que isso comece a funcionar fora da checkbox em algum momento no futuro, aqui está o relatório de bug relevante sobre o 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

    

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

há icons específicos do 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 \ plataformas \ android \ ant-build \ res e não em \ plataformas \ android \ res

Para algumas pessoas que fizeram 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 e encontrei um conjunto separado de pastas drawable contendo o padrão ícone phonegap.

Mudando aqueles finalmente funcionou.

Como estou construindo e executando localmente e não usando o Adobe PhoneGap Build, alterar os icons em \ www \ res \ icon \ android também não funcionou.

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

  1. Adicione um arquivo 120×120 ao projeto, clicando com o botão direito do mouse no arquivo de projeto no Xcode e selecionando “Adicionar arquivos a” [Nome do Projeto] “…
  2. Vá para o arquivo info.plist no Xcode “Resources / [Your Project Name] -info.plist”
  3. Em “Arquivos de ícone (iOS 5) / Arquivos de ícone / ícone primários” altere “Item 2” para qualquer nome de arquivo que o arquivo tenha (chamei de “icon-120.png” que coloquei na pasta Project ao lado de todos os outros icons , embora isso não importe)

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

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

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

dentro

http://sofpt.miximages.com/cordova/images.html mas ele não faz tal comportamento correto neste momento … bug.

então eu acho que temos que colocá-los manualmente para cada plataforma. é claro que seria necessário remover isso da duplicação para a pasta www novamente. para mim, eu tive que replace totalmente o conteúdo na pasta www, porque simplesmente não funcionava com o hello world sem hackar um index.html de redirecionamento para encontrar alguma pasta aleatória estranha lá. Colocar a pasta res ao lado de www faz mais sentido, mas o que parece ser para mim causado por essa série de escolhas / falhas de design em cascata e confusas.

em alguns casos, os skripts internos da cordova não colocam os icons na pasta correta, portanto você pode ver o robô em vez do seu próprio ícone.

Faça uso do script de gancho.

três ganchos-your-cordovaphonegap-project-needs

Crie uma pasta “after_platform_add” na pasta hook e coloque / altere o último skript da devgirl.

Não esqueça de definir direitos executivos para o script, no linux "chmod 777

boa sorte!

Tudo o que fiz foi adicionar as linhas abaixo em config.xml

E funcionou totalmente bem

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

  

por exemplo:

  

Todas as formas de lembrar que você precisa usar a extensão .png

Eu também estou no meio de tentar entender como isso tudo se conecta.

Aqui está o que eu encontrei até agora no XCode, mas espero ser corrigido ou afirmado se minhas suposições estiverem corretas. Eu não encontrei um fora da checkbox de construir para xcode de cordova que aplica corretamente os icons. Como você eu atualizei todos os icons listados no config.xml, mas sem dados.

Assim…

Primeiro, eu costumo atualizar o config.xml na raiz do projeto com o da minha pasta “www” (isso eu faço por incerteza de que o www / config.xml tem alguma precedência ou se é aplicado mesmo)

Em segundo lugar, atualizo o “Build Phases” do projeto. Expandir “Copiar resources do pacote”, você já notou todas as imagens em “Recursos / icons”, “Recursos / splash”. Você também pode:

  • remova todos estes para evitar sobrescrever suas imagens OU
  • atualize todas essas imagens com as suas próprias (renomeando para o nome da imagem listado)

Como eu estava trabalhando nisso, você pode ser capaz de apenas minimamente atualizar imagens da guia “Resumo”.

Arraste e solte suas imagens de suas pastas de res para a imagem apropriada na guia “Resumo”. (res / icon / ios -> Ícones de aplicativos e res / screen / ios -> Imagens de boot). Eu faço isso apenas para iPhone, já que meu aplicativo é apenas para iPhone. Marque “pré-processado” 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 para “icon-57.png” (que agora mora na raiz do seu projeto, isso foi automaticamente adicionado à raiz quando você fez o arrastar e soltar.

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

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

Algo que também é útil na debugging de tudo isso, especialmente se você não fizer compilações locais … é baixar os arquivos XAP / IPA / APK como construídos a partir da nuvem 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 ao telefone.

Fazendo isso, posso ver que, para a plataforma Microsoft Phone, ela está ignorando todas as minhas tentativas de replace o ícone ou a canvas inicial. Se você replace o ApplicationIcon.png e o SplashScreenImage.jpg, redigitar o conjunto de pastas e renomeá-lo novamente como um arquivo .XAP, você poderá implantá-lo em seu telefone e ele funcionará perfeitamente. De alguma forma, há uma maneira de obter a construçã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.

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

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