Delphi XE10让android的界面设计摆脱繁杂

设计一个选项卡。

大体图样:

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 := 0 to self.ComponentCount-1 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-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;

procedure TTabbedForm.FormCreate(Sender: TObject);
begin
  { This defines the default active tab at runtime }
  TabControl1.ActiveTab := TabItem1;
  CurTabIndex:=1;
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-1] then
          begin
            TabControl1.ActiveTab := TabControl1.Tabs[TabControl1.TabIndex+1];
            Handled := True;
          end;
      end;

    sgiRight:
      begin
        if TabControl1.ActiveTab <> TabControl1.Tabs[0] then
          begin
            TabControl1.ActiveTab := TabControl1.Tabs[TabControl1.TabIndex-1];
            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.
时间: 2025-01-07 07:11:38

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

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

一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客Android典型界面设计2(FragmentTabHost+Fragment实现底部tab切换)基础之上和Android典型界面设计1(ViewPage+Fragment实现区域顶部tab滑动切换)整合应用实现.查看两篇博客请点击:http://www.cnblogs.com/jerehedu/p

Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换 Android学习笔记:TabHost 和 FragmentTabHost

Android:界面设计工具DroidDraw

DroidDraw是款强大的安卓界面设计软件,基于Java Swing开发,可以通过它拖动控件.设置层属性.设置颜色等步骤轻松地生成复杂的安卓XML布局文件. >>>>>>>>下载 Android:界面设计工具DroidDraw

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

一.问题描述 在Android典型界面设计(3)的我们实现了双导航效果,即外层底部导航和内部区域的头部导航,如网易新闻等很多应用采用了这种导航,但Google提供DrawerLayout可实现抽屉式导航,建议使用DrawerLayout代替底部导航,下面我们就使用官方提供的DrawerLayout+Fragement+ViewPager+PagerTabStrip实现下图效果: 二.本例相关技术 1. DrawerLayout 抽屉式导航 2. Fragment管理 3. ViewPager和P

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

一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见ActionBar还是比较强大的,关键要深入进去.灵活的运用,下面我们就使用ActionBar实现如图所示的效果: 二.本例特点 1.  兼容低版本 2. 使用ActionBar 分体设计(split) 3. Tab使用自定义View 4. 结合ViewPager实现滑动导航 三.代码讲解: 1.在项目中加入

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

一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客Android典型界面设计2(FragmentTabHost+Fragment实现底部tab切换)基础之上和Android典型界面设计1(ViewPage+Fragment实现区域顶部tab滑动切换)整合应用实现.查看两篇博客请点击:http://www.cnblogs.com/jerehedu/p

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

一.问题描述 侧边栏是Android应用中十分常见的界面效果,可随主屏在左侧或右侧联动,是特别适应手机等小屏幕特性的典型界面设计方案之一,常用作应用的操作菜单,如图所示 实现侧边栏可以使用第三方组件slidingmenu实现和Google官方提供的滑动抽屉组件DrawerLayout实现,下面就分别使用这两种方法实现左右滑动的侧边栏 二.先使用之前讲过的ActionBar制作标题栏 这里只贴出代码,相关知识请查阅 <Android典型界面设计(4)--使用ActionBar+Fragment实现

android开发-界面设计基本知识Ⅱ

上一章讲述了Android界面设计时,一些基本控件的使用,本章主要讲述自定义控件,Fragment和Headler线程机制. 1.自定义控件 (1)基本知识 dp.sp和dx      px:像素点     dp:与像素密度密切相关     sp:相当于dp,修饰文字专用    dip:相当于dp 用法:    文字尺寸一律用sp    非文字尺寸一律用dp   偶尔需要用px 例如:在屏幕上画细的分割线 1px 当一个控件不在右侧预览视图里面显示的时候是因为控件没有明确的位置,需要设置一个位置

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

一.问题描述 之前我们使用ViewPager+Fragment区域内头部导航,在Android 3.0之后Google增加了新的ActionBar,可方便的实现屏幕Head部区域的 设计如返回键.标题.ICON.Logo.自定义View以及菜单等,并可实现Tab导航,下面我们就使用ActionBar实现下图所示界面设计: 二.案例主要组件 1.编写TBActivity public class TBActivity extends Activity { private ActionBar act