TabControl の遷移を使用する
このセクションでは、モバイル プラットフォームのアプリケーションで、FMX.TabControl.TTabControlAction のプロパティである、Transition、Direction、Tab を使用する方法を説明します。
モバイル フォームに TTabControl を追加する
- 次のいずれかを選択してマルチデバイス フォームを作成します。
- ファイル > 新規作成 > マルチデバイス アプリケーション - Delphi
- ファイル > 新規作成 > マルチデバイス アプリケーション - C++Builder
- 図 1: [ファイル]メニューを使用して、マルチデバイス アプリケーション を作成する。
- [マルチデバイス アプリケーション] ダイアログ ボックスで、[空のアプリケーション]を選択します。
- 図 2: マルチデバイス アプリケーションで空のアプリケーションを選択する
- ツール パレットからフォームに TTabControl を追加します。
- TabItems を追加するには、TabControl を右クリックし、[TTabItem の追加]を選択します。 TTabItems を 3 つ追加します。
TabItem にボタンを追加する
- ツール パレットから、TButton を1つ TabItem1 に、TabItem2 にも1つボタンを追加します。
- TActionList をモバイル フォームに追加します。
- Button1 を TabItem1 で選択し、Action プロパティをオブジェクト インスペクタで選択し、[標準アクションの新規作成|タブ|TChangeTabAction]を Action プロパティに割り当てます。
- 同じことを Button2 を TabItem2 上で繰り返します。
- TabItem2 上で、Button2 を選択します。 オブジェクト インスペクタで、Action ノードを展開します。 Tab 項目を選択し、右側の下矢印をクリックします。 リストから TabItem3 を選択して、ボタンをクリックすると、TabItem2 タブから TabItem3 タブへ遷移が発生するよう定義します。 これにより、Button2 キャプションが Go to TabItem3 に変更された点に注目してください。
TTabControlAction プロパティの利用
ここでは、FMX.TabControl.TTabControlAction のプロパティ Transition と Direction --- タブ コントロール間のアクティブ タブの切り替えについて触れます。
Transition プロパティは TTabTransition 型で、次の値を使用します:
- None: 遷移先タブへの単純な遷移です。
- Slide: 切り替え動作にビジュアル アニメーションを使用します。
Transition を Slide に設定すると、Direction プロパティを使用してアニメーションの方向を指定することができます。
Direction プロパティは TTabTransitionDirection 型で、次の値を使用します:
- Normal: 前方(左から右)へのタブ項目切り替え遷移効果を定義します。 遷移先タブが現在のアクティブ タブより前にある場合には、FMX.TabControl.TTabControlAction は、タブのコンテンツを右にスライドし、後ろにある場合には左にスライドします。
- Reversed: 後方(右から左)へのタブ項目切り替え遷移効果を定義します。
ListBox を扱う場合は、タブ コントロールを使用する際、TabItem1 から TabItem2 へ移動するクリック時イベントを使用することができます(理想的には、TPosition を None に設定します)。 ListBox を選択し、以下のコードに示すような OnItemClick イベントを作成します。
procedure TMasterDetail.ListBox3ItemClick(const Sender: TCustomListBox;
const Item: TListBoxItem);
begin
ChangeTabAction1.Tab := TabItem2;
ChangeTabAction1.ExecuteTarget(self);
end;