Generieren von iOS- und Android-Symbolen in Cordova / PhoneGap

Habe ich einen frisch erstellten Cordova-Projekts mit den folgenden config.xml setup (verwendet die Anweisungen von http://docs.phonegap.com/en/edge/config_ref_images.md.html). Ich habe auch 2 Plattformen (iOS und Android).

Wenn ich entweder cordova run ios oder cordova run android das Projekt hat immer noch die Standard-Cordova-Symbole. Mein Verständnis von der Dokumentation ist, dass Corodva soll, erstellen Sie die icons automatisch in den icon.png ich geliefert in die config.xml.

config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.testapp" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>SingleApp</name>
  <preference name="DisallowOverscroll" value="true" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="false" />
  <preference name="target-device" value="handset" />

  <description>
      A sample Apache Cordova application that responds to the deviceready event.
  </description>
  <author email="[email protected]" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

Kommentar zu dem Problem

in Cordova 5.1.1, werden die Symbole nicht gut funktioniert! Check meine Antwort hier zu wissen, alles, was Sie wissen sollten über Symbole: stackoverflow.com/a/31674547/82609 Kommentarautor: Sebastien Lorber

InformationsquelleAutor der Frage aporat | 2014-05-23

67

Ich ein script geschrieben, dass automatisch generiert Symbole für cordova mit ImageMagick:

https://github.com/AlexDisler/cordova-icon

Um es zu verwenden, erstellen Sie ein "Symbol.png" Datei, und platzieren Sie es in das root-Verzeichnis des Projektes, führen Sie dann:
```
cordova-icon
```
und es generiert alle erforderlichen Symbole für die Plattformen Ihr Projekt.

Können Sie auch so konfigurieren, dass es als ein Haken in die cordova-Projekt, so werden die icons generiert werden, jedes mal, wenn Sie das Projekt erstellen, basierend auf das Symbol.png, die Sie Hinzugefügt haben. (Anleitung in der readme).

InformationsquelleAutor der Antwort Alex

Wenn Sie mithilfe von cordova 3.5.0, Sie haben aktualisiert die Dokumentation. In älteren Versionen hatte ich schon immer, ersetzen Sie die Symbole manuell in das Projekt, aber die neueste version von cordova ist in Ordnung.

http://cordova.apache.org/docs/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

Wie Sie hier sehen können https://github.com/phonegap/phonegap-cli/issues/58 es ist schon ein häufiges problem. Also, wenn Sie eine ältere version von cordova, die ich empfehlen, Sie zu aktualisieren mit dem Befehl npm update -g cordova

Und nach, dass Sie sollten aktualisieren Sie Ihre config.xml etwas wie dies:

    <icon src="www/res/drawable-xxxhdpi/icon.png" />
    <platform name="android">
          <icon src="www/res/drawable-ldpi/icon.png" density="ldpi" />
          <icon src="www/res/drawable-mdpi/icon.png" density="mdpi" />
          <icon src="www/res/drawable-hdpi/icon.png" density="hdpi" />
          <icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" />
    </platform>

    <platform name="ios">
              <!-- iOS 7.0+ -->
              <!-- iPhone /iPod Touch  -->
              <icon src="www/res/ios/icon-60.png" width="60" height="60" />
              <icon src="www/res/ios/[email protected]" width="120" height="120" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-76.png" width="76" height="76" />
              <icon src="www/res/ios/[email protected]" width="152" height="152" />
              <!-- iOS 6.1 -->
              <!-- Spotlight Icon -->
              <icon src="www/res/ios/icon-40.png" width="40" height="40" />
              <icon src="www/res/ios/[email protected]" width="80" height="80" />
              <!-- iPhone /iPod Touch -->
              <icon src="www/res/ios/icon.png" width="57" height="57" />
              <icon src="www/res/ios/[email protected]" width="114" height="114" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-72.png" width="72" height="72" />
              <icon src="www/res/ios/[email protected]" width="144" height="144" />
              <!-- iPhone Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-small.png" width="29" height="29" />
              <icon src="www/res/ios/[email protected]" width="58" height="58" />
              <!-- iPad Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-50.png" width="50" height="50" />
              <icon src="www/res/ios/[email protected]" width="100" height="100" />
     </platform>

Wie Sie sehen können die URIs sind relativ zu der cordova-Projekt den Weg, nicht auf den Ordner www.

InformationsquelleAutor der Antwort Javier Abrego

7

Den config.xml Einstellungen für icons funktioniert nur mit der PhoneGap-Build-service. Nach addition der beiden Plattformen müssen Sie manuell (oder erstellen Sie einen Haken, aber ich habe nicht getan, dass ich mich zu) legen Sie Ihre Symbole in die richtigen Pfade.

Für iOS:
```
PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons
```
Für Android:
```
PROJECT_PATH/platforms/android/res/drawable
```
Android hat viele res/drawable-* Ordnern verwenden als für Ihre app mindestens jedoch hinzufügen, um res/drawable

Führen cordova prepare oder build oder run

InformationsquelleAutor der Antwort Dawson Loudon
6

Wenn Sie bereit sind, installieren Sie zusätzliche software für die Symbol-generation, die Sie verwenden können Ionische, das hat eine solche Funktion.

Folgendes tun:
1. npm install ionic -g
2. Setzen, png -, psd-oder .ai-Dateien für die icons und/oder splashscreens zu ${project_location}/resources
3. ionic resources
Wenn Sie wollen, zu generieren, nur Symbole, es ist ein handliches Schlüssel:
```
ionic resources --icon
```
Mehr details hier

InformationsquelleAutor der Antwort Aleksandr Kravets
2

Nicht, müssen Sie den Ordner angeben, hat das Symbol? Cordova ersetzt das Symbol mit dem Standard ein, wenn Sie nicht gefunden wird.

Haben Sie versucht zu ersetzen, mit so etwas wie:
```
<icon src="res/icon.png" />
```
InformationsquelleAutor der Antwort Davi S.

Versuchen Sie folgenden https://www.npmjs.org/package/cordova-gen-icon

Beispiel:

$ cordova create hello com.example.hello
Creating a new cordova project with name "HelloCordova" and id "com.example.hello" at location "hello"
$ cd hello
$ cordova platform add ios
Creating ios project...
Preparing ios project
$ cordova-gen-icon 
Generate cordova icons with
project: .
icon   : ./www/img/logo.png
target : 

generate iOS icons
Success generate icon set

InformationsquelleAutor der Antwort mrded

0

Eine kleine Erklärung für die Leute, die sagen <icon src="res/icon.png" /> Nicht funktionieren !

Müssen Sie Symbol.png in diesem Ordner

Projektname/res/

und

Projektname/Plattformen/platform_name/res/

Schritte:
```
cordova create hello com.example.hello HelloWorld
cd hello
```
Kopieren-Symbol.png zu project_name/res/
Öffnen config.xml und setzen <icon src="res/icon.png" />

Danach laufen
```
cordova platform add android
```
Nun kopieren Sie Ihre Symbol.png zu ... hello/platforms/android/res/

dann
```
cordova build android
```
und schließlich
```
adb install  platforms/android/build/outputs/apk/android-debug.apk
```
Danach sehen Sie auf dem Gerät Ihrer app mit Ihrem Symbol

InformationsquelleAutor der Antwort MTK

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.