LoginSignup
7

More than 5 years have passed since last update.

cordova-plugin-statusbarの使い方。

Posted at

cordovaを使ってハイブリッドアプリを作る際、気になることが。

スクリーンショット 2015-08-18 22.00.19.png

そう。ステータスバー(キャリアとか充電とかのバー)とHTML5で書いたコンテンツが被ってること。見ずらいし気持ち悪いしどうにかしたい。

こんな課題を解決するpluginとしてcordova-plugin-statusbarというものがある。
忘備録として書き残す。

1. pluginの導入。

他のpluginの導入と同様に

~$ cordova plugin add cordova-plugin-statusbar

これでOK。一応確認してみると

~$ cordova plugin list                                                     
cordova-plugin-statusbar 1.0.1 "StatusBar"
cordova-plugin-whitelist 1.0.0 "Whitelist"
org.apache.cordova.console 0.2.13 "Console"
org.apache.cordova.device 0.3.0 "Device"

となってる。ちゃんとStatusBar入ってるね。

2. 設定

config.xmlファイルにちょちょっと書き加えるだけでOK。

config.xml
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#00FF00" />

こんな感じのコードをnameタグと同じインデントの高さで追加。

StatusBarOverlaysWebView

「WebViewのコンテンツにステータスバーを被せるかどうか」を設定できる。被せるならvalue="true"、被せないならvalue="false"。今回、被せたくないのでvalue="false"。

StatusBarBackgroundColor

「ステータスバーの背景色を何色にするか」を設定できる。
自分の好きな色をvalueに設定しよう。

⭐︎JSからStatusBarオブジェクトを通して設定することもできます。詳しくは本家で。

変更後実行すると、以下のようになるはず。

スクリーンショット 2015-08-18 21.59.42.png

うん、ちゃんと被ってない!すっきりですな。

参考

cordova-plugin-statusbar

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7