APP 多张图片滑动显示

用 Delphi FireMonkey 做一个简单的 APP，效果是多张图片，滑动显示。一次显示一张图片，手指触摸屏幕左边，向左滑动显示下一张图片；手指触摸屏幕右边，向右滑动显示上一张图片。图片切换过程，有滑动过去的动画效果。

实现方法：

1. 在 Delphi 里面，创建一个 FireMonkey 的工程。里面有一个 Form1；

2. 在这个 Form1 上面，放上一个 TabControl2，鼠标右键点它，下拉菜单选择 Add Item 增加一个 TabItem。每个 TabItem 就是一个容器，用来摆放图片。有多张图片，就增加多个 TabItem。

2.1. 设置 TabControl1.Align 为 Client，让它自动全屏摆放。

3. 在每个 TabItem 容器内，放上一个 TImage。设置 Image 控件的 Align 属性为 Client，全屏。

3.1. TImage 控件有个属性：在属性面板上，找到 MultiResBitmap，鼠标点击这个属性的右边的小按钮，弹出一个窗口。窗口的右下方有一个小按钮，鼠标停上去，会显示 Hint 为 Open，点它，弹出打开文件的窗口，选择一个图片文件，为这个 Image 加载一个图片。

4. 为了简化触摸屏幕左右的判断，增加两个透明的 TLayout 作为触摸事件触发用的控件。

4.1. 拖一个 TLayout 到界面上，在 IDE 左上角 Struct 窗口里面，拖它到 Form1 底下，设置其 Align 为 Contents。这样它会全屏罩在 TabControl1 上面。这个 TLayout 我叫它 Layout1;

4.2. 拖两个 Layout 到 Layout1 上面，分别叫做 LayoutLeft 和 LayoutRight，设置 LayoutLeft.Align 为 Left，LayoutRight.Align 为 Client. 这样，屏幕左边是 LayoutLeft，而右边则是 LayoutRight。为了适应不同屏幕宽度，在 Form1.OnShow 事件方法里增加一行代码：LayoutLeft.Width := Self.Width / 2;

4.3. 设置 LayoutLeft 和 LayoutRight 的 HitTest 属性为 True，默认是 False.

4.4. 为 LayoutLeft 和 LayoutRigth 增加 OnClick 事件方法代码。代码如下：

procedure TForm1.LayoutLeftClick(Sender: TObject);
var
  i: Integer;
begin
  //向左滑动图片
  i := TabControl2.TabIndex +1;
  if i >= TabControl2.TabCount then i := 0;

  TabControl2.SetActiveTabWithTransition(TabControl2.Tabs[i], TTabTransition.Slide);
end;

procedure TForm1.LayoutRightClick(Sender: TObject);
var
  i: Integer;
begin
  //向右滑动图片

  i := TabControl2.TabIndex -1;
  if i < 0 then i := TabControl2.TabCount -1;

  TabControl2.SetActiveTabWithTransition(TabControl2.Tabs[i], TTabTransition.Slide, TTabTransitionDirection.Reversed);
end;

直接在 Windows 下编译运行，界面显示出来后，用鼠标去点窗口的左边和右边，看看效果如何。

如果没问题，在 IDE 里面设置 Target Platform 为 Android，电脑连上手机，看看手机 APP 的效果。

最后一个问题：

这个 TabControl 有页标签头。这种全屏滑动，不想要页标签头，设置 TabControl2 的 TabPosition 属性为 None.

搞定。