TabControl の遷移を使用する

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

FireMonkey アプリケーション ガイド への移動


このセクションでは、モバイル プラットフォームのアプリケーションで、FMX.TabControl.TTabControlAction のプロパティである、TransitionDirectionTab を使用する方法を説明します。

モバイル フォームに TTabControl を追加する

  1. 次のいずれかを選択してマルチデバイス フォームを作成します。
    NewMobileApp.png
    図 1: [ファイル]メニューを使用して、マルチデバイス アプリケーション を作成する。
  2. [マルチデバイス アプリケーション] ダイアログ ボックスで、[空のアプリケーション]を選択します。
    NewMobileApp BlankApp.png
    図 2: マルチデバイス アプリケーションで空のアプリケーションを選択する
  3. ツール パレットからフォームに TTabControl を追加します。
    AddTabControl.JPG
    図 3 フォームに TTabControl を追加する
  4. TabItems を追加するには、TabControl を右クリックし、[TTabItem の追加]を選択します。 TTabItems を 3 つ追加します。
    AddTabItem.jpg
    図 4 TTabControlTTabItem を追加する

TabItem にボタンを追加する

  1. ツール パレットから、TButton を1つ TabItem1 に、TabItem2 にも1つボタンを追加します。
  2. TActionList をモバイル フォームに追加します。
  3. Button1TabItem1 で選択し、Action プロパティをオブジェクト インスペクタで選択し、[標準アクションの新規作成|タブ|TChangeTabAction]Action プロパティに割り当てます。
    AddAction.jpg
    図 5: ボタンにアクションを追加する
  4. 同じことを Button2TabItem2 上で繰り返します。
  5. TabItem2 上で、Button2 を選択します。 オブジェクト インスペクタで、Action ノードを展開します。 Tab 項目を選択し、右側の下矢印をクリックします。 リストから TabItem3 を選択して、ボタンをクリックすると、TabItem2 タブから TabItem3 タブへ遷移が発生するよう定義します。 これにより、Button2 キャプションが Go to TabItem3 に変更された点に注目してください。
    Action expanded.PNG
    図 6 Action のオプションを展開する

下図では、TabItem2TabItem3 に移動 ボタンが、TabItem3 への遷移を発生させます:
Go to TabItem3.JPG
図 7: 遷移が割り当てられた TabItem3 に移動 ボタン

TTabControlAction プロパティの利用

ここでは、FMX.TabControl.TTabControlAction のプロパティ TransitionDirection --- タブ コントロール間のアクティブ タブの切り替えについて触れます。

Transition プロパティは TTabTransition 型で、次の値を使用します:

  • None: 遷移先タブへの単純な遷移です。
  • Slide: 切り替え動作にビジュアル アニメーションを使用します。

TransitionSlide に設定すると、Direction プロパティを使用してアニメーションの方向を指定することができます。

Direction プロパティは TTabTransitionDirection 型で、次の値を使用します:

  • Normal: 前方(左から右)へのタブ項目切り替え遷移効果を定義します。 遷移先タブが現在のアクティブ タブより前にある場合には、FMX.TabControl.TTabControlAction は、タブのコンテンツを右にスライドし、後ろにある場合には左にスライドします。
  • Reversed: 後方(右から左)へのタブ項目切り替え遷移効果を定義します。

ListBox を扱う場合は、タブ コントロールを使用する際、TabItem1 から TabItem2 へ移動するクリック時イベントを使用することができます(理想的には、TPositionNone に設定します)。 ListBox を選択し、以下のコードに示すような OnItemClick イベントを作成します。

procedure TMasterDetail.ListBox3ItemClick(const Sender: TCustomListBox;
                                          const Item: TListBoxItem);
begin
  ChangeTabAction1.Tab := TabItem2;
  ChangeTabAction1.ExecuteTarget(self);
end;

関連項目