Metropolis UI フライアウトの作成
Metropolis UI アプリケーションの開発 への移動
Metropolis UI スタイルのフライアウトは、一時的に表示される軽量のポップアップ ウィンドウです。フライアウトは、その領域の外をクリックすると閉じます。このチュートリアルでは、画面の右側からシーンに入ってきて終了するかどうかを確認するフライアウトの作成方法を説明します。
新しい FireMonkey プロジェクトの作成
- [ファイル|新規作成|その他...|<パーソナリティ> プロジェクト|FireMonkey Metropolis UI アプリケーション]を選択し、[新しい Metropolis UI アプリケーション]テンプレートを選択して、FireMonkey Metropolis UI アプリケーションを新規作成します。
- [ファイル|すべて保存]を選択して、作成した新しいプロジェクトを保存します。
フライアウトの設計
- 1. TPopup をフォームに追加し、フォームの左上隅([オブジェクト インスペクタ]で Position プロパティ(X、Y)を
Position=(0,0)
に設定)に配置します。 - 2. TPanel を TPopup に追加します。
-
- パネルの Align プロパティを
Contents
に設定します。 - パネルの StyleLookup プロパティを
flyoutpanel
に設定します。
- パネルの Align プロパティを
-
- 3. TLabel と TLayout をパネルに追加します。
-
- ラベルの Align プロパティを
Left
に設定します。 - レイアウトの Align プロパティを
Bottom
に設定します。 - ラベルの StyleLookup プロパティを
flyouttitlelabel
に設定します。 - ラベルの Text プロパティを、「
Really close?
」など、終了アクションを確認するテキストに設定します。
- ラベルの Align プロパティを
-
- 4. TButton をレイアウトに追加します。
-
- ボタンの Align プロパティを
Client
に設定します。 - ボタンの StyleLookup プロパティを
flyoutbutton
に設定します。 - ボタンの Text プロパティを、「
Yes
」など、終了アクションを承認するテキストに設定します。
- ボタンの Align プロパティを
-
- 5. [オブジェクト インスペクタ]で、TPopup の Position.X プロパティをクリックし、[TFloatAnimation の新規作成]を選択します。
-
- 追加されたアニメーションの Trigger プロパティを
IsOpen=true
に、TriggerInverse プロパティをIsOpen=false
に設定します。
- 追加されたアニメーションの Trigger プロパティを
-
- フライアウトは次のようになります。
フライアウトのコードの実装
- 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);
-
-
- 次の関数実装を .cpp ファイルに追加します。
-
void TForm1::ShowFlyout(bool AShow) {
FloatAnimation1->StartValue = ClientWidth;
FloatAnimation1->StopValue = (Width / 2 - (Popup1->Width / 2));
Popup1->IsOpen = AShow;
}
フライアウトの使用
- 1. フォームに TButton オブジェクトを追加します。
-
- ボタンの StyleLookup プロパティを
closebutton
に設定します。 - ボタンをダブルクリックして、OnClick イベント ハンドラを追加します。
- ボタンの StyleLookup プロパティを
-
-
- Delphi の場合:
procedure TForm1.Button2Click(Sender: TObject);
begin
ShowFlyout(True);
end;
-
- C++ の場合:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
ShowFlyout(true);
}
- 2. TLayout をフォームに追加します。このレイアウトは、フライアウトを表示するときに位置を決めるためのダミー オブジェクトとして使用します。
-
- レイアウトの Align プロパティを
Center
に設定します。
- レイアウトの Align プロパティを
-
- 3. TPopup の PlacementTarget プロパティをダミー レイアウトに設定します。
- 4. F9 キーを押してアプリケーションを実行します。