首页/文章/ 详情

ACT开发指南|自定义UI组件布局

小田老师

3年前浏览3035

各位朋友们好，今天给大家讲解，在ACT向导开发中，如何对UI组件进行自定义布局。

我们以图1所示的<帮助>组件为例，演示如何将其从默认布局中的下方移到右边的操作方法。

图1 默认UI布局

图2 自定义UI布局

首先，在XML界面文件中，用户在可选标签：<uidefinition>下，能创建自定义<layout>元素标签，定义UI界面中放置的组件和各组件间相对位置。

<layout>标签下子元素标签的定义的模板如下：

图3 Layout模板代码

默认的ACT向导界面UI的构成，通常包括Title、Steps、Properties、Help和Submit等预定义的组件；组件和其对应类型信息如下图所示。

图4 UI界面中预定义组件的对应关系

在<layout>标签下，需要定义当前UI界面的<component>子标签，用来指定UI界面存在的组件。标签<component>中定义单组件名称、类型、相对位置关系和尺寸大小，对应的模板代码如下：

图5 Component标签定义模板

其中各部分需给定参数值如下：

（1）定义组件名称和类型

需定义Component的name和componentType属性值；
UI界面组件预定义的名称和组件类型如图4所示。

（2）定义组件间的相对位置

通过属性topAttachment、bottomAttachment、leftAttachment、rightAttachment，定义当前组件上、下、左、右相邻的组件；
通过给定topoffset、bottomoffset、leftoffset、rightoffset属性值，定义各组件间的间距大小。

（3）定义组件的尺寸大小

需定义heightType、height、widthType和width的属性值；
heightType和widthType属性值为FitToContent、Percentage或Fixed；
FitToContent：组件将拥有由ACT设置的默认大小，height和width无作用；
Percentage：组件的height和width用整体尺寸的百分比表示；
Fixed：组件的height和width为固定的像素值大小。

接下来，我们以帮助组件为例：预定义的名称为Help，对应类型为helpContentComponent，其与其他组件的相对位置关系如下：

图6 Help组件相对位置关系示例

按照上述<component>的定义方法，对应的<layout>标签定义代码如下：

图7 自定义布局代码

最后，我们为向导中步骤指定layout属性值为LayoutName@ExtensionName，对应代码如下所示：

图8 案例中XML代码

以上，就是今天的全部内容，你学会了吗？欢迎大家后台留言，或者邮件至tguangs@163.com一起讨论交流。

实际上，通过<uidefinition>标签不仅可以定义UI布局，也能自定义界面组件，比如为向导添加如下的图表组件显示，同时也支持创建交互对话框、进度框和自定义CSS样式等，能实现的功能是非常强大的，这些高级进阶内容也会在后续文章更新中给大家详细讲解，希望大家能一如既往地支持小田老师。