UG4L9-7——关联系统

本章代码关键字

1
2
3
4
5
gObject.AddRelation()            //添加与某个元件的某种关联
RelationType                    //各种关联类型的枚举，与关联设置内的内容一致
gObject.RemoveRelation()        //删除与某个元件的某种关联
gObject.relations.ClearAll()    //删除所有的关联
gObject.relations.ClearFor()    //删除与某个元件的所有关联

关联系统

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

简单说：
关联系统就是FGUI中在分辨率自适应时用于9宫格布局的系统（类似于UGUI中的锚点的概念） 它不仅可以设置元件相对容器的位置，还可以设置元件和元件之间相互关联

关联系统设置相关

容器你可以理解为元件当前所在的这个组件

​​image​​​​

  • 宽 -> 宽 / 高 -> 高

    修改关联对象的宽（高）会使自己的宽（高）也跟着修改
    关联对象的宽（高）增加（减少）多少，自己就增加（减少）多少
    如果选择%的话就会始终与关联对象的宽（高）保持一个相同比例

  • 左右/上下居中

    锚点始终关联对象的左右（上下）中间线保持一个固定的距离。
    如果选择%的话，会先计算锚点到中间线距离与关联对象的宽（高）的比值，在通过这个固定的比值来计算位置

  • 左/右 -> 左/中/右，顶/底 -> 顶/中/底

    锚点的左/右（顶/底）始终与关联对象的左/中/右边（顶/中/底边）保持一个固定的距离。
    如果选择%的话，会先计算锚点到中间线距离与关联对象的宽（高）的比值，在通过这个固定的比值来计算位置

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

    锚点的左/右（顶/底）始终与关联对象的左/中/右边（顶/中/底边）保持一个固定的距离。
    与上面的区别是锚点为了保持距离会改变自己的宽高，而不是改变位置
    如果选择%的话，会先计算锚点到中间线距离与关联对象的宽（高）的比值，在通过这个固定的比值来计算延展

​image这里分别可以快速设置与容器的宽高关联（适合背景），居中关联

使用这里的设置即可实现如同UGUI中的九宫格那样的排布

Unity中代码设置关联

  1. 设置关联

    1
    2
    3
    GObject gObject = view.GetChild("imgTest");
    gObject.AddRelation(view, RelationType.Left_Left);
    gObject.AddRelation(view, RelationType.Top_Top);

    对于一个全屏的UI组件，屏幕分辨率发生变化时（如果会的话），想要让组件下的各个控件能够分辨率自适应，
    就需要为组件添加相对于GRoot​（或者说屏幕）的宽高关联，详细可见：UG4L11——分辨率自适应

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    void Start()
    {
        UIPackage.AddPackage("UI/teach");
        GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
        teachBinder.BindAll();
        RelationPanel panel = RelationPanel.CreateInstance();
        panel.MakeFullScreen();
        GRoot.inst.AddChild(panel);
        //为面板设置应该相对于GRoot或者说屏幕宽高关联，使得即使屏幕变化控件依然可以分辨率自适应
        panel.AddRelation(GRoot.inst, RelationType.Size);
    }

  2. 删除关联

    • 删除某种关联

      1
      2
      gObject.RemoveRelation(view, RelationType.Left_Left);
      gObject.RemoveRelation(view, RelationType.Top_Top);

    • 删除所有关联

      • 移除和所有对象的关联

        1
        gObject.relations.ClearAll();

      • 移除和指定对象的关联

        1
        gObject.relations.ClearFor(view);