1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/zjmmjzzjm-cordova-plugin-makeblock-splashscreen

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Незаполненная версия пользовательского интерфейса приложения при запуске.

Для разработчиков, не являющихся носителями языка и не желающих изучать 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. Если это не так, устройство может не отобразить его должным образом или вообще не отобразить.

Образы запуска раскадровки

Чтобы поддерживать новые форм-факторы и многозадачность с разделением экрана и перекрытием, вам следует использовать образы запуска раскадровки. Они похожи на устаревшие образы запуска выше, но есть важные различия:

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

Ключ к созданию образа запуска раскадровки заключается в понимании того, что края изображения почти наверняка будут обрезаны. Поэтому не следует размещать важную информацию вблизи краёв любых изображений, предоставляемых в раскадровку запуска. Только центр является безопасной областью, и это почти гарантирует, что следование совету Apple о представлении незаполненного пользовательского интерфейса не будет работать хорошо. Вместо этого следующие советы должны помочь вам создать образ запуска, который работает на множестве форм-факторов, видовыми экранами и ориентациями:

  • Важная графика (логотипы, значки, заголовки) должна быть центрирована. Безопасная ограничивающая область будет меняться, поэтому вам нужно будет проверить, чтобы важная графика никогда не обрезалась. Лучше всего не предоставлять важную графику в первую очередь.
    • Вы можете точно настроить размещение и размер этих графических элементов, но у вас нет такого же точного контроля, как у устаревших образов запуска.
  • Используйте простую цветовую заливку. Если вы используете два цвета, вы захотите, чтобы один цвет заполнил верхнюю половину изображения, а второй — нижнюю половину. | | scale | idiom | width | height | size | filename | |:---|:---|:---|:---|:---|:---|:---| | | 2x | universal | any | any | 1278x2732 | Default@2xuniversalanyany.png | | | 2x | universal | com | any | 1334x750 | Default@2xuniversalcomany.png | | | 3x* | universal | any | any | 2208x2208 | Default@3xuniversalanyany.png | | | 3x | universal | any | com | 2208x1242 | Default@3xuniversalanycom.png | | | 3x | universal | com | any | 1242x2208 | Default@3xuniversalcomany.png |
  • this image is required in order for iOS utilize the other images within this scale and idiom.

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@2xiphoneanyany.png
2x iphone com any 750x1334 Default@2xiphonecomany.png
2x iphone com com 1334x750 Default@2xiphonecomcom.png
3x* iphone any any 2208x2208 Default@3xiphoneanyany.png
3x iphone any com 2208x1242 Default@3xiphoneanycom.png
3x iphone com any 1242x2208 Default@3xiphonecomany.png
2x* ipad any any 2732x2732 Default@2xipadanyany.png
2x ipad com any 1278x2732 Default@2xipadcomany.png
  • this image is required in order for iOS utilize the other images within this scale and idiom.

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 )

Вы можете оставить комментарий после Вход в систему

Введение

Данный плагин объединяет splash и loading, улучшая пользовательский опыт приложения на Cordova. Развернуть Свернуть
Apache-2.0
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/zjmmjzzjm-cordova-plugin-makeblock-splashscreen.git
git@api.gitlife.ru:oschina-mirror/zjmmjzzjm-cordova-plugin-makeblock-splashscreen.git
oschina-mirror
zjmmjzzjm-cordova-plugin-makeblock-splashscreen
zjmmjzzjm-cordova-plugin-makeblock-splashscreen
master