タブの追加と削除
デザイン時にタブを追加するには、タブコントロールのポップアップメニューから「項目の追加」→「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;