游戲開發(fā)過程做自適應(yīng)時需要UI實現(xiàn)自動布局而不用我們通過代碼一一控制。FGUI的關(guān)聯(lián)系統(tǒng)實現(xiàn)了自動布局。它的自動布局比LayaIDE中的自動布局要強大的多。使用過LayaIDE應(yīng)該知道它的做法是通過設(shè)置節(jié)點的錨點和父節(jié)點的距離，且只有上下左右救巷，水平居中，垂直居中這幾種布局方式句柠。
FGUI的關(guān)聯(lián)系統(tǒng)可以設(shè)置一個節(jié)點相對于任意節(jié)點的相對位置，且布局方式也更加多樣化棒假。
關(guān)聯(lián)系統(tǒng)
-
我們在舞臺中點擊選中需要設(shè)置布局的節(jié)點溯职，在右側(cè)屬性欄可以看到關(guān)聯(lián)屬性面板
-
點擊輸入框打開如下窗口設(shè)置相對的節(jié)點，然后點擊舞臺中的任意一個節(jié)點帽哑，再點擊“完成”就設(shè)置完成了谜酒。如果點擊舞臺空白區(qū)域，設(shè)置成父節(jié)點(容器本身)妻枕。
-
設(shè)置完相對節(jié)點后可以選擇布局方式
// 左->左
static Left_Left: number;
// 左->中
static Left_Center: number;
// 左->右
static Left_Right: number;
// 左右居中
static Center_Center: number;
// 右->左
static Right_Left: number;
// 右->中
static Right_Center: number;
// 右->右
static Right_Right: number;
// 頂->頂
static Top_Top: number;
// 頂->中
static Top_Middle: number;
// 頂->底
static Top_Bottom: number;
//上下居中
static Middle_Middle: number;
// 底->頂
static Bottom_Top: number;
// 底->中
static Bottom_Middle: number;
// 底->底
static Bottom_Bottom: number;
// 寬->寬
static Width: number;
// 高->高
static Height: number;
// 左延展->左
static LeftExt_Left: number;
// 左延展->右
static LeftExt_Right: number;
// 右延展->左
static RightExt_Left: number;
// 右延展->右
static RightExt_Right: number;
// 頂延展->頂
static TopExt_Top: number;
// 頂延展->底
static TopExt_Bottom: number;
// 底延展->頂
static BottomExt_Top: number;
// 底延展->底
static BottomExt_Bottom: number;
// 寬->寬,高->高
static Size: number;
- 當(dāng)我們再動態(tài)創(chuàng)建UI時可能需要動態(tài)添加布局信息
// 訪問節(jié)點的布局信息
console.log(aObject_0.relations);
// 添加布局信息
// 參數(shù)： 相對節(jié)點僻族，布局方式
aObject_0.addRelation(aObject_1,fairygui.RelationType.Left_Left);
aObject_0.addRelation(aObject_1,fairygui.RelationType.Top_Top,false);
// 刪除布局信息
// 刪除與指定節(jié)點的指定布局信息
aObject_0.removeRelation(aObject_1,fairygui.RelationType.Top_Top);
// 默認刪除與指定節(jié)點的第一種布局信息
aObject_0.removeRelation(aObject_1);
// 刪除與指定節(jié)點的所有布局信息
aObject_0.relations.clearFor(aObject_1);
// 刪除與所有節(jié)點的布局信息
aObject_0.relations.clearAll();
// 賦值指定節(jié)點的所有布局信息
aObject_0.relations.copyFrom(aObject_1.relations);
布局信息
布局信息進行分類說明，每一類中也只說明一種屡谐，其他的效果類似述么，使用的時候做下實驗即可。
左->左 左->中 左->右 左右居中 右->左 右->中 右->右 頂->頂 頂->中 頂->底 上下居中 底->頂 底->中 底->底
這幾種布局方式很相似也很好理解愕掏，假如A的指定位置（比如左）距離B的指定位置（比如左）的距離為X度秘。當(dāng)A的位置移動時關(guān)聯(lián)系統(tǒng)為了保持A的指定位置與B的指定位置的距離保持一致會動態(tài)調(diào)整B的位置。-
左延展->左 左延展->右 右延展->左 右延展->右 頂延展->頂 頂延展->底 底延展->頂 底延展->底
假設(shè)綠色方塊和和白色方塊設(shè)置左延展->左饵撑，當(dāng)白色的方塊向左移動時綠色的方塊右側(cè)保持不動剑梳，左側(cè)依然保持和白色方塊左側(cè)固定距離（綠色方塊被拉伸）。
關(guān)聯(lián)4.gif -
寬->寬,高->高
假設(shè)白色圖形和文本框設(shè)置寬->寬滑潘，高->高垢乙。文本設(shè)置自動大小為寬度和高度。隨著文本內(nèi)容的增加白色圖形的寬高會自動增加
我們再設(shè)計全屏界面時背景圖通常會設(shè)置相對父節(jié)點寬->寬语卤，高->高追逮。但是有時我們的背景圖尺寸時小于設(shè)計的屏幕尺寸酪刀，這時我們需要先將背景圖尺寸調(diào)整為設(shè)計屏幕尺寸再設(shè)置布局。因為寬->寬羊壹，高->高的布局信息不管圖片大小蓖宦，只是上下左右變化時保持固定距離。
-
百分比
上面我們說到的距離都是絕對的像素距離油猫，某些情況下我們需要設(shè)置百分比稠茂，再設(shè)置布局信息時可以勾選使用百分比
使用代碼動態(tài)設(shè)置布局信息時，第三個參數(shù)可以設(shè)置使用百分比
// 添加布局信息
// 參數(shù)： 相對節(jié)點情妖，布局方式睬关，是否使用百分比
aObject_0.addRelation(aObject_1,fairygui.RelationType.Left_Left,true);
