license: > Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
В этом разделе показано, как настроить иконку приложения и необязательную заставку для различных платформ, как при работе с Cordova CLI (описано в разделе Интерфейс Командной Строки) так и с помощью средств SDK специфических для платформы (подробнее в разделе Руководство по поддерживаемым платформам).
При работе в CLI, исходные файлы для иконок расположены в индивидуальных подкаталогах для каждой платформы, расположенных в каталоге www/res/icons
проекта. Только что созданный проект, по умолчанию, идет с набором иконок Cordova, которые вы можете заменить для тех платформ на которых вы будете работать.
Android предусматривает иконки для низкого, среднего, высокого и сверхвысокого разрешения:
android/icon-36-ldpi.png android/icon-48-mdpi.png android/icon-72-hdpi.png android/icon-96-xhdpi.png
Платформа iOS предусматривает квадратные иконки 72x72 пикселя иконок для iPads и 57x52 пикселей для iPhone и iPod, с вариантом иконок высокого разрешеня 2x для Retina дисплеев:
ios/icon-57-2x.png ios/icon-57.png ios/icon-72-2x.png ios/icon-72.png
Windows Phone предусматривает значок по умолчанию 48x48 пикселей, наряду с различными изображениями плиток, используемых при представления приложения:
windows-phone/icon-48.png windows-phone/icon-62-tile.png windows-phone/icon-173-tile.png
Для BlackBerry 10 необходимо определить элемент icon в файле config.xml:
<icon src="blackberry10/icon-86.png" />
Смотрите документацию BlackBerry для указания различных размеров и локалей.
[http://developer.blackberry.com/html5/documentation/icon_element.html]
Tizen предусматривает 128x128 пиксельные иконки:
tizen/icon-128.png
Используйте Splashscreen API для включения отображения приложения заставки на различных платформах. При работе в CLI, исходные файлы заставки расположены в рамках подкаталоге www/res/screens
проекта.
Android указывает два набора заставок ориентированных на портретную и альбомную ориентацию, для низкого, среднего, высокого и сверхвысокого разрешения:
android/screen-hdpi-landscape.png android/screen-hdpi-portrait.png android/screen-ldpi-landscape.png android/screen-ldpi-portrait.png android/screen-mdpi-landscape.png android/screen-mdpi-portrait.png android/screen-xhdpi-landscape.png android/screen-xhdpi-portrait.png
Платформы iOS определяет варианты для iPhone/iPod и iPad, с вариантами для retina дисплеев в различных ориентациях. 568 H файл относится к более продолговатому экрану iPhone 5:
ios/screen-ipad-landscape-2x.png ios/screen-ipad-landscape.png ios/screen-ipad-portrait-2x.png ios/screen-ipad-portrait.png ios/screen-iphone-landscape-2x.png ios/screen-iphone-landscape.png ios/screen-iphone-portrait-2x.png ios/screen-iphone-portrait.png ios/screen-iphone-portrait-568h-2x.png
Windows Phone определяет только один вариант заставки:
windows-phone/screen-portrait.jpg
В следующих разделах раскрывается как настроить заставки, когда работаешь с использованием SDK и связанных с ними средств командной строки описанных в Руководстве по платформам.
Не забудьте установить плагин SplashScreen перед тем как использовать методы navigator.splashscreen.hide()
или navigator.splashscreen.show()
.
Разместите файлы изображения 9-patch в директории platforms/android/res/drawable*
проекта на Android.
Размер для каждой директории должен быть следующим:
Если вы хотите использовать заставку по умолчанию, предоставляемую с Cordova, вы должны скопировать png файлы из platforms/android/www/res/screen/android
в platforms/android/res/drawable*/
:
cd platforms/android/res mkdir drawable-port-ldpi cp -p ../assets/www/res/screen/android/screen-ldpi-portrait.png drawable-port-ldpi/screen.png mkdir drawable-land-ldpi cp -p ../assets/www/res/screen/android/screen-ldpi-landscape.png drawable-land-ldpi/screen.png mkdir drawable-port-mdpi cp -p ../assets/www/res/screen/android/screen-mdpi-portrait.png drawable-port-mdpi/screen.png mkdir drawable-land-mdpi cp -p ../assets/www/res/screen/android/screen-mdpi-landscape.png drawable-land-mdpi/screen.png mkdir drawable-port-hdpi cp -p ../assets/www/res/screen/android/screen-hdpi-portrait.png drawable-port-hdpi/screen.png mkdir drawable-land-hdpi cp -p ../assets/www/res/screen/android/screen-hdpi-landscape.png drawable-land-hdpi/screen.png mkdir drawable-port-xhdpi cp -p ../assets/www/res/screen/android/screen-xhdpi-portrait.png drawable-port-xhdpi/screen.png mkdir drawable-land-xhdpi cp -p ../assets/www/res/screen/android/screen-xhdpi-landscape.png drawable-land-xhdpi/screen.png
Имена под-директорий в директории drawable
должны соответствовать конвенциям Android для поддержки различных размеров экранов и файлов ресурсов.
В config.xml
, добавьте следующие значения:
<preference name="SplashScreen" value="splash" /> <preference name="SplashScreenDelay" value="10000" />
Первая строка указывает изображение которое отображать в качестве заставки. Это имя PNG файла в директориях drawable*
. Если название файла изображения отличается от splash.png
, вам необходимо изменить значение в данной строке. Не указывайте расширение файл (т.е., .png
). Если вы хотите использовать заставку по умолчанию, предоставляемую с Cordova как указано выше, используйте значение screen
.
Вторая строка устанавливает задержку по умолчанию, как долго заставка будет отображаться в миллисекундах. Значение должно содержать максимальное ожидаемое время загрузки приложение. Значение по умолчанию для SplashScreenDelay - 3000мс.
И наконец, заставки должны отображаться, только в том случае если это необходимо. Когда ваше приложение запустилось, и окно браузера загрузилось, ваше приложение должно скрывать заставку, чтобы ваш основной экран становился видимым. Из-за того что время загрузки приложения может различаться из-за различного набора параметров, рекомендуется чтобы ваше приложение явно вызывало navigator.splashscreen.hide()
в Javascript методе который обрабатывает событие [deviceready](../cordova/events/events.deviceready.html)
. В противном случае заставка будет отображаться в течении временного интервала определенного в значении SplashScreenDelay которое вы сконфигурировали выше. Этот событийно ориентированный подход, крайне рекомендуется в отличие от отображения заставки в течении фиксированного промежутка времени.
Скопируйте изображения заставки в каталог Resources/splash
проекта iOS. Добавьте изображения только для тех устройств, которые вы хотите поддерживать, например iPad или iPhone. Размер каждого изображения должен быть:
Добавьте элемент rim:splash в config.xml для каждого разрешения и локали, которые вы хотите поддерживать:
http://developer.blackberry.com/html5/documentation/rim_splash_element.html