Corredor

ウェブ、プログラミングの勉強メモ。

Cordova iOS アプリでコンテンツがステータスバーに重ならないようにする cordova-plugin-statusbar

HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門

HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門

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" />
  • StatusBarOverlaysWebViewfalse にすることで、コンテンツがステータスバー部分に重ならないようにしてくれる。
  • StatusBarBackgroundColor がステータスバーの背景色。上記設定により、ステータスバーはコンテンツ部分とは別の領域になるので、ココでステータスバーのスタイリングを行う。
  • StatusBarStyle がステータスバーの文字色。背景色を加味して見やすい色にしておく。

これで OK。

なお、このプラグイン、「cordova-plugin-googlemaps」というプラグインとの相性が悪く、Google Map の表示領域だけがステータスバーの高さ分だけ上に食い込んで表示されてしまう。cordova-plugin-googlemaps を使う時は、対象の要素の上部に padding-top:20px などを指定して余分に余白を付けておくなどしておくと良いだろう。以下の GitHub Issues では別のやり方も紹介されている。

今回紹介したプラグインを使って実際に動作するサンプルプロジェクトを GitHub に作成した。以下のリポジトリの feat/pluginStatusBar ブランチをクローンし、cordova prepare コマンドを叩けば動作検証ができるだろう。