Metropolis UI アプリケーション テンプレート
Metropolis UI アプリケーションの開発 への移動
目次
このトピックでは、RAD Studio に用意されている、Metropolis UI アプリケーションまたはフォームの 3 つのテンプレートについて説明し、2 つのフレームワーク(FireMonkey と VCL)を対象とした実装の詳細を示します。 FireMonkey では Metropolis UI(たとえば TMetropolisUIListBoxItem など)の新しいコントロールを実装しているのに対して、VCL では Windows 8 スタイルの既存の Windows コントロールを使用している点が大きな違いです。
以下は、Metropolis UI ウィザードで選択できるテンプレートです。これらは VCL でも FireMonkey でも使用できます。
- [新しい Metropolis UI アプリケーション]テンプレート
- [グリッド Metropolis UI アプリケーション]テンプレート
- [分割ペイン Metropolis UI アプリケーション]テンプレート
Metropolis UI テンプレートは Windows 固有
グリッド レイアウトと分割ペイン レイアウトの Metropolis UI テンプレートは、特に Windows 8 向けに設計されたものですが、Windows 7、Vista、XP にも配置できます。 これらのテンプレートは、Windows 8 でよく見かけるアプリケーションを代表するものです。
テンプレートのデザインが Windows 8 に特化しており、Mac ユーザーにとって一般的な UI やなじみのある使用経験を提供するように設計されてはいないため、Mac では Metropolis UI テンプレートを使用しない方がよいでしょう。 ただし、Metropolis UI スタイルをアプリケーションから取り除いてから、アプリケーションを Mac に配置することは可能です。
すべての Metropolis UI テンプレートに共通する特性
VCL と FireMonkey のどちらの Metropolis UI テンプレートにも、Metropolis UI ルック アンド フィールを特徴づける共通の特性があります。
- 全画面表示: Metropolis UI フォームは自動的に全画面表示の高さに設定され、非クライアント領域がないため、アプリケーションは本当に全画面表示になります。
- WindowState は、wsMaximized に設定されます。
- BorderStyle は、bsNone に設定されます。
- GlassFrame のプロパティは設定されません。
FireMonkey テンプレートの機能
- AppBar: グリッド テンプレートおよび分割ペイン テンプレートのウィンドウには、画面の下部からスワイプ ジェスチャで起動できるポップアップ ツールバー(Metropolis UI スタイル AppBar)があります。
- AppBar は、ジェスチャ イベントを捕捉するための ToolbarHolder レイアウトと、ツールバーそのものが含まれている子 TPopup から成ります。 ポップアップが表示または非表示になるたびに ToolbarPopupAnimation が自動的にトリガされ、ポップアップを起動するコード(*Form.ShowToolbar)でウィンドウ サイズを基にポップアップ位置の開始値が計算されます。
- TMetropolisListBoxItem を扱う TListBox: グリッド テンプレートでも分割ペイン テンプレートでも、新しい FireMonkey Metropolis UI コントロールである TMetropolisUIListBoxItem を扱う TListBox コントロールを使用します。
- FireMonkey スタイルは、特定の Metropolis UI スタイルが格納されている StyleBook を組み込んだ Metropolis UI フォームの一部です。
- StyleLookup: FireMonkey コントロールの場合は、StyleLookup プロパティにより、普通のコントロール(たとえば TButton など)を Metropolis UI コントロール(たとえば TPasswordEditButton など)に変えることができます。 詳細については、「StyleLookup による Metropolis UI コントロールのサポート」と「FireMonkey スタイルの適用」を参照してください。
VCL テンプレートの機能
- AppBar: タッチ対応の AppBar は、横スクロール バーのすぐ上にフォームの下端に沿って配置される TLabel として実装されています。 フォームの下端から上へスワイプまたはフリックすると、AppBar が表示されます。このテンプレートには Windows 8 スタイルの[閉じる]ボタンが含まれています。
- 横スクロール バー: フォームの下部には、HorzScrollBar プロパティが TControlScrollBar に設定された TScrollBox があります。
- 仮想キーボード: The
.dpr
ファイルには、キーボードが接続されていない場合に、ユーザー入力が必要なコンポーネントに対して自動的にオンスクリーン キーボードを表示するためのコードが含まれています:
Application.UseMetropolisUI;
[新しい Metropolis UI アプリケーション]テンプレート
[新しい Metropolis UI アプリケーション]テンプレートは、定義済みのレイアウトがないため、空のキャンバスとして扱うことができます。 実行時には、表示されたフォームを(タッチやマウスで)スワイプまたはフリックして、もう一方のフォームに移動します。
- フォームには、(アプリケーション バー以外に)コンポーネントは配置されていません。
- アプリケーションのデフォルト スタイルは MetroDark です。
- VCL の[新しい Metropolis UI アプリケーション]テンプレートの場合、(フォームそのものを取り囲む)horizontal scrollbarは Visible=True に設定されています。
メモ: IDE から全画面表示の空の Metropolis UI アプリケーションを実行した場合は、
Alt+F4
キーを押してアプリケーションを終了することができます。
[グリッド Metropolis UI アプリケーション]テンプレート
グリッド アプリケーションにはいくつかの項目グループが含まれており、そのそれぞれで DetailView ページが開かれます。
FireMonkey グリッド テンプレート
DetailView: |
GridView: |
|
FireMonkey グリッド テンプレートの重要な構成要素は以下のとおりです。
スクロールはスクロール バーで行うことができます。MouseTracking = True の場合は、LMB でコンテンツを引っ張ることで行えます。
- タッチおよびジェスチャに対応しており、GestureManager を使えば、標準ジェスチャもすべて使用できます。
- ヘッダー、メイン フレーム、フッターに TLayout が使用されています。
- 横スクロール ボックス(THorzScrollBox)は、横向きの TVertScrollBox のように機能するもので、すべてのコントロールが中に含まれており、アプリケーションの実行時にページをめくるのに使用されます。 THorzScrollBox のサイズは、内部のすべてのコントロールを包含する矩形として計算されます。
- TMetropolisUIListBoxItem には、Title と Subtitle(説明文)が含まれています。
- Metro スタイル ボタン([保存]、[適用]、[閉じる])
VCL グリッド テンプレート
以下は、Metropolis UI グリッド テンプレートの VCL 実行時フォームです(VCL スタイルは設計時には使用されません)。
[VCL グリッド Metropolis UI アプリケーション]テンプレートは、以下の 2 つのフォームを持つ VCL フォーム アプリケーションです。
- groupedItems
- メイン フォーム(groupedItems.pas)には、画像とタイトルおよびサブタイトルを持つ項目のグループが表示されます。 groupedItems フォーム レイアウトは、TFlowPanel を使って実装されており、(左右に)スクロール可能です。 画像をクリックすると、ItemDetail フォームが表示されます。
- ItemDetail
- 画像、タイトル、詳細領域(内容はテキスト)が表示されます。 詳細領域全体は(左右に)スクロール可能です。 詳細領域は、読み取り専用の TMemo コンポーネントを使って実装されています。
[VCL グリッド Metropolis UI アプリケーション]テンプレートの主な特長は以下のとおりです。
- アプリケーションのデフォルト スタイルは MetropolisUIDark です(VCL の場合、スタイルは実行時にのみ使用されることに注意してください)。
- groupedItems 内の任意の画像をクリックすると、ItemDetail フォームが表示されます。
- ItemDetail フォーム内の詳細領域は(左右に)スクロール可能です。
- フォームの下端から上へスワイプすると、AppBar が表示されます。 (AppBar の詳細については、「Metropolis UI アプリケーション バーの作成」を参照してください。)
[分割ペイン Metropolis UI アプリケーション]テンプレート
分割ペイン アプリケーションには、グリッド アプリケーションと同じ GridView が含まれていますが、項目はそれよりも少なくなっています。 各項目では SplitPaneView を開きます。その中には、左側に項目のリストが、右側に DetailView が含まれています。
FireMonkey 分割ペイン テンプレート
GridPaneView: |
SplitPaneView: |
FireMonkey 分割ペイン テンプレートの重要な構成要素は以下のとおりです。
- タイトルとオプションのボタンで構成されるヘッダー: TLabel の付いた TLayout
- TImageControl(グラフィックス用)
- TLabel の付いた TLayout(情報表示用)
- TLabel(表示用)
- ボタンの付いたフッター:
- ボタンの付いた TToolBar
- Metro スタイル ボタンの付いた TLayout
VCL 分割ペイン テンプレート
以下は、分割ペイン テンプレートの VCL 実行時フォームです(VCL スタイルは設計時には使用されません)。
GroupedItems ペイン:
ItemDetail ペイン:
[VCL 分割ペイン Metropolis UI アプリケーション]テンプレートは、以下の 2 つのフォームを持つ VCL フォーム アプリケーションです。
- groupedItems
- メイン フォームは groupedItems.pas です。 このフォームには、項目グループ、画像、グループのタイトルおよびサブタイトルが表示されます。 項目領域は(左右に)スクロール可能です。 画像をクリックすると、splitItemDetail フォームが表示されます。
- splitItemDetail
- 2 つの TScrollBox 要素を使って分割ビューを表示します。
- 左側の TScrollBox は、画像とテキストを扱うリスト ビューの外見をシミュレートします。 これは、TGridPanel を使って行われます。 左側の画像、タイトル、サブタイトル、説明テキストをクリックすると、右側の詳細領域にあるタイトル ラベルとサブタイトル ラベルの表示が更新されます。
- 右側の詳細領域は、TImage と、情報を表示する読み取り専用の TMemo コンポーネントで構成される TScrollBox です。 右側の詳細領域は(上下に)スクロール可能です。
[VCL 分割ペイン Metropolis UI アプリケーション]テンプレートの主な特長は以下のとおりです。
- アプリケーションのデフォルト スタイルは MetropolisUIDark です。
- groupedItems フォーム レイアウトは、TFlowPanel を使って実装されており、(左右に)スクロール可能です。
- groupedItems 内の任意の画像をクリックすると、splitItemDetail フォームが表示され、実行時のタイトルは、groupedItems ペイン内の元の項目から得られます。
- splitItemDetail の左側にあるリスト ビューは、TGridPane コンポーネントを使って実装されています。
- splitItemDetail フォームの右側にある詳細領域は(上下に)スクロール可能です。
関連項目
- Metropolis UI アプリケーション ウィザード:
- Metropolis UI フォント
- FireMonkey スタイルの適用