タブの追加と削除

デザイン時にタブを追加するには、タブコントロールのポップアップメニューから「項目の追加」→「TTabItem」を選択します。

デザイン時にタブを削除するには、項目デザイナで削除します。

実行時にタブを追加するには、TTabItemをにしてTabControl1のAddObjectメソッドを呼び出します。

var
  TabItem: TTabItem;
begin
  TabItem := TTabItem.Create(Self);
  TabItem.Text := 'TABITEM3';
  TabControl1.AddObject(TabItem);
end;

実行時にタブを削除するには、タブのオブジェクトを削除します。

procedure TForm1.ButtonDeleteTabClick(Sender: TObject);
begin
  TabControl1.Tabs[0].DisposeOf;
end;

タブの位置

タブの位置はTTabControlのTabPositionプロパティで設定します。

tpTopを指定すると、タブはTTabControlコンポーネントの上部に表示されます。

tpBottomを指定すると、TTabControlコンポーネントの下部に表示されます。

tpNoneを指定すると、タブは表示されません。
設計時には、中央下部分に小さな点として描画され、これを使って、アクティブなタブを切り替えて表示することができます。

tpDotsを指定すると、TTabControl コンポーネントの下部に小さな点として描画されます。

実行時にソースコードでタブの位置を設定できます。

procedure TForm1.FormCreate(Sender: TObject);
begin
{$IFDEF ANDROID}
  // Androidではタブはフォームの上に置く
  TabControl1.TabPosition := TTabPosition.tpTop;
{$ENDIF}
{$IFDEF IOS}
  // iOSではタブはフォームの下に置く
  TabControl1.TabPosition := TTabPosition.tpBottom;
{$ENDIF}
end;

アクティブなタブを取得する

TTabControlのActiveTabプロパティで、現在アクティブなタブを取得できます。

procedure TForm1.TabControl1Change(Sender: TObject);
begin
  Label1.Text := Format('%d番目のタブが選択されています。', [TabControl1.ActiveTab.Index]);
end;

アクティブなタブを切り替える

アクティブなタブを切り替える場合は、TTabControlのActiveTabプロパティにアクティブにするタブを設定します。

// 先頭のタブをアクティブにする
TabControl1.ActiveTab := TabControl1.Tabs[0];

TChangeTabActionを使ってアクティブなタブを切り替える

TChangeTabActionを使うと、指定したタブをアクティブにできます。

TButtonとTActionListをフォームに配置して、Button1のActionプロパティにTChangeTabActionを設定します。

追加したChangeTabAction1のTabプロパティに、アクティブにするタブを設定します。

アプリケーションを実行して、Button1を押すと、アクティブなタブが切り替わります。

実行時に、ソースコードで切り替えるタブを設定することもできます。

procedure TForm1.Button1Click(Sender: TObject);
begin
  ChangeTabAction1.Tab := TabItem2;
  ChangeTabAction1.ExecuteTarget(Self);
end;

ジェスチャでタブをアクティブなタブを切り替える

ActionListにTChangeTabActionを追加します。

追加したTChangeTabActionのOnUpdateイベントを記述します。

procedure TForm1.ChangeTabActionRightUpdate(Sender: TObject);
begin
  //アクティブなタブの右側にタブがあれば、右側のタブをアクティブにする
  if TabControl1.ActiveTab.Index < TabControl1.TabCount - 1 then
    ChangeTabActionRight.Tab := TabControl1.Tabs[TabControl1.ActiveTab.Index + 1]
  else
    ChangeTabActionRight.Tab := nil;
end;

TGestureManagerを配置します。

TabControl1のTouchプロパティのGestureManagerプロパティを設定します。

TabControl1のTouch→Gesturesr→StandardプロパティのLeftプロパティをチェックして、実行するアクションを設定します。

アプリケーションを実行して、タブコントロール上で右から左になぞると、アクティブなタブが切り替わります。

アニメーション効果をつけてアクティブなタブを切り替える

TChangeTabActionのTransitionプロパティをttSlideにすると、タブ項目の切り替えはスライド遷移を使って行われます。

procedure TForm1.ChangeTabActionRightUpdate(Sender: TObject);
begin
  // アクティブなタブの右側にタブがあれば、右側のタブをアクティブにする
  if TabControl1.ActiveTab.Index < TabControl1.TabCount - 1 then
  begin
    ChangeTabActionRight.Tab := TabControl1.Tabs[TabControl1.ActiveTab.Index + 1];
    // タブ切り替えをスライドアニメーションで表示
    ChangeTabActionRight.Transition := TTabTransition.ttSlide;
  end
  else
    ChangeTabActionRight.Tab := nil;
end;