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;

#完成效果

基本布局另一篇

刚完成的，链接上，方便查看：
《Delphi D10.X 移动开发中APP界面基本布局（二）》