游戲開發(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;

• 當我們再動態(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。當A的位置移動時關(guān)聯(lián)系統(tǒng)為了保持A的指定位置與B的指定位置的距離保持一致會動態(tài)調(diào)整B的位置。

• 左延展->左 左延展->右 右延展->左 右延展->右 頂延展->頂 頂延展->底 底延展->頂 底延展->底

  
  
  
  

  假設(shè)綠色方塊和和白色方塊設(shè)置左延展->左，當白色的方塊向左移動時綠色的方塊右側(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);