Создание значков iOS и Android в Кордове/PhoneGap

У меня есть недавно созданный проект Cordova со следующей настройкой config.xml (используется инструкция из http://docs.phonegap.com/en/edge/config_ref_images.md.html). Я также добавил 2 платформы (iOS и Android).

Когда я запускаю либо cordova run ios, либо cordova run android, проект по-прежнему имеет значки Кордовы по умолчанию. Мое понимание из документации заключается в том, что Corodva должен создавать значки, автоматически основанные на icon.png, которые я предоставил в 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="#" onclick="location.href='http://cordova.io'; return false;">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

Ответ 1

Я написал script, который автоматически создает значки для кордовы с помощью ImageMagick:

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

Чтобы использовать его, создайте файл "icon.png" и поместите его в корневую папку вашего проекта, а затем запустите:

cordova-icon

и он будет генерировать все необходимые значки для платформ вашего проекта.

Вы также можете настроить его как крючок в своем проекте cordova, чтобы иконы генерировались каждый раз, когда вы строите проект на основе добавленного вами значка .png. (инструкции в readme).

Ответ 2

Если вы используете cordova 3.5.0, они обновили документы. В старых версиях мне всегда приходилось заменять значки вручную в проекте, но последняя версия кордовы работает нормально.

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

Как вы можете видеть здесь https://github.com/phonegap/phonegap-cli/issues/58, это была общая проблема. Поэтому, если вы используете более раннюю версию кордовы, я рекомендую обновить ее командой npm update -g cordova

И после этого вы должны обновить свой config.xml примерно так:

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

Как вы можете видеть, URI относятся к пути проекта cordova, а не к папке www.

Ответ 3

Настройки config.xml для значков работают только с сервисом PhoneGap Build. После добавления обеих платформ вам нужно вручную (или вы можете создать крючок, но я этого не сделал сам) поместите ваши значки в правильные пути.

Для iOS:

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

Для Android:

PROJECT_PATH/platforms/android/res/drawable

В Android много папок res/drawable-*, используйте как применимо к вашему приложению, но, как минимум, добавьте в res/drawable

Затем запустите cordova prepare или build или run

Ответ 4

Если вы хотите установить дополнительное программное обеспечение для создания значков, вы можете использовать Ionic, который имеет такую функцию.

Выполните следующие действия:

npm install ionic -g
Поместите png, psd или .ai файлы для значков и/или всплывающих окон на ${project_location}/resources
ionic resources

Если вы хотите создавать значки, для этого есть только удобный ключ:

ionic resources --icon

Подробнее здесь

Ответ 5

Вам не нужно указывать папку, на которой есть значок? Кордова заменяет значок по умолчанию, когда он не найден.

Вы пытались заменить что-то вроде:

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

Ответ 6

Попробуйте выполнить https://www.npmjs.org/package/cordova-gen-icon

Пример:

$ 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

Ответ 7

Небольшое объяснение для людей, которые говорят <icon src="res/icon.png" /> Не работает!

Вы должны поместить icon.png в обе эти папки

project_name/Рез/

project_name/платформы/PLATFORM_NAME/Рез/

Шаги:

cordova create hello com.example.hello HelloWorld
cd hello

Скопируйте свой значок .png в project_name/res/ Откройте config.xml и поместите <icon src="res/icon.png" />

После этого выполните

cordova platform add android

Теперь скопируйте свой значок .png в... hello/platforms/android/res/

то

cordova build android

и, наконец,

adb install  platforms/android/build/outputs/apk/android-debug.apk

После этого вы можете видеть на устройстве свое приложение со значком