Delphi 目前在移動應用開發上已越來越成熟，其高效、簡潔的開發更讓人喜歡。

說明

案例演示使用Delphi控制元件完成介面基本佈局，其中包括TLayout、TVertScrollBox、 TGridPanelLayout、TTabControl 等控制元件的基本使用。
本案例僅使用Delphi自身控制元件實現，為初學APP開發者提供學習幫助。

程式碼下載

（程式碼中有詳細的批註說明）

主要程式碼示例

1、跨平臺呼叫WEB顯示指定網頁

procedure TfMain_Form.ImageTapShow(UrlStr: string
 
);
//呼叫系統WEB顯示網頁
{$IF DEFINED(ANDROID)}
var
    intent: JIntent;
begin
    //安卓下呼叫WEB顯示指定網頁
    intent := TJIntent.JavaClass.init(TJIntent.JavaClass.ACTION_VIEW,
        StrToJURI(UrlStr));
    SharedActivityContext.startActivity(intent);
{$ELSEIF DEFINED(MSWINDOWS)}
begin
    //Win
    ShellExecute(0, nil
 
, PChar(UrlStr), nil, nil, SW_SHOWNORMAL);
{$ELSE}
begin
{$IFDEF IOS}
    SharedApplication.OpenUrl(StrToNSUrl(UrlStr));
{$ELSE}
    _system(MarshaledAString(TEncoding.Default.GetBytes('open ' + UrlStr)));
{$ENDIF}
{$ENDIF}
end;

2、使用TGridPanelLayout顯示佈局

// 處理顯示主要過程
// Grid: 需要顯示的Grid控制元件; idtag:該控制元件的特定標誌，用於區別其他Grid
 
;
// num:生成圖示個數  index 從第幾個圖示開始生成
// 這裡生成圖示都來自於ilMainImage，所有圖示需要先載入到ilMainImage。
procedure TfMain_Form.ShowGrid(Grid: TGridPanelLayout; idtag: string;
    num, index: Integer);
var
    i: Integer;
    Image: TImage;
    s: TSizeF;
    Layout: TLayout;
    lbl: TLabel;
    TS: TMemoryStream;
begin
    Grid.BeginUpdate;
    try
        // android下需要呼叫，自己清理上次建的物件.Win32則不用自己清理，
        // Win32下，Grid.ControlCollection.Clear自動清理了自己建的物件.
{$IFDEF ANDROID}
        while Grid.ControlCollection.Count > 0 do
            Grid.ControlCollection.Items[0].Control.DisposeOf;
{$ENDIF}
        Grid.Height := 0;
        for i := index to num + index - 1 do
        begin
            // 動態生成 Layout
            Layout := TLayout.Create(Self);
            Layout.Name := 'Lay' + idtag + i.ToString;
            Layout.Align := TAlignLayout.Client;
            Layout.Padding.Left := 10;
            Layout.Padding.Bottom := 10;
            Layout.Padding.Top := 10;
            Layout.Padding.Right := 10;
            Layout.Parent := Grid; // Layout父級指向Grid。

            // 動態生成 Image
            Image := TImage.Create(Layout);
            Image.Name := 'Image' + idtag + i.ToString;
            Image.Width := 48;
            Image.Height := 48;
            Image.Align := TAlignLayout.Center;
            Image.Margins.Bottom := 10;
            Image.HitTest := True;
            Image.Touch.InteractiveGestures := [TInteractiveGesture.LongTap];
            Image.TagString := 'Image' + idtag + i.ToString; // 這裡用於區分不同點擊內容
            Image.Tag := i;
            s.cx := 64;
            s.cy := 64;
            Image.Bitmap.Clear(TAlphaColorRec.White);
            // 建立流，用流來轉換圖片，實際應用時可直接將圖片處理成流來應用
            TS := TMemoryStream.Create;
            ilMainImage.Bitmap(s, i).SaveToStream(TS); // 生成流資料
            TS.Position := 0;
            Image.Bitmap.LoadFromStream(TS); // 流資料載入  Image
            TS.Free;

{$IFDEF MSWINDOWS}
            Image.OnClick := ImageClick; // 點選事件指向
{$ELSE}
            Image.OnTap := ImageTak; // 點選事件指向
{$ENDIF}
            Image.Parent := Layout; // 父級的控制元件指向Layout

            // 建立文字標題
            lbl := TLabel.Create(Layout);
            lbl.Parent := Layout;
            lbl.Name := 'lbl' + idtag + i.ToString;
            lbl.Text := '測試功能'; // 標題顯示內容
            lbl.Align := TAlignLayout.Bottom;
            lbl.Margins.Bottom := 10;
            lbl.TextAlign := TTextalign.Center;
            lbl.StyledSettings := [];

        end;

        // 計算  Grid與Rectangle整體高度
        Grid.Height := Grid.RowCollection.Count * 100;
        (Grid.Parent as TRectangle).Height := Grid.Height + 30;
        // 計算每行的高度.
        for i := 0 to Grid.RowCollection.Count - 1 do
        begin
            Grid.RowCollection.Items[i].SizeStyle :=
                TGridPanelLayout.TSizeStyle.Percent;
            Grid.RowCollection.Items[i].Value := 100 / Grid.RowCollection.Count;
        end;

    finally
        Grid.EndUpdate;
    end;
end;

完成效果