Delphi for iOS开发指南(10): 在iOS应用程序中使用Layout来调整窗体尺寸或排列方向

这篇教程讲述了一个通用解决方案，就是使用一个通用的窗体来适应不同窗体情况（例如iPhone和iPad），而不是每个窗体情况使用不同的窗体。

在FireMonkey Mobile Form Designer中，你可以预览用户界面，而不需要在Device上运行应用程序-只需要在右上角的下拉框中更改一下Device或排列方向：

 

 

 

 

 

每个FireMonkey组件都有一个Owner，Parent或Children

 

首先，每个FireMonkey组件都有Owner，Parent，Children。如果你在窗体上放了一个组件，那么这个窗体就成了组件的Owner和Parent。

 

如果你添加了组件（例如，Button，Label，或其他控件）到其他组件上（例如ToolBar），那么这个ToolBar就是Button,Label和其他控件的Parent和Owner。你可以在Structure View的TreeView中以图形方式呈现的父子关系图。

 

子控件的布局是相对于它的父控件而言的。在下图中，Label1是ToolBar1的子控件，Label1的布局是相对于ToolBar1的。

 

 

 

 

 

 

 

 

 

 

使用FireMonkey控件常用的Layout相关属性

 

使用Align属性

 

控件的Align属性决定了当父控件的四条边，或中心，全部初始或父控件重新调整过尺寸时，控件是否自动重新排列或/重新调整尺寸。Align属性的默认值为alNone，意味着不自动计算：控件永远停留在原来的地方。

Align属性的典型值如下（蓝色的区域表示是子控件）：

 

如果你使用alTop，alBottom，alLeft，alRight，其他组件的Align属性使用剩余的区域。

剩余区域的大小和形状（alClient）也随着设备的排列方向而改变，也基于窗体类型（iPhone或iPad）。

下图展示了当你有两个组件使用alTop，一个组件使用alClient的情况下，横放（水平）和竖放（垂直）的布局。

 

 

 

 

使用Margins属性

 

Margins确保控件由父控件自动排列时与各控件之间的距离。

在下图中，左路边的组件（alClient）使用Margins属性来确定组件四周的空隙。

 

 

 

 

使用Padding属性

 

Padding设置父控件内容盒子的边距。在ObjectInspector，你可以为Padding设置值（像素）：

• Left
• Right
• Bottom
• Top

在下图中，父组件（包含两个区域）使用Padding属性来确保内部的边距：

 

 

 

 

使用Anchors属性

 

如果你在ToolBar的上方有一个Edit控件，你可能想要在Edit控件的右边和窗体的边（ToolBar）保持固定的距离。Anchors能让你来指定控件相对于父控件的边保持固定的距离。

如果你想要Edit控件与ToolBar（它的父控件）保持相应的位置，你可以设置Anchros属性为akLeft，akTop，akRight。当ToolBar调整过尺寸时，Edit控件也会根据Anchors设置来调整大小：

 

 

 

 

Button控件的Anchors属性

 

如果在ToolBar的右边有一个Button控件，你可能想要按钮控件的右边和Form的边之间保持相同的距离。然而，你可能不想要保存按钮控件左边和Form左边保持相同的距离。在这种情况下，你可以设置Anchors属性为akTop，akRight（取消选择akLeft），以便于Button控件与ToolBar（父控件）上边和右边保持相同的距离。

 

 

 

 

 

 

使用TLayout组件

 

TLayout，是一个在运行时不可见的组件，可以用来将子控件分组，并可以将它们作为一个整体来操作。例如，你可以只需要设置Layout的Visible属性就可以设置一组控件的可视性。TLayout不会自动设置子控件的任意属性。

要选择TLayout的子控件，请使用Structure View。

选中你想要移动的控件。然后拖动这些控件到父控件上，然后放开。在Structure View中，这些控件现在是它们的新父控件的子控件了：

你可以使用Align，Padding，Margins，Anchors，以及TLayout的其他属性来定义一个指定区域的Layout。你可以像在HTML中的DIV标记一样来使用TLayout组件。

 

 

 

 

处理复杂界面：使用TVertScrollBox组件

 

通常，你不需要你的窗体有太多东西，这可能要求用户来滚动界面。很多情况下，你可以使用TabControl的多个分页来以免使用滚动。

如果你需要放很多东西在你的窗体上，你可以使用TVertScrollBox组件来定义一个滚动区域，如下描述：

1．在FireMonkey MobileForm Designer中选择Custom Device。

2．通过拖动设计器的边框来达到你想要的形状和尺寸。

3．拖一个TVertScrollBox组件，设置它的Align属性为alClient。这会让TVertScrollBox填满整个客户区。

4．将组件放在TVertScrollBox上：

 

当你在运行时用手指滑动界面的时候就可以滚动这个窗体。