Как добавить значок приложения в проекты телефонных звонков?

Я создал новый проект phonegap (v 3.0.0-0.14.0) с по умолчанию config.xml, а затем добавил платформы для iOS и Android.

Конфигурация содержит все пути ко всем значкам платформы.

Я перезаписал значки по умолчанию для iOS и Android, так что путь и имя по-прежнему соответствуют этим png.

При запуске в симуляторе значки не отображаются. Я просмотрел его в xCode, где он сообщает мне, что папка "Ресурсы" для значков по-прежнему содержит значки по умолчанию для телефонной заставки. То же самое с Android.

Что я делаю неправильно?

Как добавить пользовательские значки приложений для iOS и Android с телефонной связью?

спасибо

my 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" />

Ответ 1

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

Если файлы размещены После того, как вы создали свой проект с использованием командной строки "cordova build ios", у вас должна быть полная файловая структура для вашего приложения iOS в папке platforms/ios/.

Внутри этой папки находится папка с именем вашего приложения. Это, в свою очередь, содержит каталог resources/, где вы найдете папки icons/ и splashscreen/.

В папке значков вы найдете четыре файла значков (для 57px и 72 px, каждый в обычной и @2x версии). Это значки заметок Phonegap, которые вы видели до сих пор.

Что делать

Все, что вам нужно сделать, это сохранить файлы значков в этой папке. Вот что:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

То же самое для файлов с заставкой.

Примечания

  • После размещения файлов перестройте проект, используя cordova build ios И используйте команду меню xCode "Очистить продукт". Без этого вы все равно будете видеть заполнители Phonegap.

  • Лучше всего переименовать ваши файлы на iOS/Apple (т.е. [email protected] и т.д.) вместо редактирования имен в файле info.plist или config.xml. По крайней мере, это сработало для меня.

  • И, кстати, проигнорируйте странный путь и странное имя файла для значков в config.xml(т.е. <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />). Я просто оставил эти определения там, и значки появились очень хорошо, хотя мой значок 114px был назван [email protected] вместо icon-57-2x.png.

  • Не используйте config.xml для предотвращения эффекта блеска Apple на значке. Вместо этого поставьте галочку в поле xCode (щелкните заголовок проекта в левом столбце навигации, выберите свое приложение под заголовком Target и прокрутите вниз до раздела значков).

Ответ 2

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ: ЭКОН/СБОРОЧНЫЙ ЭКРАН (Cordova 5.x/2015)

Я представляю свой ответ как общий FAQ, который может помочь вам решить многие проблемы, с которыми я столкнулся при работе с значками/заставками. Вы можете узнать, как я, что документация не всегда очень ясна или актуальна. Вероятно, это будет доступно документации StackOverflow.

Сначала: отвечая на вопрос

Как я могу добавить пользовательские иконки приложений для iOS и Android с телефонной связью?

В вашей версии Кордовы тег icon бесполезен. Он даже не документирован в Cordova 3.0.0. Вы должны использовать версию документации, которая соответствует кли, которую вы используете, а не последняя!

Тег значок вообще не работает для Android до версии 3.5.0 в соответствии с тем, что я вижу в разных версиях документации. В 3.4.0 они по-прежнему советуют вручную копировать файлы

В более новых версиях: ваш config.xml выглядит лучше для новых версий Кордовы. Однако есть еще много вещей, которые вы, возможно, захотите узнать. Если вы решили обновить здесь, вам нужно внести некоторые полезные изменения:

  • Вам не нужно пространство имен gap:
  • Вам нужно <preference name="SplashScreen" value="screen" /> для Android

Вот более подробная информация о вопросах, которые вы можете задать себе при попытке разобраться с значками и заставкой:

Можно ли использовать старую версию Cordova/Phonegap

Нет, функция icon/splashscreen не была в прежних версиях Кордовы, поэтому вы должны использовать последнюю версию. В прежних версиях только Phonegap Build работала с иконками/заставками, поэтому создание локально и обработка значков возможна только с помощью крючка. Я не знаю минимальную версию, чтобы использовать эту функцию, но с 5.1.1 она отлично работает как в Cordova/Phonegap cli. С Cordova 3.5 это не сработало для меня.

Изменить: для Android вы должны использовать не менее 3.5.0

Как отлаживать процесс сборки о значках?

Команда cli использует команду CP. Если вы указали неверный путь значка, он покажет ошибку cp:

[email protected]:cordova (dev *+$%)$ cordova run android --device
cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png

Изменить: вы используете cordova build <platform> --verbose для получения журналов использования команды cp, чтобы увидеть, где копируются ваши значки

Значки должны находиться в папке в соответствии с конфигурацией. Для меня это происходит во многих подпапках: platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

Затем вы можете найти APK и открыть его в виде zip-архива для проверки наличия значков. Они должны находиться в папке res/drawable*, потому что это специальная папка для Android.

Где я должен помещать значки/заставки в свой проект?

Во многих примерах вы увидите, что значки/экраны заставки объявлены внутри папки res. Это res - специальная папка Android в выходном APK, но это не значит, что вы должны использовать папку res в своем проекте.

Вы можете поместить свой значок в любом месте, но путь, который вы используете, должен быть относительно корня проекта, а не www, поэтому будьте осторожны! Это документировано, но не ясно, потому что все примеры используют res, и вы не знаете, где находится эта папка: (

Я имею в виду, если вы поместите значок в www/icon.png, вы абсолютно должны включить www в свой путь.

Изменить Mars 2016: после обновления моих версий теперь кажется, что значки относятся к папке www, но документация не была изменена (issue)

Работает ли <icon src="icon.png"/>?

Нет, это не так!.

На Android, похоже, он работал раньше (когда атрибут плотности еще не был поддержан?), но не больше. Смотрите проблема Кордовы

В iOS, кажется, это глобальное объявление может переопределить более конкретные объявления, поэтому будьте осторожны и создайте с помощью --verbose, чтобы все работало как ожидалось.

Можно ли использовать один и тот же файл значка/заставки для всех плотностей.

Да, вы можете. Вы даже можете использовать один и тот же файл для значка и заставки (просто для проверки!). Я использовал "большой" файл значков размером 65 КБ без каких-либо проблем.

Какая разница при использовании тега платформы с атрибутом платформы

<icon src="icon.png" platform="android" density="ldpi" />

совпадает с

<platform name="android">
    <icon src="www/stample_icon.png" density="ldpi" />
</platform>

Должен ли я использовать пробел: пространство имен при использовании Phonegap?

По моему опыту, новые версии Phonegap или Cordova умеют понимать объявления значков без использования пространства имен gap: xml.

Однако я все еще жду ответа на правильный ответ: плагин cordova/phonegap добавить VS config.xml

Насколько я понимаю, некоторые функции с пространством имен gap: могут быть доступны ранее в PhonegapBuild, затем в Phonegap, а затем портированы в Кордову (?)

Требуется ли <preference name="SplashScreen" value="screen" />?

По крайней мере, для Android да. Я открыл вопрос с дополнительными разъяснениями.

Значит ли порядок объявления знака?

Да, да! Он может не иметь никакого влияния на Android, но он имеет на iOS в соответствии с моими испытаниями. Это неожиданное и недокументированное поведение, поэтому я открыл еще одну проблему.

Нужно ли мне cordova-plugin-splashscreen?

Да, это абсолютно необходимо, если вы хотите, чтобы экран заставки работал. Документация не ясна (issue), и давайте подумаем, что плагин требуется только для того, чтобы предлагать javascript API заставки.

Как изменить размер изображений по всей ширине/высоте/плотности быстро

Есть инструменты, которые помогут вам в этом. Самый лучший для меня - http://makeappicon.com/, но для этого требуется указать адрес электронной почты.

Другие возможные решения:

Можете ли вы привести пример config?

Да. Здесь мой реальный config.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>

Хорошим источником примеров являются стартовые наборы. Как phonegap-start или Ионный стартер

Ответ 3

Как и в Cordova 3.5.0-0.2.6, элемент <icon /> в файле config.xml работает со следующими оговорками:

  • Атрибут src - это путь к корневой папке проекта. Отслеживание проблемы по этому вопросу объясняет, почему изменение.

  • Элемент <icon src="..." /> без разрешения /dpi документируется как значок, используемый всеми платформами в качестве значка по умолчанию. Тем не менее, в сборках для Android значок по умолчанию копируется только в папку для удаления android, без определенных разрешений. Это приведет к тому, что пользовательский значок появится в папке /res/drawable, а значок кордовы по умолчанию с определенными разрешениями существует в других папках внутри окончательного apk (т.е. /res/drawable-ldpi). Вы должны добавить один элемент значка в config.xml для каждого разрешения на платформе Android.

Например, если ваше изображение значка находится в пути www/res/img/icon.png по отношению к вашему корневому проекту, эти строки в config.xml делают ваш значок приложения в андроиде:

<!-- 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" />

С этой конфигурацией вы можете иметь один значок изображения для всех разрешений, перезаписывающих значок кордоны по умолчанию и без пользовательских кликов. Простое построение с помощью cordova build android должно сделать трюк.

Ответ 4

Если вы хотите использовать простой в использовании способ автоматического добавления значков при локальном создании (cordova emulate ios, cordova run android и т.д.), посмотрите на это значение:

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

Надеюсь, что это начнет работать из коробки когда-нибудь в будущем, вот соответствующий отчет об ошибке в проекте Cordova:

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

Ответ 5

Вам нужно создать файл config.xml, в который вы должны поместить файл значка

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

Проверьте это: https://build.phonegap.com/docs/config-xml

есть специальные значки iOS

Ответ 6

Поскольку большинство ответов здесь нацелены на iOS, здесь есть решение для изменения значка в Android.

Для Android:

Внесите изменения в < расположение проекта > \platform\android\ ant -build\res, а не < расположение проекта > \platform\android\res

Для некоторых людей изменения в последнем местоположении, возможно, сработали, но, заметив, что Phonegap копирует с \android\res в\android\ ant -build\res, я решил зарегистрироваться там и нашел отдельный набор выпадающие папки, содержащие значок телефонной закладки по умолчанию.

Смена тех, которые наконец-то сработали.

Поскольку я создаю и запускаю локально, а не используя Adobe PhoneGap Build, изменение значков в < месте проекта > \www\res\icon\android тоже не работает.

Ответ 7

Я запускаю phonegap 3.1.0-0.15.0, так как iOS7 изменил разрешение на 120x120px. Я просто добавил файл с этими размерами в проект, а затем изменил файл info.plist.

  • Добавьте файл 120x120 в проект, щелкнув правой кнопкой файл проекта в Xcode и выбрав "Добавить файлы в" [Название вашего проекта] "...
  • Перейдите в файл info.plist в Xcode "Ресурсы/[Имя вашего проекта] -info.plist"
  • В файлах значков "(iOS 5)/Основные файлы значков/значков измените " Пункт 2 " на то, что имело имя файла (я назвал мой значок) -120.png, который я поместил в папку Project вместе со всеми другими значками, хотя это не имеет значения)

Более подробную информацию можно найти здесь: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

Исправить заставку в iOS, которую я только что вставил в новые файлы с теми же размерами и теми же именами файлов, перезаписав старые. Просто зайдите в Продукт > Очистить в строке меню в Xcode (ярлык Shift + Command + K), и он должен работать нормально!:)

Ответ 8

В кордове 3.3.1-0.1.2 ожидаемое поведение не работает правильно.

в

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

в нем четко указано, что вы полагаете, что можете поместить их в свою основную папку www в папке с именем res и значками, которые следуют за конкретным соглашением об именах, а не с исходным настраиваемым config.xml указанным способом (в котором вы указываете файл ваш выбор, который был/намного лучше). он должен оттуда оттуда для каждой платформы и помещать их в платформы /? android?/res/drawable-? dpi/icon.png, но в настоящее время он не делает такого правильного поведения... ошибка.

поэтому я предполагаю, что мы должны вручную разместить их там для каждой платформы. конечно же, необходимо удалить это из повторного дублирования его в папку www. для меня мне пришлось полностью заменить содержимое в главной папке www, так как оно просто не работало даже с приветственным миром без взлома redirect index.html, чтобы найти там какую-то странную случайную папку. Помещение папки res рядом с www имеет наибольший смысл, но, как мне кажется, это связано с этой серией каскадных и запутывающих вариантов дизайна/недостатков.

Ответ 9

в некоторых случаях внутренние скрипты кордоны не помещают значки в нужную папку, поэтому вы можете увидеть робот f *** cordova вместо своего собственного значка.

Использовать hook script;)

three-hooks-your-cordovaphonegap-project-needs

Создайте папку "after_platform_add" в папке "Крючок" и поместите/измените последний skript с devgirl.

Не забудьте установить права администратора для script, в linux "chmod 777 <script>"

Удачи!

Ответ 10

Все, что я сделал, добавили следующие строки в config.xml <icon src="www/img/appIcon.png" />

И он отлично работал

Ответ 11

Просто добавьте этот код в свой файл config.xml

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

например:

<icon src="icon.png">

Как известно, вам нужно использовать расширение .png

Ответ 12

Я также пытаюсь понять, как все это соединяется.

Вот то, что я нашел до сих пор в XCode, но надеюсь, что исправлено или подтверждено, если мои предположения верны. Я не нашел из коробки сборку для xcode от кордовы, которая правильно применяет значки. Как и вы, я обновил все значки, перечисленные в файле config.xml, но не на кости.

Итак...

Во-первых, я обычно обновляю config.xml в корне проекта с той, что находится в моей папке "www" (это я не уверен в том, что www/config.xml имеет какой-либо приоритет или даже если он применяется)

Во-вторых, я обновляю "Фазы сборки" проекта. Разверните "Copy Bundle Resources", вы уже заметили все изображения в "Ресурсах/значках", "Ресурсы/всплеск". Вы можете:

  • удалите все из них, чтобы избежать перезаписи изображений.
  • обновить все эти изображения самостоятельно (переименование в указанное имя изображения)

Как я это делал, вы могли бы минимально просто обновлять изображения со вкладки "Сводка".

Перетащите изображения из папок res в соответствующее изображение на вкладке "Сводка". (res/icon/ios → Значки приложений и res/screen/ios → Запуск изображений). Я делаю это только для iPhone, так как приложение только для iPhone. Установите флажок "prerendered", если вы не хотите, чтобы блеск появлялся.

Затем обновите "icon.png", указанный в файле plist проекта: PROJECT_NAME-Info.plist или на вкладке "Информация" при просмотре целевой цели проекта. Переименуйте его в "icon-57.png" (теперь он живет в корне вашего проекта, это было автоматически добавлено к корню, когда вы сделали перетаскивание.

Постройте, и вы должны обновить значок приложения.

Ответ 13

Просто отметив, что я только что изменил свой файл config.xml, чтобы выглядеть как пример Себастьяна.

Что-то, что также полезно при отладке всего этого, особенно если вы не выполняете локальные сборки... - это загрузить файлы XAP/IPA/APK, созданные из облака PhoneGap, и создавать папки для каждого. Переименуйте каждый файл с расширением .ZIP и извлеките содержимое каждого из них в соответствующие папки. Таким образом, вы можете теперь увидеть, что в пакете будет отправлено на телефон.

Сделав это, я вижу, что для платформы Microsoft Phone она в значительной степени игнорирует все мои попытки заменить значок или заставку. Если вы затем замените ApplicationIcon.png и SplashScreenImage.jpg, затем повторно заклейте палитру и снова переименуйте ее как файл .XAP, затем вы сможете развернуть его на свой телефон, и он будет работать отлично. Каким-то образом, есть способ просто сделать сборку PhoneGap, чтобы превратить ваши icon.png и icon.jpg в эти два файла. Возможно, предложение Масуда есть возможность здесь и использовать крючок script.

Выполнение этого же для файла .IPA(iOS) приводит к нескольким файлам, таким как icon-something.png, на родительском уровне выше www. Все они выглядят пустыми.

Выполнение этого же для файла .APK(Android) приводит к набору папок res/drawable-something, и, похоже, у меня есть значок icon.png в каждом из них. Это самый близкий к успеху, на который я могу претендовать на данный момент.