設定したのがずいぶん前だったので忘れていました…。
今回は、Cordova で開発しているアプリにステータスバーを追加する方法についてご紹介します。
Android なら、特に意識せずに開発ができるのですが、iOS で、特にヘッダーが固定されているデザインの時にデザインが少々崩れます。
ステータスバーのエリアまで、アプリの画面になるので、ヘッダー固定で、それ以外の要素がスクロールになったとき、ヘッダーを突き抜けてスクロールしてしまいます。
スクリーンショットを取り忘れてしまったので文章で書いておりますが、わかりにくいですね…。
発生した現象については、下記の記事が参考になります。
cordova-plugin-statusbarの使い方。 – Qiita
https://qiita.com/nagao_norihiro/items/2e6189c147098dc63ab9
そのため、iOSを対象としているときや、どうしても必要ない！という場合以外は、念のため導入しておくことをおすすめします。
さて、ステータスバーを設定する方法ですが、cordova-plugin-statusbar というプラグインを使用します。
GitHub のページは下記から。
GitHub – apache/cordova-plugin-statusbar: Apache Cordova
https://github.com/apache/cordova-plugin-statusbar
プラグインのインストールは、下記のコマンドを実行します。
cordova plugin add cordova-plugin-statusbar
インストールが終わったら、config.xml に preference で設定します。
まず、ステータスバーを有効にする場合は、下記を追加します。
<preference name="StatusBarOverlaysWebView" value="false" />
次に、ステータスバーの背景色を下記で指定します。
<preference name="StatusBarBackgroundColor" value="#000000" />
なお、色の指定は16進数 6文字で指定してください。
白色だからと、うっかり #FFF と書いたところ…青になりました。
きっちり 6文字で記載してください。
あとは、iOS でよくある、ステータスバーとタップすると上までスクロールするという処理を追加したい場合は下記を追加ます。
<preference name="StatusBarDefaultScrollToTop" value="true" />
デフォルト値は false なので、ステータスバータップでスクロールをさせたい場合は、true に設定します。
最後に、私は使いませんでしたが、ステータスバーのスタイルを指定するときは、下記を使用します。
<preference name="StatusBarStyle" value="lightcontent" />
設定できるオプションは、default, lightcontent, blacktranslucent, blackopaque があるようです。
デフォルト値は lightcontent です。
以上、Cordova アプリにステータスバーを追加する方法でした。
Android のみであれば任意でOKだと思いますが、iOS で利用するのであれば、導入しておくことをおすすめします。
