AndroidおよびiOS向けフローティングアクションボタンデモ

エンバカデロ

2年前

Looking for an easy and effective way to add records on Android, iOS, macOS, Windows, and Linux? Check out our Floating Action Button demo! With a button that floats over other controls as you scroll up and down, this is a popular interface mechanism that makes it easy and convenient to add new records. Plus, it’s cross-platform and built in Delphi using a single code base and single UI, so you can be sure it will work seamlessly no matter what platform you’re using. Take a look.

Download the full cross-platform Floating Action Button Demo source code on Github.

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

What is a floating action button in software development?

A floating action button (FAB) is a type of button that is used in software development. It is generally used to perform an action that is related to the primary task of the user. For example, a FAB could be used to add a new contact to a list or to create a new document. The floating action button is designed to be placed on top of other content so that it is easily accessible by the user. It is usually positioned in the bottom-right corner of the screen. The floating action button has become a popular feature in many mobile apps and web applications.

画面ショット

What does the code look like for this demo?

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.StdCtrls,
  FMX.Objects, FMX.Effects, FMX.Controls.Presentation, FMX.ListView.Types,
  FMX.ListView.Appearances, FMX.ListView.Adapters.Base, Data.Bind.GenData,
  System.Rtti, System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt,
  Fmx.Bind.DBEngExt, Data.Bind.Components, Data.Bind.ObjectScope, FMX.ListView;

type
  TForm1 = class(TForm)
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
<strong>    CircleButton: TCircle;</strong>
    Icon: TButton;
    ListView1: TListView;
    PrototypeBindSource1: TPrototypeBindSource;
    BindingsList1: TBindingsList;
    LinkFillControlToField1: TLinkFillControlToField;
<strong>    ShadowEffect1: TShadowEffect;
    procedure CircleButtonClick(Sender: TObject);</strong>
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.CircleButtonClick(Sender: TObject);
begin
  Label1.Text := DateTimeToStr(Now);
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.StdCtrls,

FMX.Objects, FMX.Effects, FMX.Controls.Presentation, FMX.ListView.Types,

FMX.ListView.Appearances, FMX.ListView.Adapters.Base, Data.Bind.GenData,

System.Rtti, System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt,

Fmx.Bind.DBEngExt, Data.Bind.Components, Data.Bind.ObjectScope, FMX.ListView;

type

TForm1 = class(TForm)

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

CircleButton: TCircle;

Icon: TButton;

ListView1: TListView;

PrototypeBindSource1: TPrototypeBindSource;

BindingsList1: TBindingsList;

LinkFillControlToField1: TLinkFillControlToField;

ShadowEffect1: TShadowEffect;

procedure CircleButtonClick(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.CircleButtonClick(Sender: TObject);

begin

Label1.Text := DateTimeToStr(Now);

end;

end.

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

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