Konyでステータスバーのカラーを変更する方法

目次
-------

1.はじめに
2.実装方法
3.まとめ

はじめに
-------
本記事では、Konyでステータスバーのカラーを変更する方法をご紹介します。
KonyはマルチOS、マルチデバイスのツールなので、
iOS/Androidどちらもソースコードでステータスバーの設定変更が可能です。

![スクリーンショット 2021-02-26 20.22.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/518af355-885e-08a6-3965-8475c1868d82.png)
ステータスバーの設定には以下の２パターンがあります。

* **アプリ全体の設定**
* **フォームごとの設定**

それでは実際にどう設定するのかを解説してきます。

実装方法
-------
#### アプリ全体の設定方法
アプリ全体でステータスバーの色を変更するには、以下のメソッドを使用します。

``kony.application.setApplicationProperties("key","value")``
このメソッドの引数には {key : value} を渡す必要があります。様々なkeyパラメータがありますが、今回は以下のパラメータを使用します。

|key|keyの説明|value|
|:--|:--|:--|
| **statusBarColor** |ステータスバーの色を設定できます|color codeを指定|

他のパラメータについては、以下をご参照ください。(setApplicationProperties)
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.application_functions.htm


####  フォームごとの設定方法
フォームごとにステータスバーの色を変更するには、以下のプロパティを使用します。

``Form名.statusBarColor``
このプロパティでは、フォームごとにステータスバーの色を設定することができ、ステータスバーの色が別途設定してあるフォームに移動するとそちらの設定が適応されます。

#### デモの作成 
今回は、アプリ全体のステータスバーを青色に表示した後、
ボタンを押してフォームのステータスバーの色を黄色に変更するデモを作成したいと思います。

完成イメージはこちらになります。

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e71193bb-34ee-d4d2-e91e-bfa9803f2e6b.gif)




###### 1. Widgetの追加
まずは、以下のようにButton Widgetを追加します。
![スクリーンショット 2021-02-26 19.37.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cbc10581-1072-ccba-2ef6-37c28c0c2ba0.png)

###### 2. Controllerに処理を追加
次にFormControllerに処理を追加します。
追加した記述は以下です。

```js:FormController.js
define({ 
  
//フォーム全体のステータスバーカラーを変更
  setApplicationProperties : function(){
    kony.application.setApplicationProperties({
      "statusBarColor": "00acff",
    });	
  }, 

  onPreShow : function(){
    this.setApplicationProperties();
  },

//特定フォームのステータスバーカラーを変更
  setFormstatusBarColor : function(){
    this.view.statusBarColor = "ffff00";
  },
  
  onClick : function() {
    this.setFormstatusBarColor();
  }
});
```
1つずつ解説していきます。

まず、**setApplicationProperties** メソッドを作成して、
その中で``kony.application.setApplicationProperties``を使ってアプリ全体でのステータスバーの色を設定しています。
ここでは、青のカラーコードを指定しています。

```js
  setApplicationProperties : function(){
    kony.application.setApplicationProperties({
      "statusBarColor": "00acff",
    }); 
  }, 	 
```
このメソッドは、アプリ起動時に呼び出したいため、**onPreShow**で呼ぶように指定しました。

続いて、特定のフォームのステータスバーの色を設定するメソッドを作成して、
``statusBarColor``プロパティに黄色のカラーコードを設定します。

```js
  setFormstatusBarColor : function(){
    this.view.statusBarColor = "ffff00";
  },
```
このメソッドは、ボタン押下時に呼び出したいため**onClick**に指定しました。

次にアクションの紐付けを行っていきましょう。

###### 3. Actionの紐付け  

* Form を選択して、画面右側の**Action > preShow**横の**Edit** をクリックし、**Invoke Function** > **onPreShow** を選択します。
![スクリーンショット 2021-02-26 20.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/30433630-f97e-7f1a-c9cf-425b72c7b83d.png)

* Button を選択して、画面右側の**Action > onClick**横の**Edit** をクリックし、**Invoke Function** > **onClick** を選択します。
![スクリーンショット 2021-02-26 20.14.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bf73531f-026b-a169-c9cf-458a4226d240.png)

###### 4.完成  
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e71193bb-34ee-d4d2-e91e-bfa9803f2e6b.gif)

アプリ起動時はステータスバーが青色になっており、
ボタンタップ後、黄色に変化したことが分かるかと思います:point_up_tone1:

まとめ
-----
今回はKonyでステータスバーのカラーを変更する方法を紹介いたしました。
KonyTeamではステータスバーを非表示にする方法も紹介していますので、気になる方は是非チェックしてみてください！
https://qiita.com/Kony_Team/items/ffb3da19751be920e4a8



**参考**
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.application_functions.htm 
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/default.htm#FlexForm_Properties.htm#statusBarColor