Native Android And iOS Platform Drawer Menu Demo

Embarcadero

il y a 2 ans

If you’re looking for a cross-platform application that is built in Delphi and uses a single code base, then the Platform Menu Demo is perfect for you. This helpful demo application shows you how to build an app with a hamburger menu that contains a drawer. The drawer is a Platform canvas which helps solve Z-Order issues. Plus, the menu slides out from the left side of the screen for easy accessibility. With this demo app, you’ll be able to create a great looking and functioning application for Android, iOS, macOS, Windows, and Linux. So don’t wait any longer, check out the Platform Menu Demo today!

Download the full cross-platform native Platform Drawer Menu 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 does a native platform control mean in software development?

In software development, native platform control refers to a user interface element that is native to the platform on which the software is running. For example, on a Windows platform, native platform controls would include elements such as the Start button, taskbar, and window frames. On a Mac platform, native platform controls would include the menu bar, Dock, and Finder windows. The use of native platform controls allows developers to create applications that conform to the overall look and feel of the operating system, making them more user-friendly. In addition, native platform controls are usually more performant than non-native controls, as they are often optimized by the operating system vendor. As a result, native platform control is an important consideration for developers when choosing a UI toolkit for their application.

Screenshot

What does the source code for this native drawer menu demo 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.ListView.Types, FMX.ListView.Appearances, FMX.ListView.Adapters.Base,
  Data.Bind.EngExt, Fmx.Bind.DBEngExt, FireDAC.Stan.Intf, FireDAC.Stan.Option,
  FireDAC.Stan.Param, FireDAC.Stan.Error, FireDAC.DatS, FireDAC.Phys.Intf,
  FireDAC.DApt.Intf, FireDAC.Stan.StorageBin, System.Rtti,
  System.Bindings.Outputs, Fmx.Bind.Editors, FMX.Layouts, Data.Bind.Components,
  Data.Bind.DBScope, Data.DB, FireDAC.Comp.DataSet, FireDAC.Comp.Client,
  System.ImageList, FMX.ImgList, FMX.ListView, FMX.StdCtrls, FMX.MultiView,
  FMX.Effects, FMX.Controls.Presentation;

type
  TForm1 = class(TForm)
    ToolBar1: TToolBar;
    Label1: TLabel;
    ShadowEffect4: TShadowEffect;
    MaterialOxfordBlueSB: TStyleBook;
<strong>    MultiView1: TMultiView;</strong>
    Button1: TButton;
    ListView1: TListView;
    BindingsList1: TBindingsList;
    ImageList1: TImageList;
    FDMemTable1: TFDMemTable;
    BindSourceDB1: TBindSourceDB;
    LinkFillControlToField1: TLinkFillControlToField;
    Layout1: TLayout;
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.FormCreate(Sender: TObject);
begin
<strong>  {$IF DEFINED(ANDROID) OR DEFINED(IOS)}
    MultiView1.ControlType := TControlType.Platform;
  {$ELSE}
    MultiView1.ControlType := TControlType.Styled;
  {$ENDIF}</strong>
end;

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.ListView.Types, FMX.ListView.Appearances, FMX.ListView.Adapters.Base,

Data.Bind.EngExt, Fmx.Bind.DBEngExt, FireDAC.Stan.Intf, FireDAC.Stan.Option,

FireDAC.Stan.Param, FireDAC.Stan.Error, FireDAC.DatS, FireDAC.Phys.Intf,

FireDAC.DApt.Intf, FireDAC.Stan.StorageBin, System.Rtti,

System.Bindings.Outputs, Fmx.Bind.Editors, FMX.Layouts, Data.Bind.Composants,

Data.Bind.DBScope, Data.DB, FireDAC.Comp.DataSet, FireDAC.Comp.Client,

System.ImageList, FMX.ImgList, FMX.ListView, FMX.StdCtrls, FMX.MultiView,

FMX.Effects, FMX.Controls.Presentation;

type

TForm1 = classe(TForm)

ToolBar1: TToolBar;

Label1: TLabel;

ShadowEffect4: TShadowEffect;

MaterialOxfordBlueSB: TStyleBook;

<strong> MultiView1: TMultiView;</strong>

Button1: TButton;

ListView1: TListView;

BindingsList1: TBindingsList;

ImageList1: TImageList;

FDMemTable1: TFDMemTable;

BindSourceDB1: TBindSourceDB;

LinkFillControlToField1: TLinkFillControlToField;

Layout1: TLayout;

procedure FormCreate(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.FormCreate(Sender: TObject);

commencer

<strong> {$IF DEFINED(ANDROID) OR DEFINED(IOS)}

MultiView1.ControlType := TControlType.Platform;

{$ELSE}

MultiView1.ControlType := TControlType.Styled;

{$ENDIF}</strong>

end;

end.

How are the data bindings set up in the demo?

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.