关联系统

关联系统是FairyGUI实现自动布局的核心技术。其他UI框架提供的布局系统,一般只提供各种固定的layout,或者锚点,都只能定义元件与容器之间的关系。而FairyGUI的关联能够定义任意两个元件的关系,而且互动方式更多样。

设置关联

选定一个元件,可以看到在右边的属性栏出现了关联面板:

关联的目标可以是当前容器中的任意一个元件,也可以是正在编辑的容器本身(称为容器组件)。
如果要设置的目标是容器组件,则点击“容器”下面的下拉框就能快速完成设置;如果是其他元件,则点击“对其他元件”就可以进入到选择目标元件的界面,这时我们就可以从左边的编辑区域选择目标对象,选择结束后,点击“完成”完成设置。

目标对象设置好后,就可以设置自己和目标的关联关系。

关联关系的类型有:(为论述方便,这里假设自己是A,目标元件是T)

从上面的论述可以看到,关联总是在保持设定好的距离,这个距离是绝对距离,是像素的距离。有时候我们需要的是成比例的距离。FairyGUI提供了这样一个功能,在设置关联时,可以使用比例距离。只需要勾选关联关系旁边的“%”即可。

百分比关系的功能举例说明:

笑脸图标增加了一个到容器组件的“左->中”关联,并勾选”使用百分比“。容器组件的宽度是200像素,现在笑脸图标的x坐标是50像素。也就是说,笑脸图标在容器组件的1/4位置,与容器组件的中心距离也是1/4的宽度。

现在把设计好的组件拖出来使用,并且把组件的宽度拉长为400像素。可以看到,笑脸图标依照左->中的关联规则发生了位移,它现在所在的位置是100像素,仍然保持了与容器组件中心距离1/4的宽度。

Relation

除了在编辑器设置关联外,有时候我们也需要动态添加关联。例如在一款页游中,一个动态添加到舞台的组件,希望舞台宽度改变时(比如浏览器窗口被玩家拖大拖小),组件依然保持在右侧位置,那么可以这样调用:

aObject.AddRelation(GRoot.inst, RelationType.Right_Right);

又例如,一个动态添加到舞台的组件始终保持满屏大小,可以这样调用

aObject.SetSize(GRoot.inst.width, GRoot.inst.height);
aObject.AddRelation(GRoot.inst, RelationType.Size);

RelationType.Size相当于RelationType.Width_Width和RelationType.Height_Height的组合。这里强调一下,使组件变为满屏大小这个操作必须由你完成,也就是上面代码中的SetSize调用。关联并不能完成这项任务,因为关联是不管元件当前的大小的,它只会在目标变化时保持两者大小的差别。

删除关联的方法是:

//删除某个关联
aObject.RemoveRelation(targetObject, RelationType.Size);

//删除指向某个对象的所有关联
aObject.relations.ClearFor(targetObject);

实例解析

实例一

这是一个游戏的主界面,主界面在实际显示时通常需要调整大小到满屏,这就要求设计时考虑到界面大小会变化的情况。下图是主界面中各个单独部件布局的要求:

A:和容器组件“左右居中“关联
B:和容器组件”右->右”关联
C:和容器组件“右->右”,”底->底“关联
D:和容器组件”底->底”,“左右居中%”关联
E:和容器组件“底->底”关联

然后运行时把这个界面设置为满屏就可以了。

aComponent.SetSize(GRoot.inst.width, GRoot.inst.height);
//当屏幕改变时仍然保持全屏。如果屏幕大小始终不变,则这句也可以忽略
aComoponet.AddRelation(GRoot.inst, RelationType.Size);

实例二

这是一个游戏的NPC信息界面,NPC的介绍文本是动态的,这里使用了自动高度的文本。下面的链接是一个列表。要求列表在文本内容变化时,自动上移或下移。我们只需要将列表“顶->底”关联到文即可。

实例三

这是一个游戏中金钱数量的显示,要求当数量变化时,货币图标和文本保持居中。

首先,文本需要设置为自动宽度和高度,这样数量变化时,文本自动会增长。
用到的关联有:
文本:左右居中关联到容器组件
图标:左->左关联到文本