TTabControl(FMX)でタブ表示～Delphiソースコード集

プロジェクトを作成する

Delphiを起動し、メニューから「ファイル」⇒「新規作成」⇒「マルチデバイスアプリケーション -Delphi」をクリックする。

空のアプリケーションを選択して[OK]ボタンをクリックする

画面設計

TTabContolをフォームにドラッグ＆ドロップします。

TabControl1のAlignプロパティをClientに設定します。（親のクライアント領域いっぱいにサイズ変更されます）

デザインウィンドウ上の「TabControl1」を右クリックして「項目エディタ」をクリックします。

「項目の追加」ボタンを3回クリックしてタブを３つ追加します。
（TabIem1、TabIem2、TabIem3の３つ）
右上の「×」ボタンをクリックして「項目エディタ」ウィンドウを閉じます。

デザインウィンドウ上の「TabItem1」をクリックしてタブを切り替えたら、TButtonをドラッグ＆ドロップします。

デザインウィンドウ上の「TabItem2」をクリックしてタブを切り替えたら、TButtonを２つドラッグ＆ドロップします。

デザインウィンドウ上の「TabItem3」をクリックしてタブを切り替えたら、TButtonをドラッグ＆ドロップします。

ソースコードを記述する

「TabItem1」をクリックしてタブを切り替え、「Button1」をダブルクリックしてソースコードを記述します。

procedure TForm1.Button1Click(Sender: TObject);
begin
  //Button1をクリックしたら次のタブにスライドして切り替える
  TabControl1.Next(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

キーボードの「F12」を押して、デザインウィンドウに切り替えます。
「TabItem2」をクリックしてタブを切り替え、「Button2」をダブルクリックしてソースコードを記述します。

procedure TForm1.Button2Click(Sender: TObject);
begin
  //Button2をクリックしたら前のタブにスライドして切り替える
  Tabcontrol1.Previous(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

キーボードの「F12」を押して、デザインウィンドウに切り替えます。
「Button3」をダブルクリックしてソースコードを記述します。

procedure TForm1.Button3Click(Sender: TObject);
begin
  //Button3をクリックしたら次のタブにスライドして切り替える
  Tabcontrol1.Next(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

キーボードの「F12」を押して、デザインウィンドウに切り替えます。
「TabItem3」をクリックしてタブを切り替え、「Button4」をダブルクリックしてソースコードを記述します。

procedure TForm1.Button4Click(Sender: TObject);
begin
  //Button4をクリックしたら前のタブにスライドして切り替える
  TabControl1.Previous(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

ソースコード全体は以下となります。

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.Controls.Presentation, FMX.StdCtrls, FMX.TabControl;

type
  TForm1 = class(TForm)
    TabControl1: TTabControl;
    TabItem1: TTabItem;
    TabItem2: TTabItem;
    TabItem3: TTabItem;
    Button1: TButton;
    Button2: TButton;
    Button3: TButton;
    Button4: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
    procedure Button3Click(Sender: TObject);
    procedure Button4Click(Sender: TObject);
  private
    { private 宣言 }
  public
    { public 宣言 }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.Button1Click(Sender: TObject);
begin
  //Button1をクリックしたら次のタブにスライドして切り替える
  TabControl1.Next(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  //Button2をクリックしたら前のタブにスライドして切り替える
  Tabcontrol1.Previous(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

procedure TForm1.Button3Click(Sender: TObject);
begin
  //Button3をクリックしたら次のタブにスライドして切り替える
  Tabcontrol1.Next(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

procedure TForm1.Button4Click(Sender: TObject);
begin
  //Button4をクリックしたら前のタブにスライドして切り替える
  TabControl1.Previous(TTabTransition.Slide,TTabTransitionDirection.Normal);
end;

end.

キーボードの「F12」を押して、デザインウィンドウに切り替え、「TabItem1」をクリックしてタブを切り替えます。

実行する

メニューから「実行」⇒「実行」をクリックすると、コンパイルと実行が行われます。

Button1をクリックするとスライドしてTabItem2に切り替わります。Button2をクリックするとスライドしてTabItem1に切り替わります。
タブを非表示にしたい場合は、TabControl1の「TabPosition」プロパティを[None]に設定します。