アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

ステータスバーの表示変更について

表示画面領域の小さいスマートフォンにとってステータスバーのスペースすら惜しく感じてしまうものですが、利用者としては時間やバッテリー状態がアプリを立ち上げながらも確認できるのは便利です。逆にゲームのように大きな画面で楽しみたいものの場合はステータスバーはない方が良いでしょう。

アプリカンを使ったアプリにおいてもステータスバーの状態は自由に設定が可能です。それもコーディングはなく、設定ファイルを変更するだけで可能です。

設定について

設定は applican.xml に行います。以下の3つの設定を組み合わせます。

<property name="STATUS_BAR">true</property>
<property name="STATUS_BAR_OVERLAY">true</property>
<property name="STATUS_BAR_STYLE">dark</property>

STATUS_BAR

ステータスバーの表示、非表示を設定します。

STATUS_BAR_OVERLAY

ステータスバーの透過設定を行います。

STATUS_BAR_STYLE

ステータスバーのテーマを設定します。lightまたはdarkを指定します。

実際に設定を行った時の画面を紹介します。

1. ステータスバー表示(通常)

まずはステータスバーを普通に表示する場合です。

通常表示

<property name="STATUS_BAR">true</property>
<property name="STATUS_BAR_OVERLAY">false</property>
<property name="STATUS_BAR_STYLE">dark</property>

2. ステータスバー非表示

ステータスバーを非表示にする場合はSTATUS_BARにfalseを設定します。

非表示

<property name="STATUS_BAR">false</property>
<property name="STATUS_BAR_OVERLAY">false</property>
<property name="STATUS_BAR_STYLE">dark</property>

3. ステータスバー透過(白表示)

ステータスバーを透過にしつつ、テーマにlightを適用します。

透過(light)

<property name="STATUS_BAR">true</property>
<property name="STATUS_BAR_OVERLAY">true</property>
<property name="STATUS_BAR_STYLE">light</property>

4. ステータスバー透過(黒表示)

続いてdarkテーマを適用します。

透過(dark)

<property name="STATUS_BAR">true</property>
<property name="STATUS_BAR_OVERLAY">true</property>
<property name="STATUS_BAR_STYLE">dark</property>

いかがでしょうか。この設定を使いこなして、ステータスバーをアプリに合わせて自由に設定してください。