Незаполненная версия пользовательского интерфейса приложения при запуске.
Для разработчиков, не являющихся носителями языка и не желающих изучать Interface Builder, этот плагин имитирует устаревший метод образа запуска, насколько это возможно.
Если вы решите использовать устаревшие образы запуска, вы будете использовать следующий синтаксис в config.xml
:
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
<splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
Технически имя файла для атрибута src
может быть любым; имена файлов используются потому, что они соответствуют тому, что будет использоваться при компиляции вашего проекта. Атрибуты ширины и высоты определяют, какие образы запуска отображаются на каких устройствах следующим образом:
width | height | device (orientation) |
---|---|---|
320 | 480 | Все iPhone и iPod без Retina |
640 | 960 | iPhone 4/4s/5/5s (портрет) |
750 | 1334 | iPhone 6/6s/7 (портрет) |
1242 | 2208 | iPhone 6+/6s+/7+ (портрет) |
2208 | 1242 | iPhone 6+/6s+/7+ (пейзаж) |
768 | 1024 | Все iPad без Retina (портрет) |
1024 | 768 | Все iPad без Retina (пейзаж) |
1536 | 2048 | Все iPad с Retina (портрет) |
2048 | 1536 | Все iPad с Retina (пейзаж) |
Обратите внимание: жизненно важно, чтобы исходное изображение действительно соответствовало размеру, указанному в атрибутах width
и height
. Если это не так, устройство может не отобразить его должным образом или вообще не отобразить.
Чтобы поддерживать новые форм-факторы и многозадачность с разделением экрана и перекрытием, вам следует использовать образы запуска раскадровки. Они похожи на устаревшие образы запуска выше, но есть важные различия:
Ключ к созданию образа запуска раскадровки заключается в понимании того, что края изображения почти наверняка будут обрезаны. Поэтому не следует размещать важную информацию вблизи краёв любых изображений, предоставляемых в раскадровку запуска. Только центр является безопасной областью, и это почти гарантирует, что следование совету Apple о представлении незаполненного пользовательского интерфейса не будет работать хорошо. Вместо этого следующие советы должны помочь вам создать образ запуска, который работает на множестве форм-факторов, видовыми экранами и ориентациями:
Note: If the 3x sizes look small too you, that's because there's only one device class that currently has a 3x density: the iPhone 6+/6s+/7+.
The above looks like the following snippet when present in config.xml
:
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<splash src="res/screen/ios/Default@2x~universal~comany.png" />
<splash src="res/screen/ios/Default@2x~universal~comcom.png" />
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" />
Should one need to further fine tune based upon device idiom, one can do so. This might look like so:
scale | idiom | width | height | size | filename |
---|---|---|---|---|---|
2x* | iphone | any | any | 1334x1334 | Default@2x |
2x | iphone | com | any | 750x1334 | Default@2x |
2x | iphone | com | com | 1334x750 | Default@2x |
3x* | iphone | any | any | 2208x2208 | Default@3x |
3x | iphone | any | com | 2208x1242 | Default@3x |
3x | iphone | com | any | 1242x2208 | Default@3x |
2x* | ipad | any | any | 2732x2732 | Default@2x |
2x | ipad | com | any | 1278x2732 | Default@2x |
The above looks like the following in config.xml
:
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
Quirks and Known Issues
1. **App on target may not reflect changes to images**
Once you run the app on a target, iOS caches the launch image. Unfortunately, when you chance the images, iOS does _not_ invalidate the cache, which means you'll still see the old launch image. You should either: delete the app, or reset content & settings (simulator).
2. **Simulator may not show expected images when launched from CLI**
When Xcode deploys to a specific simulator, it only copies the assets that match the simulator's characteristics. For example, if you try to run an app on the iPhone 6s Plus simulator, only @3x launch images are copied. When compiling from the CLI, however, the default is to assume an iPhone 5s, which means only @2x launch images are copied. Unless your launch images are markedly different, chances are good the difference would go unnoticed, but this does mean that the only accurate method of testing is to test on a physical device.
3. **`anyany`** Необходимо предоставить изображения для других вариантов, которые будут использоваться.
Если вы не предоставите версию образа запуска «anyany» для определённого масштаба и идиома, другие варианты (такие как «anycom», «comany» и «comcom») будут проигнорированы.
## Информация, специфичная для Windows
Изображения заставки можно определить с помощью концепции MRT (Multi-Resolution Texture) (https://cordova.apache.org/docs/en/dev/config_ref/images.html#windows).
Если указать src="res/windows/splashscreen.png", следующие файлы будут скопированы в папку с изображениями приложения:
`res/windows/splashscreen.png` | `res/windows/splashscreen.scale-100.png`, `res/windows/splashscreen.scale-125.png` и т. д.
Поддерживаются следующие значения:
| Масштаб, % | Проект | Ширина | Высота | Имя файла |
|:------------:|:-------------------:|:-----------:|:------------:|:---------------------------------:|
| 100 | Windows 10/8.1 | 620 | 300 |`splashscreen.png` \| `splashscreen.scale-100.png` |
| 125 | Windows 10 | 775 | 375 |`splashcreen.scale-125.png` |
| 150 | Windows 10 | 930 | 450 |`splashcreen.scale-150.png` |
| 200 | Windows 10 | 1240 | 600 |`splashcreen.scale-200.png` |
| 400 | Windows 10 | 2480 | 1200 |`splashcreen.scale-400.png` |
| 140 | Windows 8.1 | 868 | 420 |`splashcreen.scale-140.png` |
| 180 | Windows 8.1 | 1116 | 540 |`splashcreen.scale-180.png` |
| 100 | Windows Phone 8.1 | 480 | 800 |`splashscreenphone.png` \| `splashscreenphone.scale-100.png` |
| 140 | Windows Phone 8.1 | 672 | 1120 |`splashscreenphone.scale-140.png` |
| 240 | Windows Phone 8.1 | 1152 | 1920 |`splashscreenphone.scale-240.png` |
__Примечание__: Размер SplashScreens для проекта Windows 10 не должен превышать 200 КБ.
__Примечание__: Поддерживаемые форматы: `.png`, `.jpg`, `.jpeg`. Смешивание расширений в целевой папке не поддерживается. То есть у вас могут быть `splashscreen.jpg` и `splashscreenphone.png`, но не `splashscreen.scale-100.png`, `splashscreen.scale-400.jpg`.
__Примечание__: Возможно, вам потребуется повторно открыть решение Visual Studio после изменения изображений и выполнения команды `cordova prepare`, чтобы изменения вступили в силу.
## Пример конфигурации
В файле `config.xml` верхнего уровня (не в `platforms`) добавьте элементы конфигурации, подобные указанным здесь.
Обратите внимание, что значение атрибута «src» относится к корневому каталогу проекта, а не к каталогу www (см. структуру каталогов ниже). Вы можете назвать исходное изображение по своему усмотрению. Внутреннее имя в приложении определяется Cordova.
Структура каталогов:
projectRoot hooks platforms plugins www css img js res screen android ios windows
```xml
<platform name="android">
<!-- вы можете использовать любую плотность, которая существует в проекте Android -->
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<platform name="ios">
<!-- Существует два механизма отображения стартовых изображений.
-- Устаревший метод (поддерживает все устройства, кроме iPad Pro 12.9):
-- Примечание: Изображения определяются шириной и высотой. Поддерживаются следующие размеры -->
<splash
``` **Конфигурация с использованием MRT концепции (рекомендуется, см. раздел «Информация о Windows» для подробностей):**
<platform name="windows">
<splash src="res/screen/windows/splashscreen.png" target="SplashScreen"/>
<splash src="res/screen/windows/splashscreenphone.png" target="SplashScreenPhone"/>
</platform>
**Конфигурация с использованием размера изображения:**
<!--<platform name="windows">-->
<!--<splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>-->
<!--<splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>-->
<!--</platform>-->
<platform name="blackberry10">
<!-- Добавьте элемент rim:splash для каждого разрешения и локали, которые вы хотите -->
<!-- http://developer.blackberry.com/html5/documentation/rim_splash_element.html -->
<rim:splash src="res/screen/blackberry/splashscreen.png"/>
</platform>
<предпочтение name="SplashScreenDelay" value="10000" />
## Preferences
#### config.xml
- `AutoHideSplashScreen` (логическое значение, по умолчанию — `true`). Указывает, следует ли автоматически скрывать заставку или нет. Заставка скрывается через время, указанное в предпочтении `SplashScreenDelay`.
```xml
<предпочтение name="AutoHideSplashScreen" value="true" />
SplashScreenDelay
(число, по умолчанию 3000). Время ожидания в миллисекундах перед автоматическим скрытием заставки. <предпочтение name="SplashScreenDelay" value="3000" />
Обратите внимание, что это значение раньше было в секундах, а не в миллисекундах, поэтому значения меньше 30 будут по-прежнему рассматриваться как секунды. (Считайте это устаревшим патчем, который исчезнет в какой-то будущей версии.)
Чтобы отключить заставку, добавьте следующее предпочтение в config.xml
:
<предпочтение name="SplashScreenDelay" value="0"/>
Windows Quirk: Вы должны отключить заставку в случае, если вы динамически обновляете всё тело документа (например, с помощью SPA-роутера), чтобы избежать влияния на пользовательский интерфейс/элементы управления. Обратите внимание, что в этом случае вы также должны напрямую ссылаться на WinJS/base.js
в HTML-коде страницы, чтобы избежать проблем с контекстом активации (CB-11658).
iOS Quirk: чтобы отключить заставку на платформе ios
, вы также должны добавить <предпочтение name="FadeSplashScreenDuration" value="0"/>
в config.xml
.
FadeSplashScreen
(логическое значение, по умолчанию true
): установите значение false
, чтобы предотвратить постепенное появление и исчезновение заставки при изменении её состояния отображения. <предпочтение name="FadeSplashScreen" value="false"/>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )