Cordova iOS アプリでコンテンツがステータスバーに重ならないようにする cordova-plugin-statusbar
Cordova で iOS アプリを作ると、ページ上部がステータスバーに重なってしまう。これを回避するには、cordova-plugin-statusbar というプラグインを入れる。
# 「--save」オプションは config.xml にプラグイン情報を追記するためのオプション
$ cordova plugin add cordova-plugin-statusbar --save
そして config.xml に以下の記述を追加する。
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="#000000" />
StatusBarOverlaysWebViewをfalseにすることで、コンテンツがステータスバー部分に重ならないようにしてくれる。StatusBarBackgroundColorがステータスバーの背景色。上の設定により、ステータスバーはコンテンツ部分とは別の領域になるので、ココでステータスバーのスタイリングを行う。StatusBarStyleがステータスバーの文字色。背景色を加味して見やすい色にしておく。
これで OK。
なお、このプラグイン、「cordova-plugin-googlemaps」というプラグインとの相性が悪く、Google Map の表示領域だけがステータスバーの高さ分だけ上に食い込んで表示されてしまう。cordova-plugin-googlemaps を使う時は、対象の要素の上部に padding-top:20px などを指定して余分に余白を付けておくなどしておくと良いだろう。以下の GitHub Issues では別のやり方も紹介されている。
- 参考：iOS Status Bar and this plugin causing web view to shift down 20px · Issue #657 · mapsplugin/cordova-plugin-googlemaps · GitHub
- 参考：Layout issue with status bar · Issue #242 · mapsplugin/cordova-plugin-googlemaps · GitHub
今回紹介したプラグインを使って実際に動作するサンプルプロジェクトを GitHub に作成した。以下のリポジトリの feat/pluginStatusBar ブランチをクローンし、cordova prepare コマンドを叩けば動作検証ができるだろう。