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.

搞定。