Wie füge ich App-Icon in Phonegap-Projekten hinzu?

Ich habe ein neues Projekt phonegap (v 3.0.0-0.14.0) mit der Standardkonfiguration config.xml erstellt und dann iOS- und Android-Plattformen hinzugefügt.

Die Konfiguration enthält alle Pfade zu allen Plattformsymbolen.

Ich habe die Standardsymbole für iOS und Android überschrieben, sodass Pfad und Name immer noch mit diesen PNGs übereinstimmen.

Beim Ausführen im Simulator werden die Symbole nicht angezeigt. Ich habe es in xCode nachgeschlagen, wo es mir sagt, dass der Ordner “Ressourcen” für die Symbole immer noch die PhoneGap Standardsymbole enthält. Gleiches gilt für Android.

Was mache ich falsch?

Wie kann ich benutzerdefinierte App-Symbole für iOS und Android mit PhoneGap hinzufügen?

Vielen Dank

Meine Konfiguration.xml

              

Glücklicherweise gibt es in den Docs ein paar Details über die Splash-Bilder, die mich auf den richtigen Weg bringen, um auch für die Icon-Bilder den richtigen Ort zu finden. Also hier geht es.

Wo die Dateien abgelegt werden Sobald Sie Ihr Projekt mit der Befehlszeilenschnittstelle “cordova build ios” erstellt haben, sollten Sie eine vollständige Dateistruktur für Ihre iOS-App im Ordner platforms/ios/ .

In diesem Ordner befindet sich ein Ordner mit dem Namen Ihrer App. Das wiederum enthält ein resources/ Verzeichnis, in dem Sie die icons/ und splashscreen/ Ordner finden.

Im Icons-Ordner finden Sie vier Icon-Dateien (für 57px und 72 px, jeweils in regulärer und @ 2x-Version). Dies sind die Phonegap-Platzhalter-Symbole, die Sie bisher gesehen haben.

Was ist zu tun

Sie müssen lediglich die Symboldateien in diesem Ordner speichern. So das ist:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

Gleiches gilt für Splashscreen-Dateien.

Anmerkungen

  1. Nachdem Sie die Dateien dort abgelegt haben, erstellen Sie das Projekt mit cordova build ios und verwenden Sie den Menübefehl ‘Clean product’ von xCode. Andernfalls sehen Sie immer noch die Phonegap-Platzhalter.

  2. Es ist am klügsten, Ihre Dateien auf iOS / Apple-Weise umzubenennen (zB icon-72@2x.png usw.), anstatt die Namen in der Datei info.plist oder config.xml zu bearbeiten. Zumindest hat das für mich funktioniert.

  3. Und ignorieren Sie übrigens den seltsamen Pfad und den seltsamen Dateinamen, der für die Symbole in der Datei config.xml angegeben wurde (zB ). Ich habe diese Definitionen einfach dort gelassen, und die Icons sind gut gelungen, obwohl mein 114px-Icon den Namen icon@2x.png anstelle von icon-57-2x.png .

  4. Verwenden Sie config.xml nicht, um den Glanzeffekt von Apple auf das Symbol zu verhindern. Aktivieren Sie stattdessen das Kontrollkästchen in xCode (klicken Sie auf den Projekttitel in der linken Navigationsspalte, wählen Sie Ihre App unter der Zielkopfzeile aus und scrollen Sie nach unten zum Abschnitt “Symbole”).

FAQ: SYMBOL / SPRITZSCHIRM (Cordova 5.x / 2015)

Ich präsentiere meine Antwort als eine allgemeine FAQ, die Ihnen helfen kann, viele Probleme zu lösen, die ich beim Umgang mit Icons / Startbildschirmen hatte. Sie können herausfinden, dass die Dokumentation nicht immer klar und aktuell ist. Dies wird wahrscheinlich zur StackOverflow-Dokumentation gehen, wenn sie verfügbar ist.

Zuerst: Beantworten der Frage

Wie kann ich benutzerdefinierte App-Symbole für iOS und Android mit PhoneGap hinzufügen?

In Ihrer Version von Cordova ist das icon Tag nutzlos. Es ist nicht einmal in Cordova 3.0.0 dokumentiert. Sie sollten die Dokumentationsversion verwenden, die zum verwendeten CLI passt und nicht zum neuesten!

Vor der Version 3.5.0 funktioniert das Icon- Tag überhaupt nicht für Android, was ich in den verschiedenen Versionen der Dokumentation sehen kann. In 3.4.0 empfehlen sie immer noch, die Dateien manuell zu kopieren

In neueren Versionen : Ihre config.xml sieht besser für neuere Cordova-Versionen. Allerdings gibt es immer noch viele Dinge, die Sie wissen möchten. Wenn Sie sich für ein Upgrade entscheiden, sollten Sie einige nützliche Dinge ändern:

  • Sie brauchen die gap: Namespace
  • Sie benötigen für Android

Hier sind weitere Details zu den Fragen, die Sie sich stellen können, wenn Sie versuchen, mit Icons und Splash-Screens umzugehen:

Kann ich eine alte Version von Cordova / Phonegap verwenden?

Nein, das Icon / Splashscreen-Feature war nicht in früheren Versionen von Cordova, daher müssen Sie eine aktuelle Version verwenden. In früheren Versionen funktionierte nur Phonegap Build mit den Icons / Splash-Screen, so dass das lokale Erstellen und Bearbeiten von Icons nur mit einem Haken möglich war. Ich kenne die Mindestversion nicht, um diese function zu verwenden, aber mit 5.1.1 funktioniert es sowohl in Cordova / Phonegap cli. Mit Cordova 3.5 hat es bei mir nicht funktioniert.

Edit : für Android müssen Sie mindestens 3.5.0 verwenden

Wie kann ich den Build-process über Symbole debuggen?

Der CLI verwendet einen CP-Befehl. Wenn Sie einen ungültigen Symbolpfad angeben, wird ein cp Fehler cp :

 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 

Bearbeiten : Sie verwenden cordova build --verbose , um Protokolle der cp-Befehlsverwendung zu erhalten, um zu sehen, wo Ihre Symbole kopiert werden

Die Icons sollten in einem Ordner entsprechend der Config gehen. Für mich geht es in vielen Unterordnern unter: platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

Dann kannst du das APK finden und es als Zip-Archiv öffnen, um zu überprüfen, ob die Icons vorhanden sind. Sie müssen sich in einem res/drawable* Ordner befinden, da es sich um einen speziellen Ordner für Android handelt.

Wo sollte ich die Icons / Startbildschirme in mein Projekt einfügen?

In vielen Beispielen finden Sie die Symbole / Begrüßungsbildschirme in einem Ordner res . Diese res ist ein spezieller Android-Ordner in der Ausgabe-APK, aber es bedeutet nicht, dass Sie einen res Ordner in Ihrem Projekt verwenden müssen.

Sie können Ihr Symbol überall hinstellen, aber der Pfad, den Sie verwenden, muss relativ zum Stamm des Projekts sein und nicht www also seien Sie vorsichtig! Dies ist dokumentiert, aber nicht klar, weil alle Beispiele res und Sie nicht wissen, wo dieser Ordner ist 🙁

Ich meine, wenn Sie das Symbol in www/icon.png setzen, müssen Sie unbedingt www in Ihrem Pfad enthalten.

Edit Mars 2016 : nach dem Upgrade meiner Versionen scheint es, dass Icons relativ zum www Ordner sind, aber Dokumentation wurde nicht geändert ( Problem )

functioniert ?

Nein, tut es nicht! .

Auf Android scheint es früher zu funktionieren (wenn das Dichteattribut noch nicht unterstützt wurde?), Aber nicht mehr. Sehen Sie sich dieses Cordova-Problem an

Auf iOS scheint es, dass die Verwendung dieser globalen Deklaration möglicherweise spezifischere Deklarationen überschreibt. --verbose und erstellen Sie mit --verbose , um --verbose , dass alles wie erwartet funktioniert.

Kann ich für alle Dichten dieselbe Symbol- / Splash-Screen-Datei verwenden?

Ja, du kannst. Sie können sogar dieselbe Datei für das Symbol und den Begrüßungsbildschirm verwenden (nur zum Testen!). Ich habe eine “große” Symboldatei von 65kb ohne irgendein Problem verwendet.

Was ist der Unterschied bei der Verwendung des Plattform-Tags im Vergleich zum Plattformattribut?

  

ist das gleiche wie

    

Sollte ich den Lücke: Namespace bei der Verwendung von Phonegap verwenden?

Nach meiner Erfahrung sind neue Versionen von Phonegap oder Cordova in der Lage, Icon-Deklarationen ohne gap: zu verstehen gap: XML-Namespace.

Allerdings warte ich immer noch auf eine gültige Antwort: cordova / phonegap plugin add VS config.xml

Soweit ich verstehe, können einige Features mit dem gap: namespace früher in PhonegapBuild, dann in Phonegap verfügbar sein und dann nach Cordova (?) Portiert werden.

Ist

erforderlich?

Zumindest für Android ist es ja. Ich habe ein Problem mit zusätzlichen Erklärungen geöffnet.

Ist die Reihenfolge der Symbole wichtig?

Ja tut es! Es kann keine Auswirkungen auf Android haben, aber es hat auf iOS nach meinen Tests. Dies ist unerwartetes und undokumentiertes Verhalten, also habe ich ein anderes Problem geöffnet.

Brauche ich cordova-plugin-splashscreen ?

Ja, das ist absolut erforderlich, wenn der Begrüßungsbildschirm funktionieren soll. Die Dokumentation ist nicht klar ( Problem ) und lassen Sie uns denken, dass das Plugin nur eine Splash-Screen-Javascript-API anbieten muss.

Wie kann ich die Bilder für alle Breite / Höhe / Dichte schnell ändern?

Es gibt Tools, die Ihnen dabei helfen. Das beste für mich ist http://makeappicon.com/, aber es erfordert eine E-Mail-Adresse anzugeben.

Andere mögliche Lösungen sind:

Können Sie mir eine Beispielkonfiguration geben?

Ja. Hier ist meine echte config.xml

 < ?xml version='1.0' encoding='utf-8'?>  x  x   x                                                                               

Eine gute Quelle für Beispiele sind Starter-Kits. Wie Phonegap-Start oder Ionic Starter

Ab Cordova 3.5.0-0.2.6 funktioniert das Element in config.xml mit folgenden Einschränkungen:

  1. Das Attribut src ist ein Pfad relativ zum Stammordner Ihres Projekts. Das Problem Tracker über dieses Problem, warum die Änderung.

  2. Das Element ohne Auflösung / dpi ist als das Symbol dokumentiert, das von allen Plattformen als Standard-Symbol verwendet wird. Bei Android-Builds wird das Standardsymbol jedoch nur in den Ordner “Androide Drawable” kopiert, ohne dass bestimmte Auflösungen festgelegt wurden. Dadurch wird das benutzerdefinierte Symbol im Ordner /res/drawable , und das cordova-Standardsymbol mit bestimmten Auflösungen ist in den anderen Ordnern in der endgültigen apk (dh /res/drawable-ldpi ) vorhanden. Sie müssen ein config.xml in der config.xml für jede Auflösung auf der Android-Plattform hinzufügen.

Wenn sich beispielsweise Ihr www/res/img/icon.png im Pfad www/res/img/icon.png relativ zu Ihrem www/res/img/icon.png , können Sie mit diesen Zeilen in der config.xml Ihr App-Symbol in Android verwenden:

        

Mit dieser Konfiguration können Sie ein einzelnes Bildsymbol für alle Auflösungen erstellen, das das Standardcordova-Symbol und keine benutzerdefinierten Hooks überschreibt. Einfach mit cordova build android sollte den Trick machen.

Wenn Sie eine einfach zu bedienende Möglichkeit zum automatischen Hinzufügen von cordova emulate ios beim lokalen cordova emulate ios ( cordova emulate ios , cordova run android , etc.) wollen, casting Sie einen Blick auf diesen core:

https://gist.github.com/LinusU/7515016

Hoffentlich wird das irgendwann in der Zukunft funktionieren, hier ist der entsprechende Fehlerbericht zum Cordova-Projekt:

https://issues.apache.org/jira/browse/CB-2606

Sie müssen eine Datei config.xml erstellen, in die Sie die Symboldatei einfügen

 < ?xml version="1.0" encoding="ISO-8859-1" ?>   

Überprüfen Sie dies: https://build.phonegap.com/docs/config-xml

Es gibt iOS spezifische Symbole

Da die meisten Antworten hier auf iOS ausgerichtet sind, gibt es hier eine Lösung, um das Symbol in Android zu ändern.

Für Android:

Nehmen Sie Änderungen an \ Plattformen \ android \ ant-build \ res und nicht \ platforms \ android \ res vor

Für einige Leute, die Änderungen in letzterem Ort vielleicht funktioniert haben, aber Phonegap Kopieren von \ android \ res in \ android \ ant-build \ res bemerkt habe, entschied ich mich dort einzuchecken und einen separaten Satz von ziehbaren Ordnern zu finden, die den Standard enthalten Phonegap-Symbol.

Das zu ändern, hat endlich funktioniert.

Da ich lokal baue und lokal arbeite und Adobe PhoneGap Build nicht verwende, funktionierte auch das Ändern der Symbole in \ www \ res \ icon \ android nicht.

Ich führe phonegap 3.1.0-0.15.0, seit iOS7 die Auflösung auf 120x120px geändert habe Ich habe gerade eine Datei mit diesen Dimensionen zum Projekt hinzugefügt und dann die Datei info.plist geändert.

  1. Fügen Sie dem Projekt eine 120×120-Datei hinzu, indem Sie mit der rechten Maustaste auf die Projektdatei in Xcode klicken und “Dateien hinzufügen zu” [Ihr Projektname] “ auswählen
  2. Gehen Sie zur Datei info.plist in Xcode “Ressourcen / [Ihr Projektname] -info.plist”
  3. Unter “Symboldateien (iOS 5) / Primäre Icon / Icon-Dateien” ändern Sie “Item 2” in den Dateinamen Ihrer Datei (ich habe mine “icon-120.png” genannt, die ich neben allen anderen Icons im Projektordner platziert habe) obwohl das nicht wichtig sein sollte)

Weitere Informationen finden Sie hier: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

Um den Begrüßungsbildschirm in iOS zu reparieren, habe ich einfach neue Dateien mit denselben Dimensionen und denselben Dateinamen eingefügt und die alten überschrieben. Denken Sie daran, in der Menüleiste in Xcode (Shortcut Shift + Command + K) zu Product> Clean zu gehen und es sollte gut funktionieren! 🙂

In Cordova 3.3.1-0.1.2 funktioniert das erwartete Verhalten nicht richtig.

im

http://sofde.miximages.com/cordova/images.html stecken, aber es tut so ein richtiges verhalten zu diesem zeitpunkt … bug nicht.

Ich denke, wir müssen sie manuell für jede Plattform einstellen. es müsste natürlich entfernt werden, um es erneut in den www-Ordner zu duplizieren. für mich musste ich den Inhalt im Hauptwww-Ordner sowieso komplett ersetzen, weil es einfach nicht mit Hallo Welt funktionierte, ohne eine Weiterleitung index.html zu hacken, um dort einen seltsamen zufälligen Ordner zu finden. Den Res-Ordner neben www zu platzieren macht am meisten Sinn, aber was immer es für mich zu sein scheint, verursacht durch diese Serie von kaskadierenden und verwirrenden Designwahlen / -errorsn.

In einigen Fällen legen die internen Skripte von Cordova die Icons nicht in den richtigen Ordner, deshalb können Sie den f *** cordova Roboter anstelle Ihres eigenen Icons sehen.

Verwenden Sie das Hook-Skript;)

Three-Hooks-your-cordovaphonegap-Projekt-Bedürfnisse

Erstelle einen Ordner “after_platform_add” im Hook-Ordner und lege / ändere das letzte Skript von devgirl.

Vergessen Sie nicht, die Ausführungsrechte für das Skript zu setzen, in linux "chmod 777

Viel Glück!

Alles, was ich getan habe, wurden die folgenden Zeilen in config.xml

Und es hat total gut funktioniert

Fügen Sie diesen Code einfach in Ihre Datei config.xml ein

  

z.B:

  

Denken Sie immer daran, dass Sie die Erweiterung .png verwenden müssen

Ich bin auch mitten in dem Versuch zu verstehen, wie sich das alles verbindet.

Hier ist, was ich bisher in XCode gefunden habe, aber ich hoffe, korrigiert oder bestätigt zu werden, wenn meine Annahmen richtig sind. Ich habe nicht gefunden, dass ein out of the box-Build von cordova zu xcode, das die Symbole korrekt anwendet. Wie du habe ich alle Icons in der config.xml aktualisiert, aber keine Würfel.

Damit…

Zuerst aktualisiere ich normalerweise die Datei config.xml im Stammverzeichnis des Projekts mit der in meinem “www” -Ordner (das mache ich aus Ungewissheit, dass die www / config.xml irgendeine Priorität hat oder wenn sie sogar angewendet wird)

Zweitens aktualisiere ich die “Build Phasen” des Projekts. Erweitern Sie “Bundle-Ressourcen kopieren”, Sie haben bereits alle Bilder in “Ressourcen / Symbole”, “Ressourcen / Splash” bemerkt. Du kannst entweder:

  • Entferne alle diese, um ein Überschreiben deiner Bilder zu vermeiden ODER
  • aktualisiere alle diese Bilder mit deinen eigenen (Umbenennung in den angezeigten Bildnamen)

Während ich daran arbeitete, könnte es sein, dass Sie Bilder von der Registerkarte “Zusammenfassung” nur minimal aktualisieren können.

Ziehen Sie Ihre Bilder per Drag & Drop aus Ihren Res-Ordnern in das entsprechende Bild auf der Registerkarte “Zusammenfassung”. (res / icon / ios -> App-Symbole und res / screen / ios -> Bilder starten). Ich mache es nur für iPhone, da meine App nur iPhone ist. Aktivieren Sie “vorgerendert”, wenn Glanz nicht angezeigt werden soll.

Aktualisieren Sie dann das “icon.png”, auf das in der plist-Datei des Projekts verwiesen wird: PROJECT_NAME-Info.plist oder in der Registerkarte “Info”, wenn Sie das Projektziel betrachten. Benennen Sie es in “icon-57.png” um (das jetzt in Ihrem Projekt-Stammverzeichnis vorhanden ist, wurde es automatisch dem Stamm hinzugefügt, als Sie das Drag & Drop-Verfahren ausgeführt haben.

Erstellen Sie und Sie sollten eine aktualisierte App-Symbol.

Ich habe nur bemerkt, dass ich gerade meine config.xml geändert habe, um wie Sebastians Beispiel auszusehen.

Etwas, das auch beim Debuggen all dieser Dinge hilfreich ist, besonders wenn Sie keine lokalen Builds machen, ist das Herunterladen der XAP / IPA / APK-Dateien aus der PhoneGap-Cloud und das Erstellen von Ordnern für jede. Benennen Sie jede Datei mit einer ZIP-Erweiterung um, und extrahieren Sie den Inhalt der einzelnen Dateien in ihre jeweiligen Ordner. Im Grunde können Sie nun sehen, was in dem Paket enthalten ist, das an das Telefon gesendet wird.

Dadurch kann ich erkennen, dass bei der Microsoft Phone-Plattform alle Versuche, das Symbol oder den Begrüßungsbildschirm zu ersetzen, weitgehend ignoriert werden. Wenn Sie dann ApplicationIcon.png und SplashScreenImage.jpg ersetzen, zippen Sie den Ordnerset erneut und benennen Sie ihn erneut als .XAP-Datei um, die Sie dann auf Ihrem Telefon bereitstellen können. Irgendwie gibt es eine Möglichkeit, den PhoneGap-Build einfach dazu zu bringen, Ihre icon.png und icon.jpg in diese beiden Dateien zu verwandeln. Vielleicht ist Masoods Vorschlag hier eine Möglichkeit und benutzt ein Hook-Skript.

Das Gleiche für die .IPA-Datei (iOS) führt zu mehreren Dateien wie icon-something.png auf der übergeordneten Ebene über www. Sie scheinen alle leer zu sein.

Das gleiche für die .APK-Datei (Android) zu tun, führt zu einem res / drawable-something-Set von Ordnern, und es scheint, dass ich jedes icon.png habe. Es ist dem Erfolg am nächsten, den ich im Moment beanspruchen kann.