Ich habe ein neues Phonegap-Projekt (Version 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, damit 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 mit Phonegap benutzerdefinierte App-Symbole für iOS und Android hinzufügen?
Vielen Dank
meine 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" />
Antworten:
Glücklicherweise gibt es in den Dokumenten ein wenig über die Begrüßungsbilder, was mich auf den Weg gebracht hat, auch den richtigen Ort für die Symbolbilder zu finden. Also los geht's.
Speicherort der Dateien Nachdem Sie Ihr Projekt über die Befehlszeilenschnittstelle "cordova build ios" erstellt haben, sollten Sie eine vollständige Dateistruktur für Ihre iOS-App im
platforms/ios/
Ordner haben.In diesem Ordner befindet sich ein Ordner mit dem Namen Ihrer App. Welches wiederum enthält ein
resources/
Verzeichnis, in dem Sie dieicons/
undsplashscreen/
Ordner finden.Im Ordner "icons" finden Sie vier Symboldateien (für 57px und 72 px, jeweils in regulärer und @ 2x-Version). Dies sind die Phonegap-Platzhaltersymbole, 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
Nachdem Sie die Dateien dort abgelegt haben, erstellen Sie das Projekt mit
cordova build ios
AND neu und verwenden Sie den xCode-Menübefehl 'Produkt reinigen'. Ohne dies sehen Sie immer noch die Phonegap-Platzhalter.Es ist am klügsten, Ihre Dateien auf iOS / Apple-Weise umzubenennen (z. B. [email protected] usw.), anstatt die Namen in der info.plist oder config.xml zu bearbeiten. Zumindest hat das bei mir funktioniert.
Ignorieren Sie übrigens den seltsamen Pfad und den seltsamen Dateinamen, die für die Symbole in config.xml (dh
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
) angegeben wurden. Ich habe diese Definitionen einfach dort gelassen und die Symbole wurden einwandfrei angezeigt, obwohl mein 114px-Symbol[email protected]
anstelle von benannt wurdeicon-57-2x.png
.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 Kopfzeile Ziel aus und scrollen Sie zum Abschnitt Symbole).
quelle
FAQ: ICON / SPLASH-BILDSCHIRM (Cordova 5.x / 2015)
Ich präsentiere meine Antwort als allgemeine FAQ, die Ihnen helfen kann, viele Probleme zu lösen, auf die ich beim Umgang mit Symbolen / Begrüßungsbildschirmen gestoßen bin. Sie werden vielleicht wie ich feststellen, dass die Dokumentation nicht immer sehr klar und aktuell ist. Dies wird wahrscheinlich in die StackOverflow-Dokumentation aufgenommen , sofern verfügbar.
Erstens: Beantwortung der Frage
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 zu der von Ihnen verwendeten CLI passt, und nicht die neueste!Das Symbol- Tag funktioniert für Android vor der Version 3.5.0 überhaupt nicht, wie ich in den verschiedenen Versionen der Dokumentation sehen kann. In 3.4.0 wird weiterhin empfohlen, die Dateien manuell zu kopieren
In neueren Versionen : Sie sehen
config.xml
besser aus für neuere Cordova-Versionen. Es gibt jedoch noch viele Dinge, die Sie wissen möchten. Wenn Sie sich für ein Upgrade entscheiden, sollten Sie einige nützliche Dinge ändern:gap:
Namespace nicht<preference name="SplashScreen" value="screen" />
für AndroidHier finden Sie weitere Details zu den Fragen, die Sie sich möglicherweise stellen, wenn Sie versuchen, mit Symbolen und Begrüßungsbildschirmen umzugehen:
Kann ich eine alte Version von Cordova / Phonegap verwenden?
Nein, die Symbol- / Begrüßungsbildschirmfunktion war in früheren Versionen von Cordova nicht verfügbar, daher müssen Sie eine neuere Version verwenden. In früheren Versionen hat nur Phonegap Build die Symbole / den Begrüßungsbildschirm verarbeitet, sodass das lokale Erstellen und Behandeln von Symbolen nur mit einem Hook möglich war. Ich kenne die Mindestversion für diese Funktion nicht, aber mit 5.1.1 funktioniert sie sowohl in Cordova als auch in Phonegap cli einwandfrei. Mit Cordova 3.5 hat es bei mir nicht funktioniert.
Bearbeiten : Für Android müssen Sie mindestens 3.5.0 verwenden
Wie kann ich den Erstellungsprozess für Symbole debuggen?
Die CLI verwenden einen CP-Befehl. Wenn Sie einen ungültigen Symbolpfad angeben, wird ein
cp
Fehler angezeigt:Bearbeiten : Sie können
cordova build <platform> --verbose
Protokolle der Verwendung von cp-Befehlen abrufen, um zu sehen, wo Ihre Symbole kopiert werdenDie Symbole sollten sich gemäß der Konfiguration in einem Ordner befinden. Für mich geht es in vielen Unterordnern in:
platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Dann können Sie die APK finden und als Zip-Archiv öffnen, um zu überprüfen, ob die Symbole vorhanden sind. Sie müssen sich in einem
res/drawable*
Ordner befinden, da es sich um einen speziellen Ordner für Android handelt.Wo soll ich die Symbole / Begrüßungsbildschirme in meinem Projekt platzieren?
In vielen Beispielen finden Sie, dass die Symbole / Begrüßungsbildschirme in einem
res
Ordner deklariert sind . Diesres
ist ein spezieller Android-Ordner in der Ausgabe-APK, dies bedeutet jedoch nicht, dass Sie einenres
Ordner in Ihrem Projekt verwenden müssen.Sie können Ihr Symbol an einer beliebigen Stelle platzieren, aber der Pfad, den Sie verwenden, muss relativ zum Stamm des Projekts sein , und seien Sie nicht
www
vorsichtig! Dies ist dokumentiert, aber nicht eindeutig, da alle Beispiele verwendet werdenres
und Sie nicht wissen, wo sich dieser Ordner befindet :(Ich meine, wenn Sie das Symbol in sich
www/icon.png
setzen, müssen Sie es unbedingtwww
in Ihren Pfad aufnehmen.Edit Mars 2016 : Nach dem Upgrade meiner Versionen scheinen die Symbole nun relativ zum
www
Ordner zu sein, aber die Dokumentation wurde nicht geändert ( Problem ).Funktioniert
<icon src="icon.png"/>
?Nein, tut es nicht! .
Unter Android schien es früher zu funktionieren (als das Dichteattribut noch nicht unterstützt wurde?), Aber nicht mehr. Siehe diese Cordova-Ausgabe
Unter iOS scheint die Verwendung dieser globalen Deklaration spezifischere Deklarationen zu überschreiben. Seien Sie also vorsichtig und erstellen Sie mit,
--verbose
um sicherzustellen, dass alles wie erwartet funktioniert.Kann ich für alle Dichten dieselbe Symbol- / Begrüßungsbildschirmdatei verwenden?
Ja, du kannst. Sie können sogar dieselbe Datei sowohl für das Symbol als auch für den Begrüßungsbildschirm verwenden (nur zum Testen!). Ich habe problemlos eine "große" Icon-Datei mit 65 KB verwendet.
Was ist der Unterschied zwischen der Verwendung des Plattform-Tags und dem Plattform-Attribut?
ist das gleiche wie
Sollte ich den Lücken-Namespace verwenden, wenn ich Phonegap verwende?
Nach meiner Erfahrung können neue Versionen von Phonegap oder Cordova Symboldeklarationen verstehen, ohne einen
gap:
XML-Namespace zu verwenden.Allerdings warte ich hier immer noch auf eine gültige Antwort: Cordova / Phonegap-Plugin füge VS config.xml hinzu
Soweit ich
gap:
weiß, sind einige Funktionen mit dem Namespace möglicherweise früher in PhonegapBuild verfügbar, dann in Phonegap und werden dann nach Cordova portiert (?)Ist
<preference name="SplashScreen" value="screen" />
erforderlich?Zumindest für Android ist es ja. Ich habe eine Ausgabe mit zusätzlichen Erklärungen eröffnet.
Ist die Reihenfolge der Symboldeklaration wichtig?
Ja tut es! Es hat möglicherweise keine Auswirkungen auf Android, aber nach meinen Tests auf iOS. Dies ist ein unerwartetes und nicht dokumentiertes Verhalten, daher habe ich ein weiteres Problem geöffnet .
Muss ich
cordova-plugin-splashscreen
?Ja, dies ist unbedingt erforderlich, wenn der Begrüßungsbildschirm funktionieren soll. Die Dokumentation ist nicht klar ( Problem ) und wir glauben, dass das Plugin nur erforderlich ist, um eine Javascript-API für Begrüßungsbildschirme anzubieten.
Wie kann ich die Größe der Bilder für alle Breiten / Höhen / Dichten schnell ändern?
Es gibt Tools, die Ihnen dabei helfen. Das beste für mich ist http://makeappicon.com/, aber es muss eine E-Mail-Adresse angegeben werden.
Andere mögliche Lösungen sind:
Können Sie mir eine Beispielkonfiguration geben?
Ja. Hier ist meine echte
config.xml
Eine gute Quelle für Beispiele sind Starter-Kits. Wie Phonegap-Start oder Ionic Starter
quelle
cordova build android --verbose
, um mein Problem zu identifizieren und zu lösen. Vielen Dank!Ab Cordova 3.5.0-0.2.6 funktioniert das
<icon />
Element in config.xml mit den folgenden Einschränkungen:Das
src
Attribut ist ein Pfad relativ zu Ihrem Projektstammordner. Der Issue Tracker über dieses Issue begründet die Änderung.Das
<icon src="..." />
Element ohne Auflösung / dpi wird als Symbol dokumentiert, das von allen Plattformen als Standardsymbol verwendet wird. Bei Android-Builds wird das Standardsymbol jedoch nur in den Android-Zeichnungsordner kopiert, ohne dass bestimmte Auflösungen festgelegt wurden. Dadurch wird Ihr benutzerdefiniertes Symbol im/res/drawable
Ordner angezeigt, und das Cordova-Standardsymbol mit bestimmten Auflösungen befindet sich in den anderen Ordnern in der endgültigen apk (dh/res/drawable-ldpi
). Sie müssen ein Symbolelementconfig.xml
für jede Auflösung auf der Android-Plattform hinzufügen .Befindet sich Ihr Symbolbild beispielsweise im Pfad
www/res/img/icon.png
zu Ihremconfig.xml
Stammprojekt, funktioniert dieses App-Symbol in Android wie folgt :Mit dieser Konfiguration können Sie ein einziges Bildsymbol für alle Auflösungen verwenden, die das Standard-Cordova-Symbol überschreiben, und dies ohne benutzerdefinierte Hooks. Einfach mit bauen
cordova build android
sollte den Trick machen.quelle
density
. Ich wechselte<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
zu<icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
Wenn Sie eine einfach zu bedienende Art und Weise wollen Icons automatisch hinzuzufügen , wenn vor Ort den Bau (
cordova emulate ios
,cordova run android
usw.) haben einen Blick auf diesen Kern:https://gist.github.com/LinusU/7515016
Hoffentlich funktioniert dies irgendwann in der Zukunft sofort. Hier ist der relevante Fehlerbericht zum Cordova-Projekt:
https://issues.apache.org/jira/browse/CB-2606
quelle
Sie müssen eine config.xml-Datei erstellen, in die Sie die Symboldatei einfügen sollen
Überprüfen Sie dies: https://build.phonegap.com/docs/config-xml
Es gibt iOS-spezifische Symbole
quelle
Da die meisten Antworten hier auf iOS ausgerichtet sind, gibt es hier eine Lösung zum Ändern des Symbols in Android.
Für Android:
Nehmen Sie Änderungen in <Projektspeicherort> \ platform \ android \ ant-build \ res und nicht in <Projektspeicherort> \ platform \ android \ res vor
Bei einigen Personen, die Änderungen am letzteren Speicherort vorgenommen haben, hat dies möglicherweise funktioniert. Nachdem ich jedoch festgestellt habe, dass Phonegap von \ android \ res nach \ android \ ant-build \ res kopiert hat, habe ich mich entschlossen, dort einzuchecken und einen separaten Satz zeichnbarer Ordner mit dem Standard zu finden Phonegap-Symbol.
Das zu ändern hat endlich funktioniert.
Da ich lokal baue und ausführe und Adobe PhoneGap Build nicht verwende, hat das Ändern der Symbole in <Projektspeicherort> \ www \ res \ icon \ android auch nicht funktioniert.
quelle
Ich verwende Phonegap 3.1.0-0.15.0, da iOS7 die Auflösung auf 120x120px geändert hat. Ich habe dem Projekt gerade eine Datei mit diesen Abmessungen hinzugefügt und dann die Datei info.plist geändert.
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 gerade neue Dateien mit denselben Abmessungen und Dateinamen eingefügt und die alten überschrieben. Denken Sie daran, in Xcode in der Menüleiste auf Produkt> Reinigen zu klicken (Tastenkombination Umschalt + Befehl + K), und es sollte einwandfrei funktionieren! :) :)
quelle
In Cordova 3.3.1-0.1.2 funktioniert das erwartete Verhalten nicht richtig.
im
http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
Es wird klargestellt, dass Sie sie in Ihrem Haupt-WWW-Ordner in einem Ordner namens res und icons ablegen sollen, die einer bestimmten Namenskonvention folgen, anstatt der ursprünglich anpassbaren config.xml-Methode (in der Sie auf eine Datei Ihrer Wahl verweisen). was viel besser war / ist). es sollte dann von dort für jede Plattform dauern und sie in die Plattformen /? android? / res / drawable-? dpi / icon.png legen, aber es macht derzeit kein so korrektes Verhalten ... Fehler.
Ich denke, wir müssen sie für jede Plattform manuell dort ablegen. es müsste natürlich entfernt werden, dass es wieder in den www-Ordner dupliziert wird. Für mich musste ich den Inhalt im Haupt-WWW-Ordner sowieso komplett ersetzen, da es einfach nicht mit Hello World funktionierte, ohne eine Redirect-Index.html zu hacken, um dort einen seltsamen zufälligen Ordner zu finden. Das Ablegen des res-Ordners neben www ist am sinnvollsten, aber was auch immer es für mich zu sein scheint, verursacht durch diese Reihe von kaskadierenden und verwirrenden Designentscheidungen / -fehlern.
quelle
In einigen Fällen werden die Symbole in den internen Skripten von Cordova nicht im richtigen Ordner abgelegt. Daher können Sie den F *** Cordova-Roboter anstelle Ihres eigenen Symbols sehen.
Verwenden Sie Hook-Skript.;)
Drei-Haken-dein-Cordovaphonegap-Projekt braucht
Erstellen Sie einen Ordner "after_platform_add" im Hook-Ordner und setzen / ändern Sie das letzte Skript von devgirl.
Vergessen Sie nicht, die Executive-Rechte für das Skript unter Linux festzulegen
"chmod 777 <script>"
Viel Glück!
quelle
Ich habe nur die folgenden Zeilen in die Datei config.xml eingefügt
<icon src="www/img/appIcon.png" />
Und es hat ganz gut funktioniert
quelle
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
quelle
Ich bin auch gerade dabei zu verstehen, wie das alles zusammenhängt.
Folgendes habe ich bisher in XCode gefunden, aber ich hoffe, korrigiert oder bestätigt zu werden, wenn meine Annahmen korrekt sind. Ich habe keinen sofort einsatzbereiten Build für xcode von cordova gefunden, der die Symbole korrekt anwendet. Wie Sie habe ich alle in der config.xml aufgelisteten Symbole aktualisiert, aber keine Würfel.
So...
Zuerst aktualisiere ich normalerweise die Datei config.xml im Stammverzeichnis des Projekts mit der Datei in meinem Ordner "www" (dies geschieht aus Ungewissheit, dass die Datei www / config.xml Vorrang hat oder 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 / Begrüßung" bemerkt. Du kannst entweder:Entfernen Sie alle diese Elemente, um ein Überschreiben Ihrer Bilder zu vermeidenAktualisieren Sie alle diese Bilder mit Ihren eigenen (Umbenennen in den angegebenen Bildnamen).Während ich dies ausarbeitete, können Sie möglicherweise Bilder nur minimal über die Registerkarte "Zusammenfassung" aktualisieren.
Ziehen Sie Ihre Bilder per Drag & Drop aus Ihren Res-Ordnern auf das entsprechende Bild auf der Registerkarte "Zusammenfassung". (res / icon / ios -> App-Symbole und res / screen / ios -> Bilder starten). Ich mache es nur für das iPhone, da meine App nur das iPhone ist. Aktivieren Sie "Vorgerendert", wenn kein Glanz angezeigt werden soll.
Aktualisieren Sie dann die "icon.png", auf die in der Plist-Datei des Projekts verwiesen wird: PROJECT_NAME-Info.plist oder auf der Registerkarte "Info", wenn Sie das Projektziel betrachten. Benennen Sie es in "icon-57.png" um (das sich jetzt in Ihrem Projektstamm befindet. Dieser wurde beim Ziehen und Ablegen automatisch zum Stamm hinzugefügt.
Erstellen Sie und Sie sollten ein aktualisiertes App-Symbol.
quelle
Ich habe nur bemerkt, dass ich gerade meine config.xml geändert habe, um wie Sebastians Beispiel auszusehen.
Etwas, das auch beim Debuggen all dessen hilfreich ist, insbesondere wenn Sie keine lokalen Builds ausführen, ist das Herunterladen der XAP / IPA / APK-Dateien, die aus der PhoneGap-Cloud erstellt wurden, und das Erstellen von Ordnern für jede Datei. Benennen Sie jede Datei mit der Erweiterung .ZIP um und extrahieren Sie den Inhalt jeder Datei in ihre jeweiligen Ordner. Im Grunde können Sie jetzt sehen, was in dem Paket enthalten ist, das an das Telefon gesendet wird.
Auf diese Weise kann ich feststellen, dass bei der Microsoft Phone-Plattform alle meine Versuche, das Symbol oder den Begrüßungsbildschirm zu ersetzen, weitgehend ignoriert werden. Wenn Sie dann ApplicationIcon.png und SplashScreenImage.jpg ersetzen, das Ordnerset erneut komprimieren und es erneut als .XAP-Datei umbenennen, können Sie es auf Ihrem Telefon bereitstellen und es funktioniert einwandfrei. Irgendwie gibt es eine Möglichkeit, den PhoneGap-Build so zu gestalten, dass Ihre icon.png und icon.jpg in diese beiden Dateien umgewandelt werden. Vielleicht ist Masoods Vorschlag hier eine Möglichkeit und verwendet ein Hook-Skript.
Wenn Sie dasselbe für die IPA-Datei (iOS) tun, werden mehrere Dateien wie icon-Something.png auf der übergeordneten Ebene über www angezeigt. Sie scheinen alle leer zu sein.
Dasselbe für die .APK-Datei (Android) zu tun, führt zu einer Reihe von Ordnern mit res / drawable-Etwas, und es scheint, dass in jedem meine icon.png enthalten ist. Es kommt einem Erfolg am nächsten, den ich im Moment behaupten kann.
quelle