Power Apps でタブUIを作るとき、モダンコントロールのタブコンポーネントは制約が多く自由なカスタマイズが難しい場面があります。ギャラリーをタブとして使うパターンを覚えると、デザインを自由に制御しながらレスポンシブなタブインターフェースが作れます。
ギャラリーをタブとして使う発想
タブUIに必要な要素は2つです。タブバー（どのタブが選ばれているかを表示する部分）と、タブに対応したコンテンツエリアです。
ギャラリーをタブバーとして使うアイデアはシンプルです。タブの名前一覧をコレクションか Table 関数で用意して、それをギャラリーの Items に設定します。各行がタブの1項目になります。選択されたタブ名を変数に保持して、コンテンツエリアの表示を切り替えるという構成です。
モダンコントロールのタブと比べて、この方法では色・フォント・間隔・選択インジケーターのデザインをプロパティで完全にコントロールできます。社内アプリでブランドカラーに合わせたいときや、アイコン付きのタブを作りたいときに重宝します。
タブデータの準備
タブの一覧はシンプルなテーブルで用意します。アプリが起動したときに OnStart か OnVisible でコレクションを作ります。
ClearCollect(colTabs,
{TabName: "概要", TabIcon: "📋", Order: 1},
{TabName: "詳細", TabIcon: "📝", Order: 2},
{TabName: "設定", TabIcon: "⚙️", Order: 3}
)TabName がタブのラベル、TabIcon が絵文字アイコン、Order が並び順です。必要に応じて列を追加できます。タブをあとから増やしたいときもコレクションに行を追加するだけで対応できます。
ギャラリーをタブバーとして設定する
水平スクロールなしの Horizontal Gallery を使います。Items に colTabs を設定して、テンプレート内にタブ名のラベルを配置します。
- Insert → Gallery → Horizontal を追加する
- Items プロパティに colTabs を設定する
- テンプレート内のラベルの Text に ThisItem.TabName を設定する
- アイコン用のラベルを追加して Text に ThisItem.TabIcon を設定する
- ギャラリーの OnSelect で選択タブを変数に保存する
// ギャラリーの OnSelect
UpdateContext({varSelectedTab: ThisItem.TabName})
選択中タブのハイライト
選択されているタブを見た目で示すには TemplateFill を使います。
If(ThisItem.TabName = varSelectedTab,
ColorFade(Color.Blue, 0.7),
RGBA(0, 0, 0, 0)
)varSelectedTab と一致する行だけ背景色を変える方法です。TemplateFill の使い方についてはギャラリーで選択行をハイライトする記事でも詳しく解説しています。
コンテンツエリアをタブに連動させる
タブごとに異なるコンテンツを表示するには、各コンテンツコンテナの Visible を varSelectedTab で切り替えます。
// 概要コンテナの Visible
varSelectedTab = "概要"
// 詳細コンテナの Visible
varSelectedTab = "詳細"
// 設定コンテナの Visible
varSelectedTab = "設定"各タブのコンテンツを VerticalContainer にまとめて、その Visible を上記の式で制御します。タブが切り替わると varSelectedTab が変わり、対応するコンテナだけが表示されます。
ギャラリーをコンテナに追従させてレスポンシブ化する
タブバーのギャラリーをコンテナに追従させて、画面幅に応じて自動的にサイズが変わるレスポンシブ対応にするには、ギャラリーの Width プロパティをコンテナの幅に連動させます。
// タブバーギャラリーの Width
Parent.WidthParent.Width は親コンテナの幅を返します。これを設定するとコンテナが広がればギャラリーも広がり、縮めばギャラリーも縮みます。各タブの幅は TemplateWidth で制御します。
// TemplateWidth（タブ1項目の幅）
Parent.Width / CountRows(colTabs)タブの数でコンテナ幅を割ることで、タブが何項目あっても均等に並びます。タブを1つ追加してもコレクションに行を追加するだけで、幅の計算は自動で更新されます。
初期タブの設定
アプリを開いたとき varSelectedTab が空だと何も表示されないため、OnVisible か OnStart で初期値を設定します。
UpdateContext({varSelectedTab: "概要"})画面遷移で戻ってきたときも初期タブに戻したい場合は OnVisible に書きます。画面遷移後も前のタブを保持したい場合はグローバル変数に変更します。OnStart と OnVisible の使い分けについてはOnStart と OnVisible の使い分けの記事が参考になります。
まとめ
ギャラリーをタブバーとして使うパターンの全体設計をまとめます。
| 要素 | 実装 |
|---|---|
| タブデータ | ClearCollect で colTabs を作成 |
| タブバー | Horizontal Gallery、Items に colTabs |
| タブ選択 | OnSelect で UpdateContext({varSelectedTab: ThisItem.TabName}) |
| ハイライト | TemplateFill で varSelectedTab と一致する行を強調 |
| コンテンツ | 各コンテナの Visible を varSelectedTab で切替 |
| レスポンシブ | Width = Parent.Width、TemplateWidth = Parent.Width / CountRows |
ギャラリーを使ったタブUIは、モダンコントロールが成熟するまでの代替手段として十分実用的です。デザインの自由度が高く、コレクションでタブを管理するため追加・削除もコードで制御できます。ぜひ自分のアプリで試してみてください。
ギャラリーの使い方を一覧でまとめた記事はこちらからご覧ください。
