cordova-plugin-statusbar

Объект StatusBar предоставляет некоторые функции для настройки статусной строки iOS и Android.

Установка

Этот метод установки требует cordova 5.0+

cordova plugin add cordova-plugin-statusbar

Более старые версии cordova все еще могут быть установлены через **устаревший** идентификатор

cordova plugin add org.apache.cordova.statusbar

Также возможно установить плагин через URL репозитория напрямую (нестабильно)

cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Настройки

config.xml

• StatusBarOverlaysWebView (булево, по умолчанию true). В iOS, задает, будет ли статусная строка накладываться на WebView при запуске.

  <preference name="StatusBarOverlaysWebView" value="true" />
  

• StatusBarBackgroundColor (строка цвета в формате шестнадцатеричного кода, значение по умолчанию отсутствует). В iOS, задает цвет фона статусной строки в формате шестнадцатеричного кода (#RRGGBB) при запуске. Если это значение не установлено, фон будет прозрачным.

  <preference name="StatusBarBackgroundColor" value="#000000" />
  

• StatusBarStyle (стиль статусной строки, по умолчанию lightcontent). В iOS, устанавливает стиль статусной строки. Доступные варианты: default, lightcontent, blacktranslucent, blackopaque.

  <preference name="StatusBarStyle" value="lightcontent" />
  

• StatusBarDefaultScrollToTop (булево, по умолчанию false). В iOS, позволяет Cordova WebView использовать стандартное поведение прокрутки до верха. По умолчанию false, чтобы вы могли прослушивать событие "statusTap" (описанное ниже) и настраивать поведение самостоятельно.

  <preference name="StatusBarDefaultScrollToTop" value="false" />
  

Особенности Android

Рекомендации Android 5+ предусматривают использование другого цвета для статусной строки, отличного от цвета основного приложения (в отличие от единого цвета статусной строки во многих приложениях iOS), поэтому вы можете установить цвет статусной строки во время выполнения, используя StatusBar.backgroundColorByHexString или StatusBar.backgroundColorByName. Один из способов сделать это:

if (cordova.platformId == 'android') {
    StatusBar.backgroundColorByHexString("#333");
}

Также можно сделать статусную строку полупрозрачной. Android использует шестнадцатеричные значения ARGB, которые имеют формат #AARRGGBB. Первая пара букв, AA, представляют альфа-канал. Вы должны преобразовать ваши десятичные значения непрозрачности в шестнадцатеричное значение. Вы можете узнать больше об этом здесь.

Например, черная статусная строка с непрозрачностью 20%:

if (cordova.platformId == 'android') {
    StatusBar.overlaysWebView(true);
    StatusBar.backgroundColorByHexString('#33000000');
}

Скрытие при запуске

Во время выполнения вы можете использовать функцию StatusBar.hide, но если вы хотите скрыть статусную строку при запуске приложения на iOS, вы должны изменить файл Info.plist вашего приложения.

Добавьте/отредактируйте эти два атрибута, если они отсутствуют. Установите **"Status bar is initially hidden"** в **"YES"** и установите **"View controller-based status bar appearance"** в **"NO"**. Если вы редактируете его вручную без Xcode, ключи и значения следующие:

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Методы

Этот плагин определяет глобальный объект StatusBar.

Несмотря на то, что он находится в глобальной области видимости, он недоступен до события deviceready.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(StatusBar);
}

• StatusBar.overlaysWebView
• StatusBar.styleDefault
• StatusBar.styleLightContent
• StatusBar.styleBlackTranslucent
• StatusBar.styleBlackOpaque
• StatusBar.backgroundColorByName
• StatusBar.backgroundColorByHexString
• StatusBar.hide
• StatusBar.show

Свойства

• StatusBar.isVisible

События

• statusTap

StatusBar.overlaysWebView

Указывает, будет ли статусная строка накладываться на WebView.

StatusBar.overlaysWebView(true);

Описание

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

Поддерживаемые платформы

• iOS 7+
• Android 5+

Быстрый пример

StatusBar.overlaysWebView(true);
StatusBar.overlaysWebView(false);

StatusBar.styleDefault

Используйте стандартный стиль статусной строки (темный текст для светлого фона).

StatusBar.styleDefault();

Поддерживаемые платформы

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.styleLightContent

Используйте стиль статусной строки lightContent (светлый текст для темного фона).

StatusBar.styleLightContent();

Поддерживаемые платформы

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.styleBlackTranslucent

Используйте стиль статусной строки blackTranslucent (светлый текст для темного фона).

StatusBar.styleBlackTranslucent();

Поддерживаемые платформы

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.styleBlackOpaque

Используйте стиль статусной строки blackOpaque (светлый текст для темного фона).

StatusBar.styleBlackOpaque();

Поддерживаемые платформы

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.backgroundColorByName

В iOS, когда вы устанавливаете StatusBar.overlaysWebView в false, вы можете установить цвет фона статусной строки по имени цвета.

StatusBar.backgroundColorByName("red");

Поддерживаемые имена цветов:

black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown

Поддерживаемые платформы

• iOS
• Android 5+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.backgroundColorByHexString

Устанавливает цвет фона статусной строки по шестнадцатеричному коду.

StatusBar.backgroundColorByHexString("#C0C0C0");

Также поддерживаются сокращенные свойства CSS.

StatusBar.backgroundColorByHexString("#333"); // => #333333
StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB

В iOS, когда вы устанавливаете StatusBar.overlaysWebView в false, вы можете установить цвет фона статусной строки по шестнадцатеричному коду (#RRGGBB).

В Android, когда StatusBar.overlaysWebView установлено в true, и в WP7&8, вы также можете указать значения в формате #AARRGGBB, где AA — значение альфа-канала.

Поддерживаемые платформы

• iOS
• Android 5+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.hide

Скрыть статусную строку.

StatusBar.hide();

Поддерживаемые платформы

• iOS
• Android
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.show

Показать статусную строку.

StatusBar.show();

Поддерживаемые платформы

• iOS
• Android
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.isVisible

Чтение этого свойства показывает, отображается ли статусная строка.

if (StatusBar.isVisible) {
    // do something
}

Поддерживаемые платформы

• iOS
• Android
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

statusTap

Прослушивайте это событие, чтобы узнать, была ли нажата статусная строка.

window.addEventListener('statusTap', function() {
    // scroll-up with document.body.scrollTop = 0; or do whatever you want
});

Поддерживаемые платформы

• iOS