Delphi XE10 lets Android interface design get rid of complicated

Design a tab.

Gross pattern:

1, create a multi_device_application;2, put a Rectangle1 on the form, set align as top. Set the kind of the fill property to gradient, edit gradient (the color values are shown in the sample). 3, then put a Rectange2 set align for top, the background is white. 4, put three roundrect1,roundrect2,roundrect3 on the Rectange2. When you set their corners property to TopLeft and TopRight to Ture,bottomleft and BottomRight to False, the fillet appears. Then set their fill properties, respectively. 5. Place a TabControl control, set Toppostion to None;align as the client. 6, set the Tag property of Roundrect1,roundrect2,roundrect3:

Directly on the code:

Unittabbedtemplate;Interfaceusessystem.sysutils, System.types, System.uitypes, system.classes, System.variants, FMX. Types, FMX. Graphics, FMX. Controls, FMX. Forms, FMX. Dialogs, FMX. TabControl, Fmx.stdctrls, FMX. Gestures, FMX. Controls.presentation, FMX. Objects, FMX. Ani;typeTtabbedform=class(tform) Headertoolbar:ttoolbar;    Toolbarlabel:tlabel;    Tabcontrol1:ttabcontrol;    Tabitem1:ttabitem;    Tabitem2:ttabitem;    Tabitem3:ttabitem;    Gesturemanager1:tgesturemanager;    Label2:tlabel;    Label3:tlabel;    Rectangle1:trectangle;    Tabpanel:tpanel;    Line1:tline;    Roundrect1:troundrect;    Roundrect2:troundrect;    Label5:tlabel;    Label6:tlabel;    Roundrect3:troundrect;    Label7:tlabel;    Rectangle2:trectangle;    Label1:tlabel; procedureformcreate (Sender:tobject); procedureFormgesture (Sender:tobject;ConstEventinfo:tgestureeventinfo; varHandled:boolean); procedureTabcontrol1gesture (sender:tobject; ConstEventinfo:tgestureeventinfo;varHandled:boolean); procedureTabheadronclick (Sender:tobject); Private    {Private Declarations}Curtabindex:integer;  Public    {Public Declarations}  End;varTabbedform:ttabbedform;Implementation{$R *.FMX}procedureTtabbedform.tabheadronclick (sender:tobject);varClicktag:integer; I:integer;begin  if(Sender isTlabel) Then    beginClicktag:=Tlabel (sender). TagEnd  Else    if(Sender isTroundrect) Then      beginClicktag:=Troundrect (Sender).      Tag; End; ifClicktag<>curtabindex Then    begin       forI: =0  toself.componentcount-1  Do        begin          if(Self.components[i] isTroundrect) Then            beginTroundrect (Self.components[i]). Fill.kind:=tbrushkind.gradient; Troundrect (Self.components[i]). Fill.Gradient.Color:=Talphacolor ($FFE 2e4e4); Troundrect (Self.components[i]). Fill.Gradient.Color1:=Talphacolor ($FFFFFFFF); Troundrect (Self.components[i]). Fill.Gradient.Style:=tgradientstyle.linear; Troundrect (Self.components[i]). Stroke.kind:=Tbrushkind.none; End; End; Tabcontrol1.activetab:=tabcontrol1.tabs[clicktag-1];; Curtabindex:=Clicktag; Troundrect (sender). Fill.kind:=Tbrushkind.solid; Troundrect (Sender). Fill.color:=Talphacolorrec.lightskyblue; Troundrect (Sender). Stroke.kind:=Tbrushkind.solid; Troundrect (sender). Stroke. Color:=Talphacolorrec.lightblue; End;End;procedurettabbedform.formcreate (sender:tobject);begin  {This defines the default active tab at runtime}Tabcontrol1.activetab:=TabItem1; Curtabindex:=1;End;procedureTtabbedform.formgesture (sender:tobject; ConstEventinfo:tgestureeventinfo;varHandled:boolean);begin{$IFDEF ANDROID}   CaseEventinfo.gestureid ofSgileft:begin        ifTabcontrol1.activetab <> tabcontrol1.tabs[tabcontrol1.tabcount-1] Then          beginTabcontrol1.activetab:= tabcontrol1.tabs[tabcontrol1.tabindex+1]; Handled:=True; End; End; Sgiright:begin        ifTabcontrol1.activetab <> tabcontrol1.tabs[0] Then          beginTabcontrol1.activetab:= tabcontrol1.tabs[tabcontrol1.tabindex-1]; Handled:=True; End; End; End;{$ENDIF}End;procedureTtabbedform.tabcontrol1gesture (sender:tobject; ConstEventinfo:tgestureeventinfo;varHandled:boolean);begin    CaseEventinfo.gestureid ofSgiright:begintabcontrol1.previous (); Handled:=True; End; Sgileft:beginTabcontrol1.next (); Handled:=True; End; End;End;End.

Delphi XE10 lets Android interface design get rid of complicated