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:
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="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>
Uma boa fonte de exemplos são os kits iniciais. Como phonegap-start ou Ionic starter