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;

完成效果