设计一个选项卡。

大体图样:

1、创建一个multi_Device_Application;2、在form上放一个Rectangle1,设置align为top。设置fill属性的kind为Gradient,编辑Gradient(颜色取值见样图)。3、再放一个Rectange2设置align为top,底色为白色。4、在Rectange2上放置三个RoundRect1,RoundRect2,RoundRect3。设置它们的Corners属性的TopLeft和TopRight为TURE,BottomLeft和BottomRight为FALSE,则圆角出现了。然后分别设置它们的Fill属性。5、放置一个Tabcontrol控件,设置TopPostion为None;align为client。6、设置RoundRect1,RoundRect2,RoundRect3的tag属性分别为:1,2,3

直接上代码:

unit TabbedTemplate;

interface

uses
System.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; type
TTabbedForm = 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;
procedure FormCreate(Sender: TObject);
procedure FormGesture(Sender: TObject; const EventInfo: TGestureEventInfo;
var Handled: Boolean);
procedure TabControl1Gesture(Sender: TObject;
const EventInfo: TGestureEventInfo; var Handled: Boolean);
procedure TabHeadrOnClick(Sender: TObject);
private
{ Private declarations }
CurTabIndex:integer; public
{ Public declarations }
end; var
TabbedForm: TTabbedForm; implementation {$R *.fmx} procedure TTabbedForm.TabHeadrOnClick(Sender: TObject);
var
ClickTag:integer;
i:integer; begin
if (Sender is TLabel) then
begin
ClickTag:=Tlabel(sender).Tag
end
else
if (Sender is TRoundRect) then
begin
ClickTag:=TRoundRect(Sender).Tag;
end; if ClickTag<>CurTabIndex then
begin
for I := to self.ComponentCount- do
begin
if (self.Components[i] is TRoundRect) then
begin
TRoundRect(self.Components[i]).Fill.Kind:=TBrushKind.Gradient;
TRoundRect(self.Components[i]).Fill.Gradient.Color:= TAlphaColor($FFE2E4E4);
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-];;
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; procedure TTabbedForm.FormCreate(Sender: TObject);
begin
{ This defines the default active tab at runtime }
TabControl1.ActiveTab := TabItem1;
CurTabIndex:=;
end; procedure TTabbedForm.FormGesture(Sender: TObject;
const EventInfo: TGestureEventInfo; var Handled: Boolean);
begin
{$IFDEF ANDROID}
case EventInfo.GestureID of
sgiLeft:
begin
if TabControl1.ActiveTab <> TabControl1.Tabs[TabControl1.TabCount-] then
begin
TabControl1.ActiveTab := TabControl1.Tabs[TabControl1.TabIndex+];
Handled := True;
end;
end; sgiRight:
begin
if TabControl1.ActiveTab <> TabControl1.Tabs[] then
begin
TabControl1.ActiveTab := TabControl1.Tabs[TabControl1.TabIndex-];
Handled := True;
end;
end;
end;
{$ENDIF}
end; procedure TTabbedForm.TabControl1Gesture(Sender: TObject;
const EventInfo: TGestureEventInfo; var Handled: Boolean);
begin
case EventInfo.GestureID of
sgiRight:
begin
TabControl1.Previous();
Handled:=True;
end;
sgiLeft:
begin
TabControl1.Next();
Handled:=True;
end;
end;
end; end.

Delphi XE10让android的界面设计摆脱繁杂的更多相关文章

  1. Android的界面设计工具 DroidDraw

    Android的界面设计工具 DroidDraw DroidDraw 下载地址:http://code.google.com/p/droiddraw/ 如图 也可以使用在线的版本(http://www ...

  2. Android典型界面设计(3)——访网易新闻实现双导航tab切换

    一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...

  3. Android典型界面设计(5)——使用SlidingMenu和DrawerLayout分别实现左右侧边栏

    一.问题描述 侧边栏是Android应用中十分常见的界面效果,可随主屏在左侧或右侧联动,是特别适应手机等小屏幕特性的典型界面设计方案之一,常用作应用的操作菜单,如图所示 实现侧边栏可以使用第三方组件s ...

  4. Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航

    一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见Actio ...

  5. Android典型界面设计(7) ——DrawerLayout+Fragement+ViewPager+PagerTabStrip实现双导航

    一.问题描述 在Android典型界面设计(3)的我们实现了双导航效果,即外层底部导航和内部区域的头部导航,如网易新闻等很多应用采用了这种导航,但Google提供DrawerLayout可实现抽屉式导 ...

  6. android ui界面设计参数讲解

    百度文库: http://wenku.baidu.com/link?url=s66Hw6byBEzmjL77doYL1YQN4Y_39F7MovaHKs5mVGrzTDOQCAmiM-1N_6Cdm- ...

  7. Android典型界面设计-访网易新闻实现双导航tab切换

    一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...

  8. Android典型界面设计——ViewPage+Fragment实现区域顶部tab滑动切换

    一.问题描写叙述 本系列将结合案例应用,陆续向大家介绍一些Android典型界面的设计,首先说说tab导航,导航分为一层和两层(底部区块+区域内头部导航).主要实现方案有RadioGroup+View ...

  9. Android典型界面设计(4)——使用ActionBar+Fragment实现tab切换

    一.问题描述 之前我们使用ViewPager+Fragment区域内头部导航,在Android 3.0之后Google增加了新的ActionBar,可方便的实现屏幕Head部区域的 设计如返回键.标题 ...

随机推荐

  1. mysql命令行方式添加用户及设置权限

    以前总是喜欢通过phpmyadmin去添加用户和数据库,这次装完系统后,配置了一大堆东东,实在不想安装phpmyadmin了,就通过命令行方式创建了数据库和设置权限,记录一下,免得以后总是百度 关键步 ...

  2. xml的语法与创建

    xml语法很简单,但很严格,如果出现错误则不能正常解析,而HTML如果出现局部的错误,照样解析 xml第一行必须写xml头<?xml version='1.0' encoding='utf8'? ...

  3. Extjs3笔记 fbar

    在项目中会遇到在grid右下角显示合计之类的显示. 之前使用过的方式: 1.用width强制顶过去. 2.利用css来控制. 弊端: 利用第一种方式:导致调整窗口大小时会导致合计不能根据窗体的大小变化 ...

  4. Extjs load和reload的区别

    store load()和reload() load( Object options ) : Boolean 采用配置好的Reader格式去加载Record缓存,具体请求的任务由配置好的Proxy对象 ...

  5. poj1274 匈牙利算法 二分图最大匹配

    poj1274 题意: 有n个奶牛, m个畜舍, 每个畜舍最多装1头牛,每只奶牛只有在自己喜欢的畜舍里才能产奶. 求最大产奶量. 分析: 其实题意很明显, 二分图的最大匹配, 匈牙利算法. #incl ...

  6. html-----017

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. asp.net 控件 导出 excel

    //导出EXCEL protected void btnDaoChu_Click(object sender, EventArgs e) { HttpContext.Current.Response. ...

  8. linux系统使用密钥登录设置

    使用密钥登录linux的操作步骤(使用putty): 1.用putty远程登录linux服务器,然后使用puttygen生成密钥,将生成的密钥保存,保存私钥将公钥复制保存到linux服务器的autho ...

  9. 快速排序算法 Quick sort

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4046189.html 首先随机选择一个轴,并调整数组内各个数字,使得比轴值大的数在轴的右边, ...

  10. Yii 通过widget小物件生成添加表单

    通过widget小物件创建添加商品的表单 视图里,表单以endWidget();?>结束 最终效果: 把表单提交过来的信息保存到数据库中去. 补充要点: 密码表单: <?php echo ...