Konyでステータスバーを非表示にする方法

# 目次
1. はじめに
1. ステータスバーの表示・非表示変更 (フォームごと)
1. ステータスバーの表示・非表示変更 (アプリケーション全体)
1. 実装後の動作
1. まとめ

# はじめに
アプリで表示させる内容にのみ集中させたい場合、
ギャラリーなどのようにステータスバーを表示させないでアプリ画面を全画面表示し、
アプリ以外の要素を排除するように実装します。

| 通常 | ステータスバーを非表示した場合 |
|:-----------:|:------------:|
| ![Fullscreen_showstatusbar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4ceceb3c-1e99-baa5-8826-dfd6c74ab9b3.png) | ![Fullscreen_hidestatusbar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6a759744-88bc-e3c1-c403-0fe08d535fdb.png) |

KonyはマルチOS、マルチデバイスのツールなので、
iOS/Androidどちらもソースコードでステータスバーの変更が可能です。
iOSのみ、GUIでの設定が可能ですので、その方法もご紹介していきたいと思います。

Konyでのステータスバーの表示・非表示の実装方法は以下の2通りあります。

+ フォームごとの変更
+ アプリケーション全体での変更

それぞれでどのように実装するか、この記事で紹介しようと思います:zap:

# ステータスバーの表示・非表示変更 (フォームごと)

ステータスバーをフォームごとに表示・非表示変更したい場合、
`statusBarHidden`メソッドを使用することで、
メソッドを実行したフォームでのステータスバーの表示・非表示を設定できます。
[FlexForm #statusBarHidden](https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/default.htm#FlexForm_Properties.htm#statusBa2)

本実装ではfrmChangeStatusBarのpreShowで実装しています。

```frmChangeStatusBarController.js
preShow: function() {
   this.view.statusBarHidden = true;
}
```

**iOSでの実装**

iOSではFormのプロパティにある、```Hide Status Bar```でステータスバーの表示・非表示を設定できます。
[FlexForm #statusBarHidden](https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/FlexForm_Platform_Specific_Properties.htm#statusBa2)
![iOS_changeStatusHide_new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6283d710-f595-d5d4-1d1c-86859cbddb2d.png)


```Hide Status Bar```では以下の3項目の設定があります。

+ **Apply App Setting** (Default): アプリケーション前提の設定に合わせる
+ **True**: ステータスバー非表示
+ **False**: ステータスバー表示

![iOS_changeStatusHide2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/43376c54-9888-d771-fb46-e477f149d023.png)

```Hide Status Bar```をTrueにすることでステータスバーを非表示にすることができます。

# ステータスバーの表示・非表示変更 (アプリケーション全体)

次にアプリケーション全体で、ステータスバーの表示・非表示変更を行いたい場合、
`kony.application.setApplicationProperties` で表示変更を行えます。

```kony.application.setApplicationProperties``` はアプリケーションのプロパティ設定を変更するメソッドです。
その中の**statusBarHidden**の設定を変更することで、
アプリケーション全体のステータスバーの表示・非表示を変更できます。
[kony.application.setApplicationProperties](https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.application_functions.htm)

本実装ではfrmChangeStatusBarのpreShowのタイミングで、
アプリケーション全体のステータスバーの表示設定処理をで実装しています。

```frmChangeStatusBarController.js
  preShow: function() {
    kony.application.setApplicationProperties({
      "statusBarHidden": true
    });
  }
```

**iOSでの実装**

iOSでは、アプリケーション全体のステータスバーの表示・非表示はProject Settingsから変更が可能です。
Project Settingsの```Native > iPhone/iPad/Watch```タブを表示します。

iPhone/iPad/Watch タブのPlatform Settingsに```statusBarHidden```の設定項目があります。

```statusBarHidden``` では以下の設定項目があります。

+ **True**: ステータスバー非表示
+ **False**: ステータスバー表示

上記を変更することで、アプリケーション全体のステータスバーの表示・非表示を変更できます。

![ios_app_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5195ac3b-8d0a-c9a4-df7f-9a570bed3e21.png)


# 実装後の動作
両OSで、アプリケーションからもしくはフォームから上記のステータスバー設定を行うことで、
ステータスバーを非表示にすることができました。
![Fullscreen_hidestatusbar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6a759744-88bc-e3c1-c403-0fe08d535fdb.png)


# まとめ
今回は、ステータスバーの表示をソースコードで変更する方法とGUIで設定する方法、どちらも紹介しました！
1箇所にソースコードを記載するだけで、マルチOSに対応できるのは大変便利な点かと思います:ok_hand:

アプリケーション用途に合わせてステータスバーの変更を行う機会は多いと思いますので、
是非試してみて下さい！！

問い合わせが多い内容について、まだまだ記事を作成していきます。
困ったことなどあれば、参考にして頂けるとありがたいです:sparkles: