首页/文章/ 详情

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

3年前浏览2990

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

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

默认UI布局


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

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

03.png

3 Layout模板代码

默认的ACT向导界面UI的构成,通常包括TitleStepsPropertiesHelpSubmit等预定义的组件;组件和其对应类型信息如下图所示。
4 UI界面中预定义组件的对应关系
<layout>标签下,需要定义当前UI界面的<component>子标签,用来指定UI界面存在的组件。标签<component>中定义单组件名称类型相对位置关系尺寸大小,对应的模板代码如下:
5 Component标签定义模板
其中各部分需给定参数值如下:
1)定义组件名称和类型


  • 需定义ComponentnamecomponentType属性值;
  • UI界面组件预定义的名称组件类型如图4所示。


2)定义组件间的相对位置


  • 通过属性topAttachmentbottomAttachmentleftAttachmentrightAttachment定义当前组件上、下、左、右相邻的组件
  • 通过给定topoffsetbottomoffset、leftoffsetrightoffset属性值,定义各组件间的间距大小


3)定义组件的尺寸大小


  • 需定义heightTypeheightwidthTypewidth属性值;
  • heightTypewidthType属性值为FitToContentPercentageFixed
  • FitToContent:组件将拥有由ACT设置的默认大小,heightwidth无作用
  • Percentage:组件的heightwidth整体尺寸的百分比表示;
  • Fixed:组件的heightwidth固定的像素值大小。


接下来,我们以帮助组件为例:预定义的名称为Help,对应类型为helpContentComponent,其与其他组件的相对位置关系如下:
6 Help组件相对位置关系示例
按照上述<component>的定义方法,对应的<layout>标签定义代码如下:
自定义布局代码


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



案例中XML代码



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

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


9 ACT中自定义图表组件


代码&命令WorkbenchACT
著作权归作者所有,欢迎分享,未经许可,不得转载
首次发布时间:2020-12-01
最近编辑:3年前
小田老师
硕士 | 仿真工程师 欢迎关注ANSYS仿真与开发!
获赞 650粉丝 3787文章 62课程 4
点赞
收藏
作者推荐
未登录
还没有评论
课程
培训
服务
行家
VIP会员 学习 福利任务 兑换礼品
下载APP
联系我们
帮助与反馈