FAQ: SCHERMO ICONA / SPLASH (Cordova 5.x / 2015)
Presento la mia risposta come una FAQ generale che può aiutarti a risolvere molti problemi che ho riscontrato durante l'utilizzo di icone / schermate iniziali. Potresti scoprire come me che la documentazione non è sempre molto chiara né aggiornata. Questo probabilmente andrà alla documentazione di StackOverflow quando disponibile.
Primo: rispondere alla domanda
Come posso aggiungere icone di app personalizzate per iOS e Android con phonegap?
Nella tua versione di Cordova il icontag è inutile. Non è nemmeno documentato in Cordova 3.0.0. Dovresti usare la versione della documentazione che si adatta al cli che stai usando e non l'ultima!
Il tag icon non funziona affatto per Android prima della versione 3.5.0 secondo quanto posso vedere nelle diverse versioni della documentazione. In 3.4.0 consigliano ancora di copiare manualmente i file
Nelle versioni più recenti : il tuo config.xmlaspetto è migliore per le nuove versioni di Cordova. Tuttavia ci sono ancora molte cose che potresti voler sapere. Se decidi di aggiornare ecco alcune cose utili da modificare:
- Non hai bisogno dello
gap:spazio dei nomi
- Hai bisogno
<preference name="SplashScreen" value="screen" />per Android
Ecco ulteriori dettagli sulle domande che potresti chiederti quando cerchi di gestire le icone e la schermata iniziale:
Posso usare una vecchia versione di Cordova / Phonegap
No, la funzione icona / splashscreen non era nelle versioni precedenti di Cordova, quindi devi usare una versione recente. Nelle versioni precedenti, solo Phonegap Build gestiva le icone / schermata iniziale, quindi la creazione locale e la gestione delle icone era possibile solo con un hook. Non conosco la versione minima per utilizzare questa funzione ma con 5.1.1 funziona bene sia in Cordova / Phonegap cli. Con Cordova 3.5 non ha funzionato per me.
Modifica : per Android devi usare almeno 3.5.0
Come posso eseguire il debug del processo di creazione delle icone?
La cli usa un comando CP. Se fornisci un percorso dell'icona non valido, verrà visualizzato un cperrore:
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
Modifica : è necessario cordova build <platform> --verboseottenere i registri dell'utilizzo del comando cp per vedere dove vengono copiate le icone
Le icone dovrebbero andare in una cartella secondo il file config. Per me va in molte sottocartelle in:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Quindi puoi trovare l'APK e aprirlo come archivio zip per verificare che le icone siano presenti. Devono essere in una res/drawable*cartella perché è una cartella speciale per Android.
Dove devo mettere le icone / schermate iniziali nel mio progetto?
In molti esempi troverai le icone / schermate iniziali dichiarate all'interno di una rescartella. Questa resè una cartella Android speciale nell'APK di output, ma non significa che devi usare una rescartella nel tuo progetto.
Puoi mettere la tua icona ovunque, ma il percorso che usi deve essere relativo alla radice del progetto , e non è wwwcosì attento! Questo è documentato, ma non chiaramente perché tutti gli esempi stanno usando rese non sai dove si trova questa cartella :(
Voglio dire, se metti l'icona in www/icon.pngte devi assolutamente includerla wwwnel tuo percorso.
Modifica Mars 2016 : dopo aver aggiornato le mie versioni, ora sembra che le icone siano relative alla wwwcartella ma la documentazione non è stata modificata ( problema )
Funziona <icon src="icon.png"/>?
No non lo fa! .
Su Android, sembra che funzionasse prima (quando l'attributo di densità non era ancora supportato?) Ma non più. Vedi questo problema di Cordova
Su iOS, sembra che l'utilizzo di questa dichiarazione globale possa sovrascrivere dichiarazioni più specifiche, quindi fai attenzione e crea con --verboseper assicurarti che tutto funzioni come previsto.
Posso usare lo stesso file di icona / schermata iniziale per tutte le densità.
Si, puoi. Puoi anche usare lo stesso file sia per l'icona che per la schermata iniziale (solo per testare!). Ho usato un file icona "grande" di 65kb senza alcun problema.
Qual è la differenza quando si utilizza il tag della piattaforma rispetto all'attributo della piattaforma
<icon src="icon.png" platform="android" density="ldpi" />
equivale a
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
Devo usare il gap: namespace se uso Phonegap?
Nella mia esperienza le nuove versioni di Phonegap o Cordova sono entrambe in grado di comprendere le dichiarazioni di icone senza utilizzare alcuno gap:spazio dei nomi xml.
Tuttavia sto ancora aspettando una risposta valida qui: cordova / phonegap plugin add VS config.xml
Per quanto ho capito, alcune funzionalità con lo gap:spazio dei nomi potrebbero essere disponibili prima in PhonegapBuild, quindi in Phonegap e quindi essere portate su Cordova (?)
È <preference name="SplashScreen" value="screen" />richiesto?
Almeno per Android sì, lo è. Ho aperto un problema con spiegazioni aggiuntive.
L'ordine di dichiarazione delle icone è importante?
Sì lo fa! Potrebbe non avere alcun impatto su Android ma ha su iOS secondo i miei test. Questo è un comportamento imprevisto e non documentato, quindi ho aperto un altro problema .
Mi serve cordova-plugin-splashscreen?
Sì, è assolutamente necessario se vuoi che la schermata iniziale funzioni. La documentazione non è chiara ( problema ) e pensiamo che il plugin sia richiesto solo per offrire un'API javascript con schermata iniziale.
Come posso ridimensionare velocemente le immagini per tutte le larghezze / altezze / densità
Ci sono strumenti per aiutarti a farlo. Il migliore per me è http://makeappicon.com/ ma richiede di fornire un indirizzo email.
Altre possibili soluzioni sono:
Puoi darmi un esempio di configurazione?
Sì. Ecco il mio veroconfig.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>
Una buona fonte di esempi sono gli starter kit. Come il phonegap-start o lo ionico