请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

吾爱极客

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 7807|回复: 0

使用Tab控件来显示页(iOS和Android)

[复制链接]

271

主题

271

帖子

1149

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1149
发表于 2015-10-13 18:45:21 | 显示全部楼层 |阅读模式
Tabs是用FMX.TabControl.TTabControl定义的,是一个可以放几个Tab页的容器。每个Tab页可以包含任何控件作为UI元素。可以隐藏页的Tab,切换页而不显示Tab 。

1.png


你可以给每个Tab指定:

  • 一个文本标签---iOS和Android

  • 预定义图标---只是iOS        

  • 自定义图标---iOS和Android


使用iOS和Android上面Tabs的原生风格

本教程演示了在iOS和Android上的使用同样tabs风格,但不推荐这样做。

我们建议你观察每个平台的原生风格,就像下面所述:

  • 在Android上:

    > Tabs
通常放在屏幕顶部。(因此你应该把TTabPosition 设置为 TopPlatformDefault)。)

    > 传统的Tabs只是显示文本,但是FireMonkey允许你指定显示自定义图标。

  • 在iOS:

    > Tabs
通常放在屏幕底部。(因此你应该把TTabPosition 设置为BottomPlatformDefault)。

    > Tab项目总是可以显示文本和图标,可以通过StyleLookup 属性给每个Tab设置。

注:可以用TTabPosition 枚举中的PlatformDefault 值设置Tab位置,这由目标平台的默认行为而定。当TTabPosition的值设为PlatformDefault 时:

·        在iOS应用里面,tabs靠近TTabControl控件的底部边沿。

·        在Android应用里面,tabs靠近TTabControl控件的顶部边沿。


使用窗体设计器设计Tab页

要在你的应用里面创建tab页,跟随以下步骤使用TtabControl元件:


  • 选择菜单:Select:

      Delphi:
File > New > Multi-Device Application - Delphi > Blank Application

      C++:
File > New > Multi-Device Application -  C++Builder > Blank Application

2.Tool Palette选择TTabControl
          2.png

   3.    在放下TTabControl 之后,一个空的 TabControl 显示在窗体设计器 (你可能需要手工调整TabControl的位置):
         3.png

4.    通常使用TabControl 的应用使用全屏来显示页。

要做到这,需要修改TabControl的默认对齐方式。 在Object Inspector里, 修改TabControl的Align 属性为 Client
4.png

5.    右击TabControl, 从弹出菜单选择 ItemsEditor...
5.png

6.    点击Add Item 三次, 这里就有了三个TabItem 。 关闭对话框。

6.png

7.    在 Form Designer, 选择第一个TabItem ,修改StyleLookup 属性:

iOS
7.png


Android:
8.png
8.    可以在每个页放置任意控件。

要进入到另外一个不同页,只需在窗体设计器点击你想要的tab,或者Object Inspector里面改变ActiveTab 属性。
9.png

9.    要改变tabs的位置, 选择TabControl控件的TabPosition 属性, 然后在 Object Inspector中将其设置为下面值中之一:
10.png



对比iOS 和Android上Tab设置



下图显示iOS和 Android上相同TabPosition 设置(Top, Bottom, Dots, 和 None)时的 App 。

然而,你应该给每个移动平台相应设定不同的tab设置。

j39.PNG
Tabs 显示在顶部

j40.PNG
Tabs显示在底部

j41.PNG
不显示Tabs,改为显示三个点([...])来表示其他页。

j42.PNG
运行时不会显示Tabs 或点,虽然在设计阶段可以看到。
只能通过代码或操作切换页。

j43.PNG
Tabs用他们的平台默认设置显示。


给Tabs使用多分辨率图标


应用中你可以在tabs上使用自定义多分辨率图标以及自定义文本。


这个教程给你演示怎样构造下面三个带有自定义图标和文本的tabs:

16.png



注意:

§  Android apps里, 不支持预定义图标,因此必须使用自定义图标。

§  在 iOS apps里, 可以使用预定义图标或自定义图标。

§  要在iOS或Android上使用自定义图标,在窗体设计器选择相应iOS或Android 风格设置TTabItem 的 StyleLookup 属性为 tabitemcustom,像这里
说的那样指定自定义图标,然后构建应用。

§  对于 iOS, 通过设置TTabItem 的 StyleLookup 属性为你选择的图标,例如 TabItemSearch.png (tabitemsearch)来使用预定义图标。

§  这部分使用的自定义图像是zip格式文件,可于下目录找到C:\Program Files (x86)\Embarcadero\Studio\16.0\Images\GlyFX  
这里使用的三个PNGs位于 Icons\Aero\PNG\32x32 目录:

    >  users_32 (People)
    >  unlock_32 (Security)
    >  tree_32 (Organization)

在使用MultiResBitmap编辑器之前,先解压glyFX.zip 文件,如果你想要使用使用GlyFX包中的这些或其它图像。


在Tabs上显示多分辨率自定义图标

1.    在 Object Inspector里, 选择 TabItem1,然后修改tab标题(在People的Text属性指定);修改TabItem2 Text 属性为 Security,和TabItem3 的为 Organization
17.png
2.    选择一个tab, 点击Object Inspector里TTabItem 的CustomIcon 属性上的省略号按钮 [...]:
18.png
3.    MultiResBitmap 编辑器 打开了:
19.png
4.    确认处于Master 视图, 在MultiResBitmap编辑器,点击Customsize旁边的列表, 选择 Defaultsize.
20.png
5.    重复以下步骤来添加你想要支持的附加比例:

     1.    在 MultiResBitmap 编辑器, 点击 16px-New.bmp.png (Add new item).

     2.    输入你想要支持的附加比例比如1.5, 2, 或 3。

      当添加完所有比例后,编辑器看起来是这样:
21.png
6.    点击 FillAll from File 按钮 MResBMPFill.png , 浏览到想要使用的图像,然后点击Open打开。

选择的图像按相应比例显示在MultiResBitmap编辑器的各个比例入口:
22.png
7.    关闭 MultiResBitmap 编辑器。

8.    对剩下的tabitems重复2 到 7步骤,赋予每个tabitem一个自定义图像。

在定义了自定义图标之后,FireMonkey 框架基于给出的.png文件生成一个 SelectedImage(选中图像)Non-Selected(dimmed) Image(不选中(变暗)图像)。这个转换是用位图数据的Alpha通道完成的,例如:

23.png


使用单一分辨率自定义图标


也可以通过位图编辑器使用单一分辨率位图。 一个单一分辨率位图在Structure视图里只显示一种比例:
24.png


要在自定义图标上使用单一分辨率位图,完成上面过程的第一步,然后接着继续下面:

1.    在Structure 视图, 在CustomIcon下面选择Empty
25.png
2.    现在,在 Object Inspector里, 点击Bitmap 字段(TabItem1.CustomIcon[0]的)的省略号按钮 [...],这将打开Bitmap Editor(位图编辑器)
26.png
3.    在 Bitmap Editor,点击 Load... 按钮, 选择一个 PNG 文件。

推荐的普通分辨率是30x30点,高分辨率是60x60点:
27.png
4.    点击 OK 关闭 BitmapEditor.

5.    在 Object Inspector,设置 StyleLookup 属性为 tabitemcustom
28.png



在TabControl内部定义控件


就像讨论过的那样, 每个Tab页可以包含任意数量控件包括另一个TabControl。对于这样一个例子,很容易在Structure 视图里面浏览和管理不同tab页:

iOS
29.png

Android
30.png





在运行时切换页:


用户点击Tab标签

如果Tabs是可见的(当TabPosition 属性设置为除了None之外的其他值),终端用户可以简单的点击一个Tab来打开相关页。

通过Actions和一个 ActionList


一个 action 对应于一或多个用户接口元素,例如菜单命令,和控件。 Actions 提供两个功能:

§  Actions代表用户接口元素的基本属性,例如一个控件是否使能或一个检查框是否被选中。

§  Actions当空间发射的时候回应,例如,当应用的用户点击了按钮或选择了一个菜单项。


这里是让用户可以通过点击按钮进入到不同tab 页的步骤:

1.    在 Form Designer, 点击TabItem1 选中它。

2.    从 Tool Palette,添加一个 TActionList 控件到窗体,以及添加一个 TButton 到 TabItem1
31.png
3.    选中按钮,在 Object Inspector,从下拉菜单选择 Action |New Standard Action | Tab > TChangeTabAction 。用户点击了这个按钮之后,你刚定义的action被执行(tab页切换):
32.png
4.    在Structure 视图选择ChangeTabAction1,然后在对象浏览器选择TabTabItem2 属性。通过连接到TabItem2,这个action可以切换页到 TabItem2
33.png
5.    在前面步骤,按钮的标题(Text属性)被自动改为"GoTo Security" 因为在我们的例子中TabItem2 的标题是 "Security"。 如下所示设置 ChangeTabAction1 控件的CustomText 属性为Security ,以及如果必要修改按钮的大小适应标题文本。
34.png
6.    ChangeTabAction 也支持幻灯动画来表示页间切换。要使用它,设置 Transition 属性为Slide
35.png
7.    在窗体设计器,选择TabItem2 ,从Tool Palette 拖放两个TButtons 到TabItem2

8.    在窗体设计器, 选择 Button2 ,然后在 ObjectInspector, 从下拉菜单选择 Action |New Standard Action | Tab > TPreviousTabAction

9.    在窗体设计器, 选择 Button3 ,然后在 ObjectInspector, 从下拉菜单选择 Action |New Standard Action | Tab > TNextTabAction

10.  在Structure 视图选择PreviousTabAction1,在Object Inspector里, 设置它的TabControl 属性为 TabControl1

11. 在Structure 视图选择NextTabAction1,在Object Inspector里, 设置它的 TabControl 属性为TabControl1
36.png
12.  在FormDesigner, 选择 TabItem3 ,从Tool Palette 拖放一个TButton到TabItem3.

13.  在ObjectInspector, 设置按钮的 Action 属性为 PreviousTabAction1.


通过源代码


你可以使用以下三种方法之一来从代码切换tab页,通过点击按钮.

将TTabItem 实例赋给ActiveTab 属性


1.    从Tool Palette, 添加一个 TButton 到TabItem3.

2.    在Object Inspector, 设置它的 Text 属性为 Go ToPeople.
37.png
3.    在Form Designer, 双击按钮来创建OnClick 事件函数并添加以下代码:

Delphi:
  TabControl1.ActiveTab := TabItem1;

C++:
  TabControl1->ActiveTab = TabItem1;


修改TabIndex 属性为一个不同值

TabIndex 属性是一个0-基的整型值。可以指定一个0 到TabControl1.TabCount– 1之间的任意数值。

1.    在 Tool Palette, 添加一个 TButton 到TabItem1

2.    在Object Inspector, 设置它的 Text 属性为 Go ToOrganization.
38.png
3.    在Form Designer, 双击按钮来创建OnClick 事件函数并添加以下代码:

Delphi:
  TabControl1.TabIndex := 2;

C++:
  TabControl1->TabIndex = 2;



调用Tab Action的ExecuteTarget 方法
你可以调用任意tab控件actions (TChangeTabAction, TNextTabAction,and TPreviousTabAction)的ExecuteTarget 方法。必须确认定义 TChangeTabAction.Tab, TPreviousTabAction.TabControl或 TNextTabAction.TabControl 属性。

Delphi:

  // You can set the target at run time if it is not defined yet.
  
  ChangeTabAction1.Tab := TabItem2;   
  // Call the action  
  ChangeTabAction1.ExecuteTarget(nil);

C++:
  // You can set the target at run time if it is not defined yet.  
  ChangeTabAction1->Tab = TabItem2;   

  // Call the action  
  ChangeTabAction1->ExecuteTarget(NULL);


www.52jike.com (吾爱极客)  ruanzhuo翻译整理,转载请注明出处



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|吾爱极客 ( 粤ICP备15067754号-1  

GMT+8, 2020-11-26 05:54 , Processed in 0.231230 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表