Mobile And Desktop Drawer Menu Demo

Embarcadero

vor 2 Jahren

Drawer Menu CrossPlatform Demo | Learn Delphi

If you’re looking for a way to add a hamburger menu to your cross-platform application, look no further than the Drawer Menu Demo. This demo shows you how to build an app with a drawer menu that slides out from the left side of the screen, making it easy and intuitive to navigate your way around. Plus, it’s built in Delphi using a single code base and single UI, so you can be sure it will work seamlessly on Android, iOS, macOS, Windows, and Linux. So why wait? Give the Drawer Menu Demo a try today and see how it can take your app to the next level!

Download the full cross-platform Drawer Menu 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.

Inhaltsverzeichnis

What is a drawer menu in a desktop or mobile application?

A drawer menu is a type of navigation menu that is commonly used in desktop and mobile applications. It is typically hidden from view until the user opens it, at which point it slides out from the side of the screen. Drawer menus are often used to house secondary navigation options, such as settings or account information. They can also be used to provide access to features that are not immediately apparent, such as a search function. When used correctly, drawer menus can help to improve the overall user experience by making it easier to find the desired content. However, they can also create clutter if not used sparingly. As such, drawer menus should only be employed when they offer a significant benefit over other types of navigation menus.

Screenshot

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

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

var
  Form1: TForm1;

implementation

{$R *.fmx}

end.

unit Unit1;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.Klassen, System.Variants,

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

FMX.StdCtrls, FMX.Controls.Presentation, FMX.Layouts, FMX.MultiView,

FMX.ListView.Types, FMX.ListView.Appearances, FMX.ListView.Adapters.Base,

Data.Bind.GenData, Data.Bind.EngExt, Fmx.Bind.DBEngExt, System.Rtti,

System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.Komponenten,

Data.Bind.ObjectScope, FMX.ListView, FireDAC.Stan.Intf, FireDAC.Stan.Option,

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

FireDAC.DApt.Intf, FireDAC.Stan.StorageBin, Data.Bind.DBScope, Data.DB,

FireDAC.Comp.DataSet, FireDAC.Comp.Client;

type

TForm1 = Klasse(TForm)

ToolBar1: TToolBar;

Label1: TLabel;

ShadowEffect4: TShadowEffect;

MaterialOxfordBlueSB: TStyleBook;

Button1: TButton;

<strong> MultiView1: TMultiView;</strong>

Layout1: TLayout;

ListView1: TListView;

BindingsList1: TBindingsList;

FDMemTable1: TFDMemTable;

BindSourceDB1: TBindSourceDB;

LinkListControlToField1: TLinkListControlToField;

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

end.

What does the data bindings look like?

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.