#目次
- はじめに
- App Menuを使用してメニューを作成する方法
- Widgetを使用してメニューを作成する方法
- まとめ
- 参考
#はじめに
アプリでよく見るフッターにある固定メニューの作り方について、今回は2つご紹介します。
シンプルなメニューを作成したい場合は、1の方法を、
メニューを選択したときにアニメーションなどを設定したい場合は2の方法を試してみてくださいね
#1. App Menuを使用してメニューを作成する方法
####①画面の作成
2つの画面を作成します。
| frmHome | frmBlog |
|---|---|
 |
 |
下のフッターメニューでHomeを押したら、frmHomeが
下のフッターメニューでBlogを押したら、frmBlogが
表示されます。
####②フッターにある固定メニューを表示させる
- frmHomeをクリック
- 右のメニューのProperties > General > App MenuのEditをクリック
- フッターにある固定メニューを表示させたいデバイスにチェックをいれる
- OKをクリック
そうするとこのようにフッターにある固定メニューが表示されます。
frmBlogでも同じように設定します。
####③フッターにある固定メニューの詳細設定
- frmHomeをクリック
- 青い枠の中で右クリック
- Configure App-Menuをクリック
- App-Menu Master Dataが表示されます。
項目の説明
| 項目 | 説明 |
|---|---|
| Skin | アプリメニューのスキン |
| Focus Skin | アプリメニューをタップした時のスキン |
| ID | 英数字で構成されるアプリメニューの一意の識別子 |
| Title | アプリメニューのタイトル |
| Icon | アプリメニューのアイコン |
| onClick | アプリメニューをタップした時のイベント |
SkinはiOSネイティブでのみ動作します。
今回はこのように設定しています。
各メニューをクリックした時のアクションは、onClick列の・・・をクリックすると、
以下のようにエディターが開きます。
今回は、それぞれの画面に遷移するようにアクション設定をしています。
####④実装の確認
— Kony (@Kony12763790) March 22, 2021
メニューをタップするたびに画面が切り替わっているのが分かりますね！
#2. Widgetを使用してメニューを作成する方法
####①画面の作成
2つの画面を作成します。レイアウトは以下です。
| frmHomePage | frmBlogPage |
|---|---|
 |
 |
下のフッターメニューで左を押したら、frmHomePageが
下のフッターメニューで右を押したら、frmBlogPageが
表示されます。
####②コーディング
2つの画面のコーディングを行います。
◆frmHomePage
define({
// frmBlogPageへ遷移
onNavigateForm : function(){
var ntf = new kony.mvc.Navigation("FooterMenu02/frmBlogPage");
ntf.navigate();
},
// アクティブアイコンを設定
onPreShow : function(){
this.view.imgHome.src = "album_active_3.png";
}
});
◆frmBlogPage
define({
// frmBlogPageへ遷移
onNavigateForm : function(){
var ntf = new kony.mvc.Navigation("FooterMenu02/frmHomePage");
ntf.navigate();
},
// アクティブアイコンを設定
onPreShow : function(){
this.view.imgBlog.src = "shared_active_3.png";
}
});
####③アクション設定
◆frmHomePage
・frmHomePage > Action:preShow
・flxRight > Action:onClick
◆frmBlogPage
・frmBlogPage > Action:preShow
・flxLeft > Action:onClick
####④iOSのトランジション設定
この方法でフッターメニューを作成する場合、遷移時間のデフォルト値が0.3となっている、かつ右から左へ移動します。
— Kony (@Kony12763790) March 23, 2021
こちらでも大丈夫ですが、もう少しユーザーフレンドリーにするため、以下の設定を行います。
-
frmHomePage > Properties > Form > Transition:IN かつ Transition OUT
-
以下のように設定
| Before | After |
|---|---|
 |
 |
frmBlogPageでも同じように設定してください。
各項目の説明は以下になります。
| 項目 | 説明 |
|---|---|
| Transition Direction | フォームの遷移方向を指定 |
| Transition Effect | フォームの効果を指定 |
| Transition Duration | フォームがナビゲーションに入るまでの時間の指定 |
####⑤実装の確認
— Kony (@Kony12763790) March 23, 2021
こちらもメニューをタップするたびに画面が切り替わっているのが分かりますね！
#まとめ
今回は、フッターにある固定メニューの作り方について説明しました。
デフォルトのApp Menuを使った方法は、
GUIで簡単に複数フォームに固定メニューを作成できるので、おすすめです！
みなさんもぜひ活用してみてくださいね
#参考
App Menu Widget：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#App_Menu.htm
inTransitionConfig Property：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/FlexForm_Properties.htm#inTransitionConfig