[FMX]使用TabControl实现滑动页面效果

在 FMX 中,要实现多页面滑动效果,实际上很简单,不需特别复杂的代码。下面列出了作者的一些实现的一些步骤:

1、由于对于默认的 Tab 显示方式不喜欢,作者决定自己实现一个 Tab, 这个 Tab 只显示上一页、当前和下一页的 Tab 标题,我们为此在页面首部放置了一个 Panel ,左右各有一个 SpeedButton,分别左对齐和右对齐,用来显示上一页和下一页的标题,同时提供点击时跳转到该页面的功能,我们将其分别命名为 sbPrior、lsbNext。中间放置一个 Label ,对齐方式填充客户区,命名为blPageTitle。至于Panel,我们命名为 pnlHeader,让其上对齐。

剩下的各个字体和背景设置,可以根据自己的需要随便改了,与主题无关,此处省略5000字……

2、在页面上放置一个 TabControl,我们将其命名为 tcPages,设置其 TabPosition 为 None 来隐藏默认的标签。然后添加一些 TabItem,设置其 Text 为不同的文本,以便区分。

3、拉一个 GestureManager 来管理滑动操作。设置 pnlHeader 和 TabControl 的 Touch.GestureManager 属性为此 GestureManager,然后分别选中 Touch.Gestures.Standard 中的 Left 和 Right。

好了,布局的事就到此为止,现在是编码:

1、sbPrior 和 sbNext 分别用于切换上一页和下一页,分别在其的 OnClick 事件中编写类似如下代码:

procedure TForm1.sbNextClick(Sender: TObject);
begin
if tcPages.ActiveTab.Index < tcPages.TabCount - 1 then
  tcPages.Next();
end;
 
procedure TForm1.sbPriorClick(Sender: TObject);
begin
if tcPages.ActiveTab.Index > 0 then
  tcPages.Previous();
end;

2、设置 pnlHeader 和 tcPages 的 OnGesture 共用一个事件响应函数,响应手势操作:

procedure TForm1.tcPagesGesture(Sender: TObject;
  const EventInfo: TGestureEventInfo; var Handled: Boolean);
begin
case EventInfo.GestureID of
  sgiRight:
    begin
    tcPages.Previous();
    Handled:=True;
    end;
  sgiLeft:
    begin
    tcPages.Next();
    Handled:=True;
    end;
end;
end;

3、在 tcPages.OnChang 事件中处理页面变更时修改 lblPageTitle 和 sbPrior、sbNext 的标题:

procedure TForm1.tcPagesChange(Sender: TObject);
begin
if tcPages.ActiveTab.Index > 0 then
  sbPrior.Text := tcPages.Tabs[tcPages.ActiveTab.Index - 1].Text
else
  sbPrior.Text := '';
if tcPages.ActiveTab.Index < tcPages.TabCount - 1 then
  sbNext.Text := tcPages.Tabs[tcPages.ActiveTab.Index + 1].Text
else
  sbNext.Text := '';
lblPageTitle.Text := tcPages.ActiveTab.Text;
end;

4、为了在程序启动时,上面的标题栏显示正常,我们在窗体的 OnCreate 事件里调用一个 tcPagesChange 函数来更新下显示:

procedure TForm1.FormCreate(Sender: TObject);
begin
tcPagesChange(Sender);
end;

5、OK,现在可以编译并运行下程序,看一下效果了。手指头在上面划拉划拉吧!

Screenshot_2015-04-15-10-32-36

分享到: