Stworzyłem nowy projekt phonegap (v 3.0.0-0.14.0) z domyślnym config.xml, a następnie dodałem platformy iOS i Android.
Konfiguracja zawiera wszystkie ścieżki do wszystkich ikon platform.
Zastąpiłem domyślne ikony systemów iOS i Android, aby ścieżka i nazwa nadal pasowały do tych plików PNG.
Podczas pracy w symulatorze ikony nie pojawiają się. Sprawdziłem to w xCode, gdzie jest napisane, że folder „Zasoby” dla ikon nadal zawiera domyślne ikony Phonegap. To samo z Androidem.
Co ja robię źle?
Jak mogę dodać niestandardowe ikony aplikacji na iOS i Androida za pomocą phonegap?
dzięki
mój 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" />
Odpowiedzi:
Na szczęście w dokumentach jest trochę informacji o obrazach powitalnych, które zaprowadziły mnie na drogę do znalezienia właściwej lokalizacji dla obrazów ikon. Więc oto jest.
Gdzie umieszczane są pliki Po zbudowaniu projektu przy użyciu interfejsu wiersza poleceń „cordova build ios” powinieneś mieć w folderze pełną strukturę plików dla swojej aplikacji na iOS
platforms/ios/
.Wewnątrz tego folderu znajduje się folder z nazwą Twojej aplikacji. Który z kolei zawiera
resources/
katalog, w którym znajdziesz folderyicons/
isplashscreen/
.W folderze ikon znajdziesz cztery pliki ikon (dla 57px i 72px, każdy w wersji zwykłej i @ 2x). To są ikony zastępcze Phonegap, które widziałeś do tej pory.
Co robić
Wszystko, co musisz zrobić, to zapisać pliki ikon w tym folderze. Więc to jest:
YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons
To samo dotyczy plików ekranu powitalnego.
Uwagi
Po umieszczeniu tam plików,
cordova build ios
odbuduj projekt za pomocą ORAZ użyj polecenia menu „Wyczyść produkt” xCode. Bez tego nadal będziesz widzieć symbole zastępcze Phonegap.Najrozsądniej jest zmienić nazwy plików na sposób iOS / Apple (np. [email protected] itp.) Zamiast edytować nazwy w info.plist lub config.xml. Przynajmniej to zadziałało dla mnie.
A tak przy okazji, zignoruj dziwną ścieżkę i dziwną nazwę pliku podaną dla ikon w config.xml (tj
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
.). Po prostu zostawiłem tam te definicje, a ikony pokazały się dobrze, mimo że moja ikona 114px została nazwana[email protected]
zamiasticon-57-2x.png
.Nie używaj pliku config.xml, aby zapobiec efektowi połysku Apple na ikonie. Zamiast tego zaznacz pole w xCode (kliknij tytuł projektu w lewej kolumnie nawigacji, wybierz aplikację pod nagłówkiem Cel i przewiń w dół do sekcji ikon).
źródło
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
W swojej wersji Cordova
icon
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.xml
wyglą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:gap:
przestrzeni nazw<preference name="SplashScreen" value="screen" />
AndroidaOto 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ę
cp
błąd:Edycja : musisz użyć,
cordova build <platform> --verbose
aby uzyskać dzienniki użycia poleceń cp, aby zobaczyć, gdzie Twoje ikony są kopiowaneIkony 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
res
folderze. Jestres
to specjalny folder Androida w wyjściowym pliku APK, ale nie oznacza to, że musisz użyćres
folderu 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 ,
www
więc nie uważaj! Jest to udokumentowane, ale nie jest to jasne, ponieważ wszystkie przykłady są używaneres
i 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ćwww
na swojej drodze.Edytuj Mars 2016 : po aktualizacji moich wersji wygląda na to, że ikony odnoszą się do
www
folderu, 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,
--verbose
aby 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
jest taki sam jak
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 prawdziwy
config.xml
Dobrym źródłem przykładów są zestawy startowe. Jak phonegap-start lub Ionic starter
źródło
cordova build android --verbose
aby zidentyfikować i rozwiązać mój problem. Dzięki!Począwszy od Cordova 3.5.0-0.2.6
<icon />
element w config.xml działa z następującymi zastrzeżeniami:src
Atrybut jest ścieżka względna do katalogu głównego projektu. Narzędzie do śledzenia problemów dotyczące tego problemu powoduje zmianę.<icon src="..." />
Elementem bez rezolucji / DPI jest udokumentowana jako ikony używane przez wszystkich platformach jako domyślną ikoną. Jednak w kompilacjach systemu Android domyślna ikona jest kopiowana tylko do folderu do rysowania systemu Android, bez określonych rozdzielczości. To sprawia, że w/res/drawable
folderze pojawia się niestandardowa ikona , a domyślna ikona Cordova z określonymi rozdzielczościami istnieje w innych folderach w końcowym apk (tj/res/drawable-ldpi
.). Musisz dodać jeden element ikonyconfig.xml
dla każdej rozdzielczości na platformie Android.Na przykład, jeśli obraz ikony znajduje się na ścieżce
www/res/img/icon.png
względem projektu głównego, te wierszeconfig.xml
sprawiają, że ikona aplikacji w systemie Android działa:Dzięki tej konfiguracji możesz mieć jedną ikonę obrazu dla wszystkich rozdzielczości, zastępującą domyślną ikonę Cordova i bez niestandardowych haczyków. Po prostu budowanie za pomocą
cordova build android
powinno załatwić sprawę.źródło
density
. Zmieniłem się<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
na<icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
Jeśli chcesz łatwy w użyciu sposób na dodanie ikony automatycznie podczas budowania lokalnie (
cordova emulate ios
,cordova run android
itp), przyjrzeć się tej GIST:https://gist.github.com/LinusU/7515016
Miejmy nadzieję, że w przyszłości zacznie to działać po wyjęciu z pudełka, oto odpowiedni raport o błędzie dotyczący projektu Cordova:
https://issues.apache.org/jira/browse/CB-2606
źródło
Musisz stworzyć plik config.xml, w którym umieścisz plik ikony
Sprawdź: https://build.phonegap.com/docs/config-xml
są ikony specyficzne dla iOS
źródło
Ponieważ większość odpowiedzi jest skierowana do iOS, oto rozwiązanie do zmiany ikony w systemie Android.
Dla Android:
Wprowadź zmiany w lokalizacji <lokalizacja projektu> \ platform \ android \ ant-build \ res, a nie <lokalizacja projektu> \ platform \ android \ res
Dla niektórych osób wprowadzanie zmian w tej drugiej lokalizacji mogło zadziałać, ale po zauważeniu kopiowania Phonegap z \ android \ res do \ android \ ant-build \ res, zdecydowałem się tam sprawdzić i znalazłem oddzielny zestaw folderów do rysowania zawierający domyślne ikona phonegap.
Zmiana tych w końcu zadziałała.
Ponieważ buduję i uruchamiam lokalnie i nie używam Adobe PhoneGap Build, zmiana ikon w <lokalizacja projektu> \ www \ res \ icon \ android też nie działała.
źródło
Używam phonegap 3.1.0-0.15.0, ponieważ iOS7 zmienił rozdzielczość na 120x120px. Właśnie dodałem plik o tych wymiarach do projektu, a następnie zmieniłem plik info.plist.
Więcej informacji można znaleźć tutaj: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13
Aby naprawić ekran powitalny w iOS, właśnie wkleiłem nowe pliki o tych samych wymiarach i tych samych nazwach, nadpisując stare. Pamiętaj tylko, aby przejść do Produktu> Wyczyść na pasku menu w Xcode (skrót Shift + Command + K) i powinno działać dobrze! :)
źródło
W cordova 3.3.1-0.1.2 oczekiwane zachowanie nie działa prawidłowo.
w
http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
wyraźnie stwierdza, że masz je umieścić w głównym folderze www w folderze o nazwie res i ikony, które są zgodne z określoną konwencją nazewnictwa zamiast w określony sposób, który można dostosować do oryginalnego pliku config.xml (w którym wskazujesz wybrany plik, co było / jest znacznie lepsze). powinno to zająć stamtąd dla każdej platformy i umieścić je na platformach /? android? / res / drawable-? dpi / icon.png, ale w tej chwili nie ma takiego poprawnego zachowania ... błąd.
więc myślę, że musimy ręcznie umieścić je tam dla każdej platformy. oczywiście musiałoby to usunąć z ponownego skopiowania do folderu www. dla mnie i tak musiałem całkowicie podmienić zawartość w głównym folderze www, ponieważ po prostu nie działał nawet z hello world bez włamania się do redirect index.html, aby znaleźć tam jakiś dziwny losowy folder. Umieszczenie folderu res obok www ma największy sens, ale cokolwiek wydaje mi się, że jest to spowodowane serią kaskadowych i mylących wyborów / wad projektowych.
źródło
w niektórych przypadkach wewnętrzne skripty cordova nie umieszczają ikon w odpowiednim folderze, dlatego zamiast własnej ikony możesz zobaczyć robota f *** cordova.
Skorzystaj ze skryptu przechwytującego;)
potrzeby-projektu-trzech-haczyków-na-kordovaphonegap
Utwórz folder „after_platform_add” w folderze hooków i umieść / zmień ostatni skript z devgirl.
Nie zapomnij ustawić praw wykonawczych do skryptu w systemie Linux
"chmod 777 <script>"
powodzenia!
źródło
Wszystko, co zrobiłem, to dodanie poniższych wierszy w config.xml
<icon src="www/img/appIcon.png" />
I działało całkowicie dobrze
źródło
Po prostu dodaj ten kod do pliku config.xml
na przykład:
Zawsze pamiętaj, że musisz używać rozszerzenia .png
źródło
Jestem w trakcie próbowania zrozumienia, jak to wszystko się łączy.
Oto, co do tej pory znalazłem w XCode, ale mam nadzieję, że zostanie poprawione lub potwierdzone, jeśli moje założenia są poprawne. Nie znalazłem gotowej kompilacji do Xcode firmy Cordova, która poprawnie stosuje ikony. Tak jak ty zaktualizowałem wszystkie ikony wymienione w config.xml, ale nie ma kości.
Więc...
Po pierwsze, zwykle aktualizuję plik config.xml w katalogu głównym projektu, wpisując ten w moim folderze „www” (robię to z niepewności, czy www / config.xml ma jakikolwiek priorytet lub czy jest w ogóle stosowany)
Po drugie, aktualizuję „Fazy budowy” projektu. Rozwiń „Kopiuj zasoby pakietu”, zauważyłeś już wszystkie obrazy w „Zasobach / ikonach”, „Zasobach / obrazku”. Możesz albo:usuń wszystkie te elementy, aby uniknąć nadpisywania obrazów LUBzaktualizuj wszystkie te obrazy własnymi (zmiana nazwy na podaną nazwę obrazu)Kiedy nad tym pracowałem, możesz po prostu zaktualizować obrazy z karty „Podsumowanie”.
Przeciągnij i upuść obrazy z folderów res do odpowiedniego obrazu na karcie „Podsumowanie”. (res / icon / ios -> ikony aplikacji i res / screen / ios -> uruchom obrazy). Robię to tylko dla iPhone'a, ponieważ moja aplikacja to tylko iPhone. Zaznacz „prerenderowany”, jeśli nie chcesz, aby pojawił się połysk.
Następnie zaktualizuj plik „icon.png”, do którego odwołuje się plik plist projektu: PROJECT_NAME-Info.plist lub na karcie „Informacje”, patrząc na cel projektu. Zmień jego nazwę na „icon-57.png” (która teraz znajduje się w katalogu głównym twojego projektu, została automatycznie dodana do katalogu głównego, kiedy wykonałeś przeciąganie i upuszczanie.
Zbuduj i powinieneś zaktualizować ikonę aplikacji.
źródło
Zwracam tylko uwagę, że właśnie zmieniłem plik config.xml, aby wyglądał jak przykład Sebastiana.
Coś, co jest również pomocne w debugowaniu tego wszystkiego, zwłaszcza jeśli nie tworzysz lokalnych kompilacji ... to pobranie plików XAP / IPA / APK zbudowanych z chmury PhoneGap i utworzenie folderów dla każdego z nich. Zmień nazwę każdego pliku na rozszerzenie .ZIP i wyodrębnij zawartość każdego z nich do odpowiednich folderów. Zasadniczo możesz teraz zobaczyć, co znajduje się w paczce, która zostanie wysłana do telefonu.
Robiąc to, widzę, że w przypadku platformy Microsoft Phone w dużej mierze ignoruje wszystkie moje próby zastąpienia ikony lub ekranu powitalnego. Jeśli następnie zastąpisz ApplicationIcon.png i SplashScreenImage.jpg, a następnie ponownie spakuj zestaw folderów i ponownie zmień jego nazwę na plik .XAP, możesz następnie wdrożyć go na telefonie i będzie działać idealnie. W jakiś sposób istnieje sposób, aby po prostu uzyskać kompilację PhoneGap, aby zamienić pliki icon.png i icon.jpg w te dwa pliki. Być może sugestia Masooda jest tutaj możliwa i wykorzystać skrypt przechwytujący.
Wykonanie tego samego dla pliku .IPA (iOS) powoduje powstanie kilku plików, takich jak icon-something.png na poziomie nadrzędnym powyżej www. Wszystkie wydają się być puste.
Wykonanie tego samego dla pliku .APK (Android) skutkuje zestawem folderów res / drawable-coś i wydaje się, że w każdym z nich znajduje się moja ikona.png. To najbardziej zbliżony do sukcesu, jaki mogę osiągnąć w tej chwili.
źródło