モバイルチュートリアル：マルチビューコンポーネントを使用して情報の代替ビューを表示する（iOS および Android）

モバイルチュートリアル：モバイルアプリケーション開発（iOS および Android）への移動

TMultiView コンポーネントについて

FMX.MultiView.TMultiView コンポーネントは、他のコントロールのコンテナ（マスタペイン）となり、情報の代替ビューを簡単に表示できるようにします。 TMultiView コンポーネントを使用してマスタ/詳細インターフェイスを実装することができます。これは、サポートされているどのターゲットプラットフォームでも使用できます。

マスタペインには、編集ボックス、ラベル、リストなどのあらゆるビジュアルコントロールの集合を表示することができます。
詳細ペインには、通常、マスタペインのコントロールのプロパティに応じた情報が表示されます。

次の画面は、マスタ/詳細インターフェイスの例です。マスタペイン（ドッキングされた左側のパネル）で地理的な位置を入力して［Search］をクリックすると、該当する場所の Google マップが詳細ペイン（右側のパネル）に表示されます。

マスタペインの表示モード

TMultiView クラスに定義されている一連のプロパティを使って、インターフェイスの動作を制御することができます。たとえば、TMultiView.Mode プロパティでは、マスタペインの表示モード（次の表を参照）を指定します。

TMultiView.Mode	マスタペインの表示
Drawer	ドローワモードで、マスタペインは、非表示にしたり、詳細ペインにオーバーラップするようにスライドさせることができます。
Panel	マスタパネルおよび詳細パネルが常に表示され、デバイスの種類や向きによって変わりません。マスタパネルは MultiView コンポーネントの左または右にドッキングされます。
PlatformBehaviour	アプリケーションは、自動的にマスタペインのプレゼンテーションモードを選択します。サブセクションの「プラットフォーム依存動作モード」を参照してください。
Popover	ポップアップメニュー
NavigationPane	ナビゲーションペイン
Custom	ユーザーは、マスタペインのプレゼンテーションをカスタマイズすることができます。カスタムプレゼンテーションクラスは、CustomPresentationClass プロパティに設定される必要があります。サブセクション「カスタムモード」を参照してください。

メモ： 設計時に、オブジェクトインスペクタで TMultiView.Mode プロパティの値を変更した後で、マスタペインが非表示になる場合があります。この問題を回避するには、フォームデザイナで、TMultiView コンポーネントを選択し、オブジェクトインスペクタで Visible プロパティを True に設定します。
メモ：設計時に、TMultiView を 2 つの方法で表示/非表示にすることができます：

[構造]ビューで、TMultiView ノードを右クリックし、表示または 非表示 コマンドを選択します。

[構造]ビューで、TMultiView ノードをダブルクリックします。

ドローワモード

TMultiView.Mode プロパティを Drawer に設定すると（TDrawerAppearance.Mode=OverlapDetailView と指定）、マスタペインは最初は非表示になります。ユーザーがマスタペインを表示するには、次のアニメーション画像のように、画面の左端から右に向かってスワイプします。

ポップオーバーモード

また、TMultiView.Mode プロパティを Popover に設定すると、マスタペインをポップアップメニューにすることができます（メニューは TMultiView.MasterButton プロパティで指定したマスタボタンの横に表示されます）。

重要： ポップオーバーモードでは、TMultiView.MasterButton プロパティを設定する必要があります。このプロパティは、マスタパネルの表示と非表示を切り替える UI 要素を示します。上の画面では、［Show/Hide］ボタンがマスタボタンです。

ナビゲーションペインモード

TMultiView.Mode プロパティを NavigationPane に設定すると、初期状態のマスタペインは最小化されたドッキングされたパネルとして表示されます。このパネルの幅の初期値は、CollapsedWidth プロパティで制御できます（CollapsedWidth のデフォルト値は 50 です）。

初期状態の最小化されたナビゲーションペイン

ヒント： 最小化されたナビゲーションペインの外に移動した子要素の部分を表示しないようにするには、TMultiview.ClipChildren プロパティを True に設定します。

子コントロールをすべて表示するようにナビゲーションパネルを拡大するには、TMultiView.MasterButton プロパティに指定したマスタボタンをタップします。

拡大したナビゲーションペイン

重要： ナビゲーションペインモードでは、TMultiView.MasterButton プロパティを設定する必要があります。このプロパティは、マスタパネルを折りたたんだり展開するための UI 要素を示します。上の画面のマスタボタンは次のボタンです。

プラットフォーム依存動作モード

TMultiView.Mode プロパティを PlatformBehaviour に設定すると、マスタペインの表示モードをアプリケーションに自動的に選択させることができます。この設定の場合、アプリケーションの動作は、次の表に示すように、デバイスの種類と向きによって変わります。

デバイスの種類	デバイスの向き	マスタペインの表示
スマートフォン	横、縦	ドローワ（プッシュ/オーバーラップ）
タブレット	横	ドッキングされたパネル
タブレット	縦	ドローワ（プッシュ/オーバーラップ）

カスタムモード

カスタムモードでは、行う処理に合わせてマスタペインの表示をカスタマイズすることができます。マスタペインの表示をカスタマイズする基本手順は以下のとおりです。

TMultiViewPresentation または FMX.MultiView.Presentations ユニットで宣言されたその他のクラスの下位クラスとして、MyPresentationClass のような独自のクラスを宣言します。
必要であれば、基底クラスで定義された以下の仮想メソッドを MyPresentationClass でオーバーライドします。
これらのメソッドでマスタペインの動作を定義します。
フォームデザイナで TMultiView コンポーネントを選択し、［オブジェクトインスペクタ］で Mode プロパティを Custom に設定します。

onFormCreate イベントハンドラを次のように実装します。

Delphi の場合：

 
procedure TForm1.FormCreate(Sender: TObject);
begin
  MultiView1.CustomPresentationClass := MyPresentationClass;
end;

C++ の場合：

void __fastcall TForm1::FormCreate(TObject *Sender)
{
  MultiView1->CustomPresentationClass = __classid(MyPresentationClass);
}

このトピックでは、TMultiView コンポーネントの使い方の例となる簡単なアプリケーションの開発方法を説明します。

ユーザーインターフェイスの設計

以下を選択して、空のマルチデバイスアプリケーションを作成します。
- Delphi の場合： ［ファイル｜新規作成｜マルチデバイスアプリケーション - Delphi｜空のアプリケーション］
- C++ の場合： ［ファイル｜新規作成｜マルチデバイスアプリケーション - C++Builder｜空のアプリケーション］
［ツールパレット］で TMultiView コンポーネントを選択して、フォームデザイナにドロップします。
ボタンや編集ボックスなど、必要な他のコントロールを MultiView コンテナ上にドロップします。
詳細ペインとして使いたいコンポーネント（TPanel など）を［ツールパレット］で選択し、必要なコントロールをそのパネルにドロップします。
［オブジェクトインスペクタ］で、TMultiView コンポーネントの必要なプロパティを指定します。

この手順をよりわかりやすくするため、この後のセクションでは具体的な例を挙げて説明します。モバイルデバイスのカメラを制御するアプリケーションです。

マスタペインの設計

［ツールパレット］で TMultiView コンポーネントを選択して、フォームデザイナにドロップします。
TMultiview コンテナに TButton コンポーネントを 2 つドロップし、［オブジェクトインスペクタ］でボタンのプロパティを次のように指定します。
- Name プロパティを、それぞれ「bStartCamera」と「bStopCamera」に設定します。
- Text プロパティを、それぞれ「Start Camera」と「Stop Camera」に設定します。
TMultiview コンテナに TLabel コンポーネントを 1 つドロップし、［オブジェクトインスペクタ］で Text プロパティを「Camera type:」に設定します。
TMultiview コンテナに TButton コンポーネントを 2 つドロップし、［オブジェクトインスペクタ］でボタンのプロパティを次のように指定します。
- Name プロパティを、それぞれ「bFrontCamera」と「bBackCamera」に設定します。
- Text プロパティを、それぞれ「Front」と「Back」に設定します。

詳細ペインの設計

［ツールパレット］で TPanel コンポーネントを選択して、フォームデザイナにドロップします。
［オブジェクトインスペクタ］で TPanel.Align プロパティを Client に設定します。
TCameraComponent を TPanel コンテナにドロップします。
TImage を TPanel コンテナにドロップし、プロパティを次のように設定します。
- Name = imgCameraView
- Align = Client

ヒント： 詳細ペインの要素はすべて、1 つのコンテナ（この例では TPanel コンポーネント）内に置きます。このコンテナを TMultiView.TargetControl プロパティに指定してください。

カメラのボタン機能の実装

アプリケーション開発の最後に、アプリケーションのボタンのイベントハンドラと、デバイスのカメラから画像を取得する private メソッド GetImage を実装します。

OnClick イベントハンドラを実装するには：

フォームデザイナで［Start Camera］ボタンをダブルクリックし、以下のコードを記述します。

Delphi の場合：

procedure TForm1.bStartCameraClick(Sender: TObject);
begin
   CameraComponent1.Active := true;
end;

C++ の場合：

void __fastcall TForm1::bStartCameraClick(TObject *Sender)
{
CameraComponent1->Active = true;
}

［Stop Camera］ボタンをダブルクリックし、以下のコードを記述します。

Delphi の場合：

procedure TForm1.bStopCameraClick(Sender: TObject);
begin
   CameraComponent1.Active := false;
end;

C++ の場合：

void __fastcall TForm1::bStopCameraClick(TObject *Sender)
{
CameraComponent1->Active = false;
}

［Front］ボタンをダブルクリックし、以下のコードを記述します。

Delphi の場合：

procedure TForm1.bFrontCameraClick(Sender: TObject);
begin
  CameraComponent1.Active := False;
  CameraComponent1.Kind := FMX.Media.TCameraKind.FrontCamera;
  CameraComponent1.Active := True;
end;

C++ の場合：

void __fastcall TForm1::bFrontCameraClick(TObject *Sender) {
 // select Front Camera
	CameraComponent1->Active = false;
	CameraComponent1->Kind = TCameraKind::FrontCamera;
	CameraComponent1->Active = true;
}

［Back］ボタンをダブルクリックし、以下のコードを記述します。

Delphi の場合：

procedure TForm1.bBackCameraClick(Sender: TObject);
begin
  CameraComponent1.Active := False;
  CameraComponent1.Kind := FMX.Media.TCameraKind.BackCamera;
  CameraComponent1.Active := True;
end;

C++ の場合：

void __fastcall TForm1::bBackCameraClick(TObject *Sender) {
 // select Back Camera
	CameraComponent1->Active = false;
	CameraComponent1->Kind = TCameraKind::BackCamera;
	CameraComponent1->Active = true;
}

onSampleBufferReady イベントハンドラを実装するには：

フォームデザイナで CameraComponent1 をダブルクリックし、以下のコードを実装します。

Delphi の場合：

procedure TForm1.CameraComponent1SampleBufferReady(Sender: TObject;
  const ATime: Int64);
begin
       TThread.Synchronize(TThread.CurrentThread, GetImage);
end;

C++ の場合：

void __fastcall TForm1::CameraComponent1SampleBufferReady(TObject *Sender,
		  const __int64 ATime)
{
	GetImage();
}

TForm1 クラスには、private メソッド GetImage を実装する必要があります。onSampleBufferReady イベントハンドラでは、このメソッドを呼び出してデバイスカメラの画像を取得しています。

以下の手順を実施します。

TForm1 クラスの private セクションで GetImage メソッドを次のように宣言します。
- Delphi の場合：
```
 private
    { Private declarations }
    procedure GetImage;
```
- C++ の場合：
- ヘッダーファイル（.h ファイル）に以下のコードを追加します。
```
private:	// User declarations
	void __fastcall GetImage();
```

GetImage メソッドを次のように実装します。

Delphi の場合：

procedure TForm1.GetImage;
begin
  CameraComponent1.SampleBufferToBitmap(imgCameraView.Bitmap, True);
end;

C++ の場合：

void __fastcall TForm1::GetImage()
{
	CameraComponent1->SampleBufferToBitmap(imgCameraView->Bitmap, true);
}

TMultiView コンポーネントのプロパティの設定

フォームデザイナで TMultiView コンポーネントを選択し、［オブジェクトインスペクタ］でプロパティを次のように設定します。

TargetControl = Panel1
Mode = Drawer
Visible = True
DrawerOptions ノードを展開し、Mode プロパティを OverlapDetailView に設定します。
ShadowOptions ノードを展開し、Color プロパティを Beige に設定します（このプロパティではマスタパネルの影の色を定義します。どの色を使用してもかまいません）。

サンプルアプリケーションの実行

このアプリケーションを次のようにして実行します。

［プロジェクトマネージャ］でターゲットプラットフォームを選択します（サポートされているプラットフォームは Android と iOS です）。
Shift+Ctrl+F9 を押して、デバッガを使わずにアプリケーションを実行します。
デバイス画面の左端から右に向かってスワイプし、マスタパネルを開きます。
マスタパネルで［Start Camera］をクリックし、デバイスのカメラをアクティブにします。
状況に応じて、［Front］ボタンまたは［Back］ボタンを使って、前面カメラと（あれば）背面カメラを選択することができます。

左にスライドしてマスタパネルを閉じます。

TMultiView を使用するモバイル製品サンプル

C:\Users\Public\Documents\Embarcadero\Studio\21.0\Samples の Mobile Samples フォルダで以下を参照してください。

MultiView Demo サンプル
Location Demo サンプル
Music Player サンプル
REST Surf Spot Finder サンプル (Delphi)
REST Surf Spot Finder サンプル (C++)

モバイルチュートリアル：マルチビューコンポーネントを使用して情報の代替ビューを表示する（iOS および Android）

目次

TMultiView コンポーネントについて

マスタペインの表示モード

ドローワモード

ポップオーバーモード

ナビゲーションペインモード

プラットフォーム依存動作モード

カスタムモード

ユーザーインターフェイスの設計

マスタペインの設計

詳細ペインの設計

カメラのボタン機能の実装

TMultiView コンポーネントのプロパティの設定

サンプルアプリケーションの実行

TMultiView を使用するモバイル製品サンプル

関連項目

案内メニュー

個人用ツール

名前空間

変種

表示

その他

検索

RAD Studio 10.4 Sydney

RAD Studio 10.4 トピック

他言語版

以前のバージョン

Assistance

ツール

モバイル チュートリアル：マルチビュー コンポーネントを使用して情報の代替ビューを表示する（iOS および Android）

目次

TMultiView コンポーネントについて

マスタ ペインの表示モード

ドローワ モード

ポップオーバー モード

ナビゲーション ペイン モード

プラットフォーム依存動作モード

カスタム モード

ユーザー インターフェイスの設計

マスタ ペインの設計

詳細ペインの設計

カメラのボタン機能の実装

TMultiView コンポーネントのプロパティの設定

サンプル アプリケーションの実行

TMultiView を使用するモバイル製品サンプル

関連項目

案内メニュー

検索

モバイルチュートリアル：マルチビューコンポーネントを使用して情報の代替ビューを表示する（iOS および Android）

マスタペインの表示モード

ドローワモード

ポップオーバーモード

ナビゲーションペインモード

カスタムモード

ユーザーインターフェイスの設計

マスタペインの設計

サンプルアプリケーションの実行