Jak dodać ikonę aplikacji do projektów phonegap?

85

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" />
Markus
źródło
4
czy to jest to? kompilacja lokalna ignoruje plik konfiguracyjny? stackoverflow.com/questions/15018098/…
Markus
Markus ma rację, jego komentarz powinien być odpowiedzią
drodsou
1
Poświęciłem trochę czasu na zrobienie FAQ na temat wszystkiego, co powinieneś wiedzieć, aby debugować / sprawić, by ikony działały (cordova 5.1.1). Sprawdź stackoverflow.com/a/31674547/82609
Sebastien Lorber

Odpowiedzi:

67

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 foldery icons/i splashscreen/.

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

  1. Po umieszczeniu tam plików, cordova build iosodbuduj projekt za pomocą ORAZ użyj polecenia menu „Wyczyść produkt” xCode. Bez tego nadal będziesz widzieć symbole zastępcze Phonegap.

  2. 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.

  3. 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]zamiast icon-57-2x.png.

  4. 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).

Wytze
źródło
czy pozostawienie nazw plików w config.xml nie zepsuje kompilacji z usługą kompilacji phonegap? działa to tylko dlatego, że lokalna kompilacja ignoruje plik config.xml. co jeśli phonegap zdecyduje się go przeczytać? Sugerowałbym skopiowanie tych plików za pomocą jakiegoś procesu kompilacji.
Markus,
1
Cześć Markus, nie mam doświadczenia z usługą Phonegap Build (poza tym, że było to zaskakujące, kiedy wypróbowałem ją krótką i nieudaną). Więc nie mogę ocenić twojego komentarza, ale wierzę na słowo. Dlatego moja odpowiedź jest skierowana tylko do tych, którzy sami budują.
Wytze,
1
Ta odpowiedź jest nieaktualna (ale działa w wersji 3.0.0). Do obsługi tego nie jest już wymagany żaden proces. Sprawdź dokument dotyczący krawędzi i moją odpowiedź tutaj stackoverflow.com/a/31674547/82609
Sebastien Lorber
46

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="[email protected]" 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

Sebastien Lorber
źródło
2
Zbudowałem małe narzędzie CLI (wśród wielu innych), które obsługuje ikonę aplikacji, ekran powitalny i generowanie podglądu https://github.com/mmacmillan/cordova-imaging , wspominam o tym, ponieważ jest napędzane przez plik konfiguracyjny, który jest dobrze udokumentowany pod względem rozmiary / wymiary / lokalizacje i zawiera linki do dokumentacji specyficznej dla platformy; może to pomóc uzupełnić szczegółową odpowiedź, której udzielenie poświęciłeś czasowi
Mike MacMillan,
Zrobiłem to wszystko, z Cordova 5.1 pliki są kopiowane w .apk, jak wspomniałeś, ale tablet nadal nie wyświetla nowej ikony. Jakieś pomysły?
Gringo Suave
Trzeba było odinstalować starą wersję aplikacji, a następnie zainstalować nową. Wtedy tablet zauważył, że coś się zmieniło. Tak więc udało mi się uzyskać nową ikonę.
Gringo Suave
1
Cóż za fantastyczna odpowiedź! Skorzystałem z Twojej sugestii, cordova build android --verboseaby zidentyfikować i rozwiązać mój problem. Dzięki!
Sarah
Dobra odpowiedź Sebastien;) kciuki w górę
Alaeddine
32

Począwszy od Cordova 3.5.0-0.2.6 <icon />element w config.xml działa z następującymi zastrzeżeniami:

  1. srcAtrybut jest ścieżka względna do katalogu głównego projektu. Narzędzie do śledzenia problemów dotyczące tego problemu powoduje zmianę.

  2. <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/drawablefolderze 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 ikony config.xmldla każdej rozdzielczości na platformie Android.

Na przykład, jeśli obraz ikony znajduje się na ścieżce www/res/img/icon.pngwzględem projektu głównego, te wiersze config.xmlsprawiają, że ikona aplikacji w systemie Android działa:

<!-- Default application icon -->
<icon src="www/res/img/icon.png" />
<!--
    Default icon should work, but cordova don't overwrite
    the default on all densities
-->
<icon src="www/res/img/icon.png" platform="android" density="ldpi" />
<icon src="www/res/img/icon.png" platform="android" density="mdpi" />
<icon src="www/res/img/icon.png" platform="android" density="hdpi" />
<icon src="www/res/img/icon.png" platform="android" density="xhdpi" />

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 androidpowinno załatwić sprawę.

Ronoaldo Pereira
źródło
Czy masz link do zgłoszenia błędu dla numeru 2? Właśnie natknąłem się na ten problem w nowym projekcie i na początku mnie to zdezorientowało. Chciałbym śledzić postępy, aby wiedzieć, kiedy jest naprawiony, jeśli to możliwe. Twoje zdrowie.
Mike,
omg wreszcie działa! Dziękuję za 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" />
Tha Leang
@Ronoaldo Periera your'e my savior !! <ikona ..> tag dla każdej gęstości! znakomity!!
Hittz
Domyślna ikona src nie działa dobrze na Androida, więc w rzeczywistości jest ignorowana! Sprawdź moją odpowiedź tutaj: stackoverflow.com/a/31674547/82609
Sebastien Lorber
8

Jeśli chcesz łatwy w użyciu sposób na dodanie ikony automatycznie podczas budowania lokalnie ( cordova emulate ios, cordova run androiditp), 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

Linus Unnebäck
źródło
Linus, jak wyjaśniono w mojej odpowiedzi, tak, teraz działa, ale wydaje się, że niektóre rzeczy się zepsuły, sprawdź stackoverflow.com/a/31674547/82609
Sebastien Lorber
4

Musisz stworzyć plik config.xml, w którym umieścisz plik ikony

<?xml version="1.0" encoding="ISO-8859-1" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
   xmlns:gap = "http://phonegap.com/ns/1.0"
   id        = "example"
   version    = "1.0.0">

   <icon src="icon.png" />
</widget>

Sprawdź: https://build.phonegap.com/docs/config-xml

są ikony specyficzne dla iOS

João Pimentel Ferreira
źródło
mój plik konfiguracyjny zawiera już wszystkie ikony. jest tworzony domyślnie podczas tworzenia nowego projektu phonegap
Markus
2
Nie działa. Działało z PG Build, ale Cordova 3.x cli nie bierze pod uwagę ikon określonych w config.xml (ani icon.png i screen.png w katalogu głównym). Szukam też odpowiedzi na to pytanie.
lefnire
Tak config.xml jest przeznaczony tylko do kompilacji PhoneGap! ktoś wie, jak to zrobić ?!
Michael,
W przypadku Cordova 3.5.0-0.2.6 obsługa ikon działa, z pewnymi zastrzeżeniami w systemie Android. Zobacz moją odpowiedź po szczegóły.
Ronoaldo Pereira 10-14
4

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.

Elixander Chen
źródło
3

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.

  1. Dodaj plik 120x120 do projektu, klikając prawym przyciskiem myszy plik projektu w Xcode i wybierając „Dodaj pliki do” [Nazwa Twojego projektu] ”...
  2. Przejdź do pliku info.plist w Xcode „Resources / [Your Project Name] -info.plist”
  3. W sekcji „Pliki ikon (iOS 5) / Primary Icon / Icon files” zmień „Item 2” na dowolną nazwę pliku (nazwałem mój „icon-120.png”, który umieściłem w folderze Projekt obok wszystkich innych ikon , choć to nie powinno mieć znaczenia)

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! :)

Luddig
źródło
3

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.

MistereeDevlord
źródło
2

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!

Masood Moshref
źródło
1

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

Ali Sadiq
źródło
Dzięki człowiekowi. Próbowałem umieścić jedną ikonę w res / icon.png (tak jak w przykładach dokumentacji ...) i nigdy nie działała na iOS. W końcu zrezygnowałem z tego zagmatwanego folderu „res” i umieściłem ikonę pod „www”, tak jak sugerowałeś, i dla mnie też działało to jak urok! Działa to w przypadku Cordova 6.0.0. platforma ios.
firepol
1

Po prostu dodaj ten kod do pliku config.xml

<icon src="path to your icon image">

na przykład:

<icon src="icon.png">

Zawsze pamiętaj, że musisz używać rozszerzenia .png

Jobincs
źródło
spróbuj użyć obrazów png
Jobincs
0

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 LUB
  • zaktualizuj 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.

Sam Tsai
źródło
Zbudowałem projekt za pomocą Cordova 3.0.3, ale wyobrażam sobie, że tak samo jest z kompilacjami phonegap.
Sam Tsai
0

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.

Michael Blankenship
źródło