Delphi D10.1 移动开发中APP界面基本布局（一）

Delphi 目前在移动应用开发上已越来越成熟，其高效、简洁的开发更让人喜欢。

说明

案例演示使用Delphi控件完成界面基本布局，其中包括TLayout、TVertScrollBox、 TGridPanelLayout、TTabControl 等控件的基本使用。
本案例仅使用Delphi自身控件实现，为初学APP开发者提供学习帮助。

代码下载

案例代码已上传到csdn下载区，下载地址：
http://download.csdn.net/detail/tanqth/9870240

（代码中有详细的批注说明）

---

主要代码示例

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;

完成效果