1.概要
アプリの開発時に、必要なメニューや項目が画面に収まらない程多くなってしまうケースがあるかと思います。
そのような場合の対処として、ボタンをタップあるいはクリックすることで開閉するメニュー、いわゆるアコーディオンメニューとすることで表示領域の確保、必要な項目やデータのみを表示するといったことが可能になります。
ボタンをタップ（クリック）することで開閉するメニューを作成する
Unifinityでは以下の機能を併用することで実現できます
- 画面：「サブフォーム」コントロール
- DB：アコーディオンメニューに必要な階層の管理
- 処理：タップ（クリック）ごとに行うメニューの開閉
2.作成方法
2.1.画面の用意
以下、2つの画面を用意します。
- アプリの画面
- アコーディオンメニューとして使用する画面
アプリの画面内に、2．を『サブフォーム』として使用しますので、アコーディオンメニューを表示したい場所にサブフォームを配置します。
2.2.アコーディオンメニュー用の画面作成
ここから、実際にアコーディオンメニューを作成していきます。
表示する文字は【DB】と【処理】で制御しますので、ここでは「一行分の項目」を作成します。
この画面は以下の要素で構成されます。
- 親カテゴリー
- 子カテゴリー
- データ用カテゴリーID ※このコントロールは【処理】に必要なため、プロパティエリアの「オブジェクト」から「表示」のチェックを外し、非表示にします。画面内の緑の箇所です。プロパティエリアの「コントロール」からご確認頂けます。
- 開閉ボタン
コントロールを重ねる必要があるため、判別がしやすいように色を変えています。
緑のコントロールが「データ用カテゴリーID」です。
サンプルでは「表示」にチェックがありますが、こちらを外します。
開閉に使用しているボタンは【リソース】に登録しています。
処理に関連するため、「キーワード」にそれぞれ「0」「1」を設定します。
2.3.DBの作成
アコーディオンメニューの構成や、開閉状態の管理にはDBを使用します。
添付のようなテーブルを用意します。各項目の説明は「備考」に記載しておりますので、サンプルプロジェクトをご参照ください。
2.4.処理の作成
サブフォームとして用意したコントロールと、3で作成したDBを連携する処理を作成します。
処理は大まかに3つに分かれます。
- 親カテゴリーの現在行の取得
- アコーディオンメニューの開閉の管理
- 画面の更新
順に解説していきます。
2.4.1.親カテゴリーの現在行の取得
処理名を設定します。サンプルでは「record」と命名しています。
最初に、コンポーネントから「データセット/現在行取得」を選択します。
「フォーム」には『1.アコーディオンメニューとして使用する画面』を、「コントロール」には「01.親カテゴリー」を選択します。
次に、コンポーネントから「ディクショナリー/取得」を選択します。処理名は「category_id」としています。この名称は「キー」にも使用します。
「対象」は「結果の引き継ぎ」で、処理は上記の処理（record）を選択します。
「キー」は「文字」で、処理名と同様の文字列を設定します。サンプルでは「category_id」になります。
2.4.2. アコーディオンメニューの開閉の管理
「3.DBの作成」で作成したDBと処理を関連付けていきます。if を使用して、メニューの開閉時に応じた処理を作成します。
2.4.3.画面の更新
タップ（クリック）によって画面を更新し、メニューの開閉状態を切り替えます。
2.5.作成した処理を画面に配置する
【画面】に戻り、作成した処理をコントロールに埋め込みます。メニューの開閉は「＋」ボタンで行いますので、『1.アコーディオンメニューとして使用する画面』内の、『開閉ボタン』コントロールに処理を設定します。
『03.開閉ボタン』を選択した状態で、「オブジェクト」内の「動作設定」タブ内の「実行処理」から、作成した処理（サンプルでは「Spread」になります）を設定します。
Unifinity Studioで『実行(F5)」ボタンを押すと実際の動作を確認できますので試してみてください。
完成したら、サブフォーム内のコントロールの色をアプリに合わせ、自然なレイアウトに仕上げてください。
3.サンプルアプリ
以下のリンクからダウンロードできます。