Laya FairyGui系列十 关联系统

游戏开发过程做自适应时需要UI实现自动布局而不用我们通过代码一一控制。FGUI的关联系统实现了自动布局。它的自动布局比LayaIDE中的自动布局要强大的多。使用过LayaIDE应该知道它的做法是通过设置节点的锚点和父节点的距离，且只有上下左右，水平居中，垂直居中这几种布局方式。
FGUI的关联系统可以设置一个节点相对于任意节点的相对位置，且布局方式也更加多样化。

关联系统

• 我们在舞台中点击选中需要设置布局的节点，在右侧属性栏可以看到关联属性面板

• 点击输入框打开如下窗口设置相对的节点，然后点击舞台中的任意一个节点，再点击“完成”就设置完成了。如果点击舞台空白区域，设置成父节点(容器本身)。

  
  

• 设置完相对节点后可以选择布局方式

//  左->左
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;

• 当我们再动态创建UI时可能需要动态添加布局信息

        // 访问节点的布局信息
        console.log(aObject_0.relations);
        // 添加布局信息
        // 参数： 相对节点，布局方式
        aObject_0.addRelation(aObject_1,fairygui.RelationType.Left_Left);
        aObject_0.addRelation(aObject_1,fairygui.RelationType.Top_Top,false);
        // 删除布局信息
        // 删除与指定节点的指定布局信息
        aObject_0.removeRelation(aObject_1,fairygui.RelationType.Top_Top);
        // 默认删除与指定节点的第一种布局信息
        aObject_0.removeRelation(aObject_1);
        // 删除与指定节点的所有布局信息
        aObject_0.relations.clearFor(aObject_1);
        // 删除与所有节点的布局信息
        aObject_0.relations.clearAll();
        // 赋值指定节点的所有布局信息
        aObject_0.relations.copyFrom(aObject_1.relations);

布局信息

布局信息进行分类说明，每一类中也只说明一种，其他的效果类似，使用的时候做下实验即可。

• 左->左 左->中 左->右 左右居中 右->左 右->中 右->右 顶->顶 顶->中 顶->底 上下居中 底->顶 底->中 底->底
  这几种布局方式很相似也很好理解，假如A的指定位置（比如左）距离B的指定位置（比如左）的距离为X。当A的位置移动时关联系统为了保持A的指定位置与B的指定位置的距离保持一致会动态调整B的位置。

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

  
  
  
  

  假设绿色方块和和白色方块设置左延展->左，当白色的方块向左移动时绿色的方块右侧保持不动，左侧依然保持和白色方块左侧固定距离（绿色方块被拉伸）。

  
  
  关联4.gif

• 宽->宽,高->高

  
  

假设白色图形和文本框设置宽->宽，高->高。文本设置自动大小为宽度和高度。随着文本内容的增加白色图形的宽高会自动增加

我们再设计全屏界面时背景图通常会设置相对父节点宽->宽，高->高。但是有时我们的背景图尺寸时小于设计的屏幕尺寸，这时我们需要先将背景图尺寸调整为设计屏幕尺寸再设置布局。因为宽->宽，高->高的布局信息不管图片大小，只是上下左右变化时保持固定距离。

• 百分比
  

  上面我们说到的距离都是绝对的像素距离，某些情况下我们需要设置百分比，再设置布局信息时可以勾选使用百分比
  使用代码动态设置布局信息时，第三个参数可以设置使用百分比

// 添加布局信息
// 参数： 相对节点，布局方式，是否使用百分比
    aObject_0.addRelation(aObject_1,fairygui.RelationType.Left_Left,true);