目次
1.はじめに
2.実装方法
3.まとめ
はじめに
本記事では、Konyでステータスバーのカラーを変更する方法をご紹介します。
KonyはマルチOS、マルチデバイスのツールなので、
iOS/Androidどちらもソースコードでステータスバーの設定変更が可能です。
ステータスバーの設定には以下の２パターンがあります。
- アプリ全体の設定
- フォームごとの設定
それでは実際にどう設定するのかを解説してきます。
実装方法
アプリ全体の設定方法
アプリ全体でステータスバーの色を変更するには、以下のメソッドを使用します。
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
このプロパティでは、フォームごとにステータスバーの色を設定することができ、ステータスバーの色が別途設定してあるフォームに移動するとそちらの設定が適応されます。
デモの作成
今回は、アプリ全体のステータスバーを青色に表示した後、
ボタンを押してフォームのステータスバーの色を黄色に変更するデモを作成したいと思います。
完成イメージはこちらになります。
1. Widgetの追加
まずは、以下のようにButton Widgetを追加します。
2. Controllerに処理を追加
次にFormControllerに処理を追加します。
追加した記述は以下です。
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を使ってアプリ全体でのステータスバーの色を設定しています。
ここでは、青のカラーコードを指定しています。
setApplicationProperties : function(){
kony.application.setApplicationProperties({
"statusBarColor": "00acff",
});
},
このメソッドは、アプリ起動時に呼び出したいため、onPreShowで呼ぶように指定しました。
続いて、特定のフォームのステータスバーの色を設定するメソッドを作成して、
statusBarColorプロパティに黄色のカラーコードを設定します。
setFormstatusBarColor : function(){
this.view.statusBarColor = "ffff00";
},
このメソッドは、ボタン押下時に呼び出したいためonClickに指定しました。
次にアクションの紐付けを行っていきましょう。
3. Actionの紐付け
-
Form を選択して、画面右側のAction > preShow横のEdit をクリックし、Invoke Function > onPreShow を選択します。
-
Button を選択して、画面右側のAction > onClick横のEdit をクリックし、Invoke Function > onClick を選択します。
4.完成
アプリ起動時はステータスバーが青色になっており、
ボタンタップ後、黄色に変化したことが分かるかと思います
まとめ
今回は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