Cross-Platform Footer Tabs Sample App

Embarcadero

il y a 2 ans

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.

Download the full cross-platform Custom Footer Tabs Demo source code on Github.

This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.

Table des matières

What is a tab control in software development?

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.

Screenshot

What does the source code for this example look like?

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.Des 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 = classe(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);

commencer

TabControl1.GotoVisibleTab(0);

end;

procedure TForm1.Button2Click(Sender: TObject);

commencer

TabControl1.GotoVisibleTab(1);

end;

procedure TForm1.Button3Click(Sender: TObject);

commencer

TabControl1.GotoVisibleTab(2);

end;

procedure TForm1.FormResize(Sender: TObject);

commencer

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

Button2.Width := Button1.Width;

Button3.Width := Button1.Width;

end;

end.

Ready to learn how to program cross-platform apps like this?

Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.