Как добавить значок приложения в проекты телефонных звонков?
Я создал новый проект 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 в каждом из них. Это самый близкий к успеху, на который я могу претендовать на данный момент.