adobe脚本插件开发--界面处理--布局原理--对齐方式(一)

本文翻译于官方原文

1.自动布局

  当一个脚本创建一个窗口及其相关的用户界面元素时,它可以显式地控制窗口的大小以及每个元素和容器元素的位置,也可以利用它的自动ScriptUI提供的布局功能。自动布局机制使用某些可用的信息,于用户界面的元素,连同一套布局规则,建立一个视觉上令人愉悦的布局控件,自动确定元素和容器的适当大小。
  自动布局比显式布局更容易编程。它使脚本更容易修改和维护,也更容易针对不同的语言进行本地化。它还使脚本自动适应默认设置ScriptUI windows主机应用程序使用的字体和字体大小。
  脚本程序员对自动布局过程有相当大的控制权。每个容器都有一个关联的布局管理器对象,在布局属性中指定。布局管理器控制大小以及所包含元素的位置,以及容器本身的大小。这里有一个默认的布局管理器对象,或者你可以创建一个新的:

myWin.layout = new AutoLayoutManager(myWin);

2.默认的布局行为

  默认情况下,autoLayoutManager对象实现默认的布局行为。脚本可以修改默认布局管理器对象的属性,或者根据需要创建一个新的自定义布局管理器,更专业化的布局行为。参见第95页的“自定义布局管理器示例”。
  容器的子元素可以组织在单行或单列中,也可以组织在一个堆栈中,其中的元素在容器的同一区域重叠另一个元素,只有顶部元素是完全可见的。这是由容器的方向属性控制,该属性的值可以为行、列或堆栈。您可以嵌套面板和分组容器来创建更复杂的组织。例如,显示两列控件,您可以创建具有行方向的面板,而行方向又包含两个组,每个都有一个列方向。
  容器具有控制元素间间距和边缘边距的属性。布局如果没有设置,manager会提供默认值。元素的alignChildren属性控制容器内子元素的对齐方式。
  容器,以及各个控件的对齐属性。alignChildren属性确定容器的总体策略,该策略可由特定的子元素覆盖校准值。布局管理器可以通过元素的preferredSize来确定子元素的最佳大小属性。该值默认为由ScriptUI根据控件的特征确定的维度类型和变量特征,如显示的文本字符串,以及用于显示文本的字体和大小。preferredSize值中的宽度或高度值为-1将导致布局管理器计算该维度,同时为另一个维度使用指定的值。
  有关如何设置这些属性值以影响自动布局的详细信息,请参见“自动布局”在87页。
  注意:默认字体和字体大小在不同的平台上选择不同,并由不同的应用程序在相同的平台上,因此可以显示以相同方式创建的ScriptUI窗口在不同的语境中会有不同。

3.自动布局属性

  您的脚本通过在容器对象和子元素中设置某些属性的值来为布局管理器建立规则。下面的例子展示了这些属性的各种值组合的效果。示例基于一个简单的窗口,包含StaticText, Button和EditText元素,创建(使用资源规范)如下:

var w = new Window("window { \
orientation: 'row', \
st: StaticText { }, \
pb: Button { text: 'OK' }, \
et: EditText { characters:4, justify:'right'} \
}");
w.show();

  每个示例都展示了用不同方式设置特定布局属性的效果。在每个窗口中,都设置了text,以便窗口标题显示要更改的属性,而w.st.text设置为显示所演示的特定属性值。

4.容器取向

  容器的orientation属性指定了容器内子元素的组织。它可以有以下值:
  行--- 子元素彼此挨着排列,在容器中从左到右排成一行。容器的高度基于行中最高的子元素的高度,容器的宽度基于所有子元素的组合宽度。列--- 子元素排列在彼此的上方和下方,从上到下排列在容器的一列中。容器的高度基于所有子元素的组合高度,容器的宽度基于列中最宽的子元素。堆栈--- 子元素的排列相互重叠,如在一堆纸中。元素在容器的同一区域内相互覆盖。只有顶部元素是完全可见的。容器的高度基于堆栈中最高的子元素的高度,容器的宽度基于堆栈中最宽的子元素。
  下图显示了使用每种方向布局示例窗口的结果:

在这里插入图片描述

5.子对象对齐

  容器内子元素的对齐方式由两个属性控制:父容器中的alignChildren和每个子容器中的对齐方式。父容器中的alignChildren值控制该容器中所有子容器的对齐方式,除非它被在单个子元素上设置的对齐值覆盖。
  这些属性使用相同的值,这些值根据容器的方向指定沿一个轴的对齐方式。您可以指定由两个这样的字符串组成的数组,以指定沿两个轴的对齐方式。第一个字符串指定水平值,第二个字符串指定垂直值。属性值不区分大小写;例如,字符串FILL, Fill, 和fill都是有效的。
  还可以使用ScriptUI类的对齐属性中的相应常量来设置值;例如:

myGroup.alignment = [ScriptUI.Alignment.LEFT,ScriptUI.Alignment.TOP];

  如果使用常量设置对齐值,然后查询该属性,它将返回与该常量对应的索引号,而不是字符串值。
  一行中的元素可以沿着垂直轴对齐,方法如下:

名称 解释
top 元素的顶部边缘位于其容器的顶部边缘。
bottom 元素的底部边缘位于其容器的底部边缘。
center 元素在容器的上下边缘居中。
fill 元素的高度被调整,以填充顶部和容器之间的高度

  一列中的元素可以沿着水平轴对齐,方法如下:

名称 解释
left 元素的左边缘位于其容器的左边缘。
right 元素的右边缘位于容器的右边缘。
center 元素在其容器的左右边距内居中。
fill 调整元素的宽度以填充容器的左右边距之间的宽度。

  堆栈中的元素可以沿着垂直轴对齐,也可以沿着水平轴对齐,方法如下:

名称 解释
top 元素的顶部边缘位于其容器的顶部边缘,并且元素在其容器的左右边缘居中。
bottom 元素的底部边缘位于其容器的底部边缘,元素在其容器的左右边缘居中。
left 元素的左边缘位于其容器的左边缘,元素在其容器的顶部和底部边缘居中。
right 元素的右边缘位于容器的右边缘,元素在容器的顶部和底部边缘居中。
center 元素在容器的顶部、底部、右边和左边边缘居中。
fill 元素的高度被调整,以填充顶部和底部边距之间的容器高度。并调整元素的宽度以填充容器的左右边距之间的宽度。

  下图显示了在父窗口的alignChildren属性中创建行方向和上下对齐设置的样例窗口的结果:
[图片上传失败...(image-5ad073-1645145176359)]
  下图显示了在父窗体的alignChildren属性中创建具有列方向和右、左、填充对齐设置的示例窗口的结果。注意,在填充情况下,每个元素的宽度都与容器中最宽的元素一样:


在这里插入图片描述

  通过设置特定子元素的对齐属性,可以覆盖容器的子对齐方式(由alignChildren指定)。下图显示了当父元素alignChildren值为左时,为EditText元素设置对齐到右的结果:
[图片上传失败...(image-f885e2-1645145176359)]


  合理的脚本代码可以有效的提高工作效率,减少重复劳动。

文章引用至 作者知了-联系方式1

文章引用至 作者知了-联系方式2

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容