Spec-Zone.ru › Cordova 7

Настройка значков

В этом разделе показано, как настроить значок приложения для различных платформ. Документацию по изображениям экрана приветствия можно найти в документации плагина Cordova-Plugin-Splashscreen Документация плагина Splashscreen.

Настройка значков в CLI

При работе в CLI вы можете определить значок(и) приложения с помощью элемента <icon> (config.xml). Если вы не укажете значок, будет использоваться логотип Apache Cordova.

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />
Атрибуты Описание
src Обязательный
Путь к файлу изображения относительно каталога вашего проекта
platform Необязательный
Целевая платформа
width Необязательный
Ширина значка в пикселях
height Необязательный
Высота значка в пикселях
density Необязательный
Android
Указанная плотность значка
target Необязательный
Windows
Имя файла назначения для изображения и всех его файлов MRT

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

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

Для каждой платформы вы также можете определить набор значков с точным соответствием пикселей, чтобы они подходили к различным разрешениям экрана.

Android

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

См. также

  • Руководство по значкам Android
  • Android — Поддержка нескольких экранов

BlackBerry10

<platform name="blackberry10">
    <icon src="res/bb10/icon-86.png" />
    <icon src="res/bb10/icon-150.png" />
</platform>

См. также

  • Документация BlackBerry по целевому указанию нескольких размеров и языковых локалей.

Браузер

Значки не применимы к платформе браузера.

iOS

<platform name="ios">
    <!-- iOS 8.0+ -->
    <!-- iPhone 6 Plus  -->
    <icon src="res/ios/icon-60@3x.png" width="180" height="180" />
    <!-- iOS 7.0+ -->
    <!-- iPhone / iPod Touch  -->
    <icon src="res/ios/icon-60.png" width="60" height="60" />
    <icon src="res/ios/icon-60@2x.png" width="120" height="120" />
    <!-- iPad -->
    <icon src="res/ios/icon-76.png" width="76" height="76" />
    <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
    <!-- Spotlight Icon -->
    <icon src="res/ios/icon-40.png" width="40" height="40" />
    <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
    <!-- iOS 6.1 -->
    <!-- iPhone / iPod Touch -->
    <icon src="res/ios/icon.png" width="57" height="57" />
    <icon src="res/ios/icon@2x.png" width="114" height="114" />
    <!-- iPad -->
    <icon src="res/ios/icon-72.png" width="72" height="72" />
    <icon src="res/ios/icon-72@2x.png" width="144" height="144" />
    <!-- iPad Pro -->
    <icon src="res/ios/icon-167.png" width="167" height="167" />
    <!-- iPhone Spotlight and Settings Icon -->
    <icon src="res/ios/icon-small.png" width="29" height="29" />
    <icon src="res/ios/icon-small@2x.png" width="58" height="58" />
    <!-- iPad Spotlight and Settings Icon -->
    <icon src="res/ios/icon-50.png" width="50" height="50" />
    <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
    <!-- iPad Pro -->
    <icon src="res/ios/icon-83.5@2x.png" width="167" height="167" />
</platform>

См. также

  • Значки приложений на iPad и iPhone

Windows

Для Windows рекомендуемый подход к определению значков приложения — использование атрибута target.

<platform name="windows">
    <icon src="res/windows/storelogo.png" target="StoreLogo" />
    <icon src="res/windows/smalllogo.png" target="Square30x30Logo" />
    <icon src="res/windows/Square44x44Logo.png" target="Square44x44Logo" />
    <icon src="res/windows/Square70x70Logo.png" target="Square70x70Logo" />
    <icon src="res/windows/Square71x71Logo.png" target="Square71x71Logo" />
    <icon src="res/windows/Square150x150Logo.png" target="Square150x150Logo" />
    <icon src="res/windows/Square310x310Logo.png" target="Square310x310Logo" />
    <icon src="res/windows/Wide310x150Logo.png" target="Wide310x150Logo" />
</platform>

где src — путь к значку, который нужно добавить.

Платформа Windows автоматически обрабатывает значки MRT, поэтому если вы указываете src="res/windows/storelogo.png", следующие файлы будут скопированы в папку images приложения: res/windows/storelogo.scale-100.png, res/windows/storelogo.scale-200.png, и т. д.

TODO Определить, что такое MRT.

Атрибут target задает базовое имя для результирующих значков. Для каждого файла значка имя файла назначения вычисляется как target + '.' + MRT_qualifiers + extension(src). Для правильного отображения значков в приложении каждый target должен быть одним из имен файлов значков, определенных в файле .appxmanifest приложения.

Подводя итог вышесказанному… с помощью атрибута target можно:

  • определить группу значков для разных масштабов устройств, используя один элемент <icon ...>, например: xml <icon src="res/windows/AppListIcon.png" target="Square44x44Logo" /> , что эквивалентно следующим строкам: xml <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" /> <icon src="res/windows/Square44x44Logo.scale-150.png" width="66" height="66" /> <icon src="res/windows/Square44x44Logo.scale-200.png" width="88" height="88" /> <icon src="res/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
  • определить значки с коэффициентами масштаба, отличными от scale-100 и scale-240 (и любыми другими квалификаторами MRT)

Хотя это не рекомендуется, также можно определить значки, используя атрибуты width и height.

<platform name="windows">
    <icon src="res/windows/logo.png" width="150" height="150" />
    <icon src="res/windows/smalllogo.png" width="30" height="30" />
    <icon src="res/windows/storelogo.png" width="50" height="50" />
    <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
    <icon src="res/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
    <icon src="res/windows/Square70x70Logo.scale-100.png" width="70" height="70" />
    <icon src="res/windows/Square71x71Logo.scale-100.png" width="71" height="71" />
    <icon src="res/windows/Square71x71Logo.scale-240.png" width="170" height="170" />
    <icon src="res/windows/Square150x150Logo.scale-240.png" width="360" height="360" />
    <icon src="res/windows/Square310x310Logo.scale-100.png" width="310" height="310" />
    <icon src="res/windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
    <icon src="res/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
</platform>

См. также:

  • Руководство по значкам для платформы Windows 10.
  • Размеры плиток и значков Windows 8.1

Windows Phone 8 (Платформа WP8)

<platform name="wp8">
    <icon src="res/wp/ApplicationIcon.png" width="99" height="99" />
    <!-- tile image -->
    <icon src="res/wp/Background.png" width="159" height="159" />
</platform>

© 2012, 2013, 2015 The Apache Software Foundation
Licensed under the Apache License 2.0.
https://cordova.apache.org/docs/en/7.x/config_ref/images.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API