Metropolis UI アプリケーション テンプレート

提供: RAD Studio
移動先: 案内検索

Metropolis UI アプリケーションの開発 への移動

このトピックでは、RAD Studio に用意されている、Metropolis UI アプリケーションまたはフォームの 3 つのテンプレートについて説明し、2 つのフレームワーク(FireMonkey と VCL)を対象とした実装の詳細を示します。 FireMonkey では Metropolis UI(たとえば TMetropolisUIListBoxItem など)の新しいコントロールを実装しているのに対して、VCL では Windows 8 スタイルの既存の Windows コントロールを使用している点が大きな違いです。

以下は、Metropolis UI ウィザードで選択できるテンプレートです。これらは VCL でも FireMonkey でも使用できます。

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 コントロールを使用します。
  • Metropolis UI フォームでは、使用可能な画面領域をすべて占有するために、FireMonkey コントロールは AlignPadding プロパティを広く使用します。
  • FireMonkey スタイルは、特定の Metropolis UI スタイルが格納されている StyleBook を組み込んだ Metropolis UI フォームの一部です。

VCL テンプレートの機能

  • AppBar: タッチ対応の AppBar は、横スクロール バーのすぐ上にフォームの下端に沿って配置される TLabel として実装されています。 フォームの下端から上へスワイプまたはフリックすると、AppBar が表示されます。このテンプレートには Windows 8 スタイルの[閉じる]ボタンが含まれています。
  • 横スクロール バー: フォームの下部には、HorzScrollBar プロパティが TControlScrollBar に設定された TScrollBox があります。
  • 仮想キーボード: The .dpr ファイルには、キーボードが接続されていない場合に、ユーザー入力が必要なコンポーネントに対して自動的にオンスクリーン キーボードを表示するためのコードが含まれています:
Application.UseMetropolisUI;

[新しい Metropolis UI アプリケーション]テンプレート

[新しい Metropolis UI アプリケーション]テンプレートは、定義済みのレイアウトがないため、空のキャンバスとして扱うことができます。 実行時には、表示されたフォームを(タッチやマウスで)スワイプまたはフリックして、もう一方のフォームに移動します。

  • フォームには、(アプリケーション バー以外に)コンポーネントは配置されていません。
  • アプリケーションのデフォルト スタイルは MetroDark です。
  • VCL の[新しい Metropolis UI アプリケーション]テンプレートの場合、(フォームそのものを取り囲む)horizontal scrollbarVisible=True に設定されています。

メモ: IDE から全画面表示の空の Metropolis UI アプリケーションを実行した場合は、Alt+F4 キーを押してアプリケーションを終了することができます。

[グリッド Metropolis UI アプリケーション]テンプレート

グリッド アプリケーションにはいくつかの項目グループが含まれており、そのそれぞれで DetailView ページが開かれます。

FireMonkey グリッド テンプレート

DetailView:

GridView:

GridViewFontSm.png

GridPanelSM.png

FireMonkey グリッド テンプレートの重要な構成要素は以下のとおりです。

スクロールはスクロール バーで行うことができます。MouseTracking = True の場合は、LMB でコンテンツを引っ張ることで行えます。

  • タッチおよびジェスチャに対応しており、GestureManager を使えば、標準ジェスチャもすべて使用できます。
  • ヘッダー、メイン フレーム、フッターに TLayout が使用されています。
  • 横スクロール ボックス(THorzScrollBox)は、横向きの TVertScrollBox のように機能するもので、すべてのコントロールが中に含まれており、アプリケーションの実行時にページをめくるのに使用されます。 THorzScrollBox のサイズは、内部のすべてのコントロールを包含する矩形として計算されます。
  • TMetropolisUIListBoxItem には、Title と Subtitle(説明文)が含まれています。
  • Metro スタイル ボタン([保存]、[適用]、[閉じる])

VCL グリッド テンプレート

以下は、Metropolis UI グリッド テンプレートの VCL 実行時フォームです(VCL スタイルは設計時には使用されません)。

VCLGridtemplatePage1.png

VCLGridPage2Small.png

[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:

FMXSplitPane.png

FMXSplitPanepage2.png

FireMonkey 分割ペイン テンプレートの重要な構成要素は以下のとおりです。

  • タイトルとオプションのボタンで構成されるヘッダー: TLabel の付いた TLayout
  • TImageControl(グラフィックス用)
  • TLabel の付いた TLayout(情報表示用)
  • TLabel(表示用)
  • ボタンの付いたフッター:
    • ボタンの付いた TToolBar
    • Metro スタイル ボタンの付いた TLayout

VCL 分割ペイン テンプレート

以下は、分割ペイン テンプレートの VCL 実行時フォームです(VCL スタイルは設計時には使用されません)。

GroupedItems ペイン:

VCLSplitPane3.png

ItemDetail ペイン:

VCLPaneSmall3.png

[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 フォームの右側にある詳細領域は(上下に)スクロール可能です。

関連項目