Metropolis UI フライアウトの作成

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

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


Metropolis UI スタイルのフライアウトは、一時的に表示される軽量のポップアップ ウィンドウです。フライアウトは、その領域の外をクリックすると閉じます。このチュートリアルでは、画面の右側からシーンに入ってきて終了するかどうかを確認するフライアウトの作成方法を説明します。

新しい FireMonkey プロジェクトの作成

  1. [ファイル|新規作成|その他...|<パーソナリティ> プロジェクト|FireMonkey Metropolis UI アプリケーションを選択し、[新しい Metropolis UI アプリケーション]テンプレートを選択して、FireMonkey Metropolis UI アプリケーションを新規作成します。
  2. [ファイル|すべて保存を選択して、作成した新しいプロジェクトを保存します。

フライアウトの設計

1. TPopup をフォームに追加し、フォームの左上隅([オブジェクト インスペクタ]で Position プロパティ(X、Y)を Position=(0,0) に設定)に配置します。
2. TPanelTPopup に追加します。
  • パネルの Align プロパティを Contents に設定します。
  • パネルの StyleLookup プロパティを flyoutpanel に設定します。
3. TLabelTLayout をパネルに追加します。
  • ラベルの Align プロパティを Left に設定します。
  • レイアウトの Align プロパティを Bottom に設定します。
  • ラベルの StyleLookup プロパティを flyouttitlelabel に設定します。
  • ラベルの Text プロパティを、「Really close?」など、終了アクションを確認するテキストに設定します。
4. TButton をレイアウトに追加します。
  • ボタンの Align プロパティを Client に設定します。
  • ボタンの StyleLookup プロパティを flyoutbutton に設定します。
  • ボタンの Text プロパティを、「Yes」など、終了アクションを承認するテキストに設定します。
5. [オブジェクト インスペクタ]で、TPopupPosition.X プロパティをクリックし、[TFloatAnimation の新規作成]を選択します。
  • 追加されたアニメーションの Trigger プロパティを IsOpen=true に、TriggerInverse プロパティを IsOpen=false に設定します。
フライアウトは次のようになります。

FlyoutDesign.png

フライアウトのコードの実装

1. フライアウトのボタンをダブルクリックして、OnClick イベント ハンドラを追加します。
  • Delphi の場合:
procedure TForm1.Button1Click(Sender: TObject);
begin
   Application.Terminate;
end;
  • C++ の場合:
void __fastcall TForm1::Button1Click(TObject *Sender) {
   Application->Terminate();
}
2. フライアウトを表示するための private メソッドを TForm1 クラスで宣言します。
  • Delphi の場合:
//Declaration
private
procedure ShowFlyout(AShow: Boolean);

//Implementation
procedure TForm1.ShowFlyout(AShow: Boolean);
begin
  FloatAnimation1.StartValue := ClientWidth;
  FloatAnimation1.StopValue :=
    Width/2 - Popup1.Width/2;
  Popup1.IsOpen := AShow;
end;
  • C++ の場合:
  • 次の関数宣言を .h ファイルprivate 宣言に追加します。
private: 
   void ShowFlyout(bool AShow);
void TForm1::ShowFlyout(bool AShow) {
   FloatAnimation1->StartValue = ClientWidth;
   FloatAnimation1->StopValue = (Width / 2 - (Popup1->Width / 2));
   Popup1->IsOpen = AShow;
}

フライアウトの使用

1. フォームに TButton オブジェクトを追加します。
  • ボタンの StyleLookup プロパティを closebutton に設定します。
  • ボタンをダブルクリックして、OnClick イベント ハンドラを追加します。
  • Delphi の場合:
procedure TForm1.Button2Click(Sender: TObject);
begin
   ShowFlyout(True);
end;
  • C++ の場合:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
        ShowFlyout(true);
}
2. TLayout をフォームに追加します。このレイアウトは、フライアウトを表示するときに位置を決めるためのダミー オブジェクトとして使用します。
  • レイアウトの Align プロパティを Center に設定します。
3. TPopupPlacementTarget プロパティをダミー レイアウトに設定します。
4. F9 キーを押してアプリケーションを実行します。

関連項目