クロスプラットフォームフッタータブサンプル

Q: ソフトウェア開発におけるタブコントロールとは

A tab control is a graphical user interface element that allows the user to switch between different tabs, each of which contains its own content. Tab controls are commonly used in web browsers and text editors, and they can be very helpful for organizing information. In a tab control, each tab represents a different document or page, and the user can switch between them by clicking on the tab. Tab controls can be very helpful for organizing information, but they can also make it difficult to find the right tab if there are too many of them. To avoid this problem, tab controls should be used judiciously and only when they will genuinely improve the user experience.

エンバカデロ

2年前

The Custom Footer Tabs Demo is the perfect way to add customization to your tab buttons. With this demo, you can add custom icons and change the current page of the TTabControl with ease. This cross-platform application is built using Delphi and provides a single code base and UI for Android, iOS, macOS, Windows, and Linux. Whether you’re a seasoned developer or just getting started, the Custom Footer Tabs Demo is the perfect solution for your needs.

フルクロスプラットフォームのフッタータブデモのソースコードをGithubからダウンロード

このデモは、カメラデモ、絵文字デモ、ペイントデモなど、100以上のクロスプラットフォームデモの一部です。

ソフトウェア開発におけるタブコントロールとは

タブコントロールは、ユーザーがそれぞれ独自のコンテンツを含むさまざまなタブを切り替えることができるグラフィカルユーザーインターフェイス要素です。タブコントロールは、Web ブラウザーやテキストエディターで一般的に使用され、情報を整理するのに非常に役立ちます。タブコントロールでは、各タブは異なるドキュメントまたはページを表し、ユーザーはタブをクリックしてそれらを切り替えることができます。タブコントロールは情報の整理に非常に役立ちますが、タブが多すぎると適切なタブを見つけるのが難しくなる場合もあります。この問題を回避するには、タブコントロールを慎重に使用し、ユーザーエクスペリエンスを本当に向上させる場合にのみ使用する必要があります。

画面ショット

サンプルアプリのソースコード

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.ImgList,
  FMX.TabControl, FMX.StdCtrls, FMX.Layouts, FMX.Effects,
  FMX.Controls.Presentation, System.ImageList, Math;

type
  TForm1 = class(TForm)
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    Layout1: TLayout;
<strong>    Button1: TSpeedButton;
    Button2: TSpeedButton;
    Button3: TSpeedButton;
    TabControl1: TTabControl;
    TabItem1: TTabItem;
    TabItem2: TTabItem;
    TabItem3: TTabItem;</strong>
    Glyph1: TGlyph;
    Glyph2: TGlyph;
    Glyph3: TGlyph;
    Glyph4: TGlyph;
    Glyph5: TGlyph;
    Glyph6: TGlyph;
    Label2: TLabel;
    Label3: TLabel;
    Label4: TLabel;
    ImageList1: TImageList;
<strong>    procedure FormResize(Sender: TObject);
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
    procedure Button3Click(Sender: TObject);</strong>
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.Button1Click(Sender: TObject);
begin
  TabControl1.GotoVisibleTab(0);
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  TabControl1.GotoVisibleTab(1);
end;

procedure TForm1.Button3Click(Sender: TObject);
begin
  TabControl1.GotoVisibleTab(2);
end;

procedure TForm1.FormResize(Sender: TObject);
begin
  Button1.Width := Trunc(Layout1.Width/3);
  Button2.Width := Button1.Width;
  Button3.Width := Button1.Width;
end;</strong>

end.

unit Unit1;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.クラス, System.Variants,

FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.ImgList,

FMX.TabControl, FMX.StdCtrls, FMX.Layouts, FMX.Effects,

FMX.Controls.Presentation, System.ImageList, Math;

type

TForm1 = class(TForm)

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

Layout1: TLayout;

Button1: TSpeedButton;

Button2: TSpeedButton;

Button3: TSpeedButton;

TabControl1: TTabControl;

TabItem1: TTabItem;

TabItem2: TTabItem;

TabItem3: TTabItem;

Glyph1: TGlyph;

Glyph2: TGlyph;

Glyph3: TGlyph;

Glyph4: TGlyph;

Glyph5: TGlyph;

Glyph6: TGlyph;

Label2: TLabel;

Label3: TLabel;

Label4: TLabel;

ImageList1: TImageList;

procedure FormResize(Sender: TObject);

procedure Button1Click(Sender: TObject);

procedure Button2Click(Sender: TObject);

procedure Button3Click(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.Button1Click(Sender: TObject);

begin

TabControl1.GotoVisibleTab(0);

end;

procedure TForm1.Button2Click(Sender: TObject);

begin

TabControl1.GotoVisibleTab(1);

end;

procedure TForm1.Button3Click(Sender: TObject);

begin

TabControl1.GotoVisibleTab(2);

end;

procedure TForm1.FormResize(Sender: TObject);

begin

Button1.Width := Trunc(Layout1.Width/3);

Button2.Width := Button1.Width;

Button3.Width := Button1.Width;

end;

end.

クロスプラットフォームアプリのプログラミング手法を学ぶには

今すぐ Coding Boot Camp 2022に登録してください。ゲーム、JavaScript、Web、Python、SQL、データベース、iOS、MacOS、Android、モバイル、Linux、Windows、デスクトップ、サーバー、Arduinoなど、プログラミングに関するさまざまなトピックを学ぶことができます。