FAQ: EKRAN IKONY / SPLASH (Cordova 5.x / 2015)
Przedstawiam swoją odpowiedź jako ogólne FAQ, które mogą pomóc w rozwiązaniu wielu problemów, które napotkałem podczas pracy z ikonami / ekranami powitalnymi. Może się okazać, tak jak ja, że dokumentacja nie zawsze jest bardzo przejrzysta ani aktualna. Prawdopodobnie trafi to do dokumentacji StackOverflow, gdy będzie dostępna.
Po pierwsze: udzielenie odpowiedzi na pytanie
Jak mogę dodać niestandardowe ikony aplikacji na iOS i Androida za pomocą phonegap?
W swojej wersji Cordovaicon tag jest bezużyteczny. Nie jest to nawet udokumentowane w Cordova 3.0.0. Powinieneś używać wersji dokumentacji, która pasuje do używanej przeglądarki, a nie najnowszej!
Znacznik ikony w ogóle nie działa dla Androida przed wersją 3.5.0, zgodnie z tym, co widzę w różnych wersjach dokumentacji. W 3.4.0 nadal zalecają ręczne kopiowanie plików
W nowszych wersjach : config.xmlwyglądasz lepiej w nowszych wersjach Cordova. Jednak nadal jest wiele rzeczy, które możesz chcieć wiedzieć. Jeśli zdecydujesz się na aktualizację, oto kilka przydatnych rzeczy do zmodyfikowania:
- Nie potrzebujesz
gap:przestrzeni nazw
- Potrzebujesz
<preference name="SplashScreen" value="screen" />Androida
Oto więcej szczegółów na temat pytań, które możesz sobie zadać, próbując poradzić sobie z ikonami i ekranem powitalnym:
Czy mogę użyć starej wersji Cordova / Phonegap
Nie, funkcja ikony / ekranu powitalnego nie była dostępna w poprzednich wersjach Cordova, więc musisz użyć najnowszej wersji. W poprzednich wersjach tylko Phonegap Build obsługiwał ikony / ekran powitalny, więc budowanie lokalne i obsługa ikon była możliwa tylko za pomocą haka. Nie znam minimalnej wersji, aby korzystać z tej funkcji, ale z 5.1.1 działa dobrze zarówno w Cordova / Phonegap CLI. Z Cordova 3.5 to nie zadziałało.
Edycja : dla Androida musisz użyć co najmniej 3.5.0
Jak mogę debugować proces kompilacji dotyczący ikon?
CLI używa polecenia CP. Jeśli podasz nieprawidłową ścieżkę ikony, wyświetli się cpbłąd:
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
Edycja : musisz użyć, cordova build <platform> --verboseaby uzyskać dzienniki użycia poleceń cp, aby zobaczyć, gdzie Twoje ikony są kopiowane
Ikony powinny znaleźć się w folderze zgodnie z konfiguracją. U mnie trafia do wielu podfolderów w:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Następnie możesz znaleźć plik APK i otworzyć go jako archiwum zip, aby sprawdzić, czy ikony są obecne. Muszą znajdować się w res/drawable*folderze, ponieważ jest to specjalny folder dla Androida.
Gdzie powinienem umieścić ikony / ekrany powitalne w moim projekcie?
W wielu przykładach znajdziesz ikony / ekrany powitalne zadeklarowane w resfolderze. Jest resto specjalny folder Androida w wyjściowym pliku APK, ale nie oznacza to, że musisz użyć resfolderu w swoim projekcie.
Możesz umieścić swoją ikonę w dowolnym miejscu, ale ścieżka, której używasz, musi być względna w stosunku do katalogu głównego projektu , wwwwięc nie uważaj! Jest to udokumentowane, ale nie jest to jasne, ponieważ wszystkie przykłady są używane resi nie wiesz, gdzie jest ten folder :(
Mam na myśli to, że jeśli umieścisz w sobie ikonę www/icon.png, absolutnie musisz ją włączyć wwwna swojej drodze.
Edytuj Mars 2016 : po aktualizacji moich wersji wygląda na to, że ikony odnoszą się do wwwfolderu, ale dokumentacja nie została zmieniona ( problem )
Działa <icon src="icon.png"/>?
Nie! .
Na Androidzie wygląda na to, że działał wcześniej (kiedy atrybut gęstości nie był jeszcze obsługiwany?), Ale już nie. Zobacz ten numer Cordova
W systemie iOS wydaje się, że użycie tej globalnej deklaracji może zastąpić bardziej szczegółowe deklaracje, więc uważaj i kompiluj, --verboseaby upewnić się, że wszystko działa zgodnie z oczekiwaniami.
Czy mogę użyć tego samego pliku ikony / ekranu powitalnego dla wszystkich gęstości.
Tak, możesz. Możesz nawet użyć tego samego pliku zarówno dla ikony, jak i ekranu powitalnego (tylko do przetestowania!). Bez problemu użyłem "dużego" pliku ikony o wielkości 65kb.
Jaka jest różnica między użyciem tagu platformy a atrybutu platformy
<icon src="icon.png" platform="android" density="ldpi" />
jest taki sam jak
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
Czy powinienem użyć luki: przestrzeń nazw, jeśli używasz Phonegap?
Z mojego doświadczenia wynika, że nowe wersje Phonegap i Cordova są w stanie zrozumieć deklaracje ikon bez używania gap:przestrzeni nazw xml.
Jednak wciąż czekam na poprawną odpowiedź tutaj: wtyczka cordova / phonegap dodaj VS config.xml
O ile rozumiem, niektóre funkcje z gap:przestrzenią nazw mogą być dostępne wcześniej w PhonegapBuild, a następnie w Phonegap, a następnie przeniesione do Cordova (?)
Jest <preference name="SplashScreen" value="screen" />wymagane?
Przynajmniej na Androida tak. Otworzyłem numer z dodatkowymi wyjaśnieniami.
Czy kolejność deklaracji ikon ma znaczenie?
Tak! Może nie ma to żadnego wpływu na Androida, ale według moich testów ma na iOS. Jest to nieoczekiwane i nieudokumentowane zachowanie, więc otworzyłem kolejny problem .
Czy potrzebuję cordova-plugin-splashscreen?
Tak, jest to absolutnie wymagane, jeśli chcesz, aby ekran powitalny działał. Dokumentacja jest niejasna ( problem ) i pomyślmy, że wtyczka jest wymagana tylko do oferowania javascript API na ekranie powitalnym.
Jak mogę szybko zmienić rozmiar obrazów dla wszystkich szerokości / wysokości / gęstości
Istnieją narzędzia, które Ci w tym pomogą. Najlepszym dla mnie jest http://makeappicon.com/, ale wymaga podania adresu e-mail.
Inne możliwe rozwiązania to:
Czy możesz podać przykładową konfigurację?
Tak. Oto mój prawdziwyconfig.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>
Dobrym źródłem przykładów są zestawy startowe. Jak phonegap-start lub Ionic starter