MyGui笔记（3）控件对齐方式和所在层

前篇：《MyGui笔记（2）控件类型和皮肤》
本篇：创建控件的方法要传入控件对齐方式，创建根控件还需传入将被创建到哪一层的名称。
环境：MyGui3.2.0(OpenGL平台)

控件对齐方式        

        控件的对齐方式，定义在Align里面，所定义的方式如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

enum Enum
{
    HCenter = MYGUI_FLAG_NONE, /**< 水平居中 */
    VCenter = MYGUI_FLAG_NONE, /**< 垂直居中 */
    Center = HCenter | VCenter, /**< 中心居中 */

    Left = MYGUI_FLAG(1), /**< 居左 (并且垂直居中) */
    Right = MYGUI_FLAG(2), /**< 居右 (并且垂直居中) */
    HStretch = Left | Right, /**< 按与父窗口的比例进行水平拉伸 (并且垂直居中) */

    Top = MYGUI_FLAG(3), /**< 居上 (并且水平居中) */
    Bottom = MYGUI_FLAG(4), /**< 居下 (并且水平居中) */
    VStretch = Top | Bottom, /**< 按与父窗口的比例进行垂直拉伸 (并且水平居中) */

    Stretch = HStretch | VStretch, /**< 按与父窗口的比例进行拉伸 */
    Default = Left | Top /**< 默认值 (居左和居上) */
};

并不仅这些方式，还可以自己进行组合，如： 

1
2

Left | VStretch      /**< 居左和按与父窗口的比例进行垂直拉伸 */    
HStretch | Bottom    /**< 按与父窗口的比例进行水平拉伸和居下 */

每当父窗口进行位置或者大小改变，都会对其子控件进行重新计算位置和大小，代码如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

//_oldsize 父控件旧的大小
//_newSize 父控件新的大小
void Widget::_setAlign(const IntSize& _oldsize, const IntSize& _newSize)
{
    const IntSize& size = _newSize;//getParentSize();

    bool need_move = false;
    bool need_size = false;
    IntCoord coord = mCoord;

    // 对齐方式
    if (mAlign.isHStretch())
    {
        // 拉伸
        coord.width = mCoord.width + (size.width - _oldsize.width);
        need_size = true;
    }
    else if (mAlign.isRight())
    {
        // 向右移动
        coord.left = mCoord.left + (size.width - _oldsize.width);
        need_move = true;
    }
    else if (mAlign.isHCenter())
    {
        // 没有拉伸的水平对齐
        coord.left = (size.width - mCoord.width) / 2;
        need_move = true;
    }

    if (mAlign.isVStretch())
    {
        // 拉伸
        coord.height = mCoord.height + (size.height - _oldsize.height);
        need_size = true;
    }
    else if (mAlign.isBottom())
    {
        // 向下移动
        coord.top = mCoord.top + (size.height - _oldsize.height);
        need_move = true;
    }
    else if (mAlign.isVCenter())
    {
        // 没有拉伸的垂直居中
        coord.top = (size.height - mCoord.height) / 2;
        need_move = true;
    }

    if (need_move)
    {
        if (need_size)
            setCoord(coord);
        else
            setPosition(coord.point());
    }
    else if (need_size)
    {
        setSize(coord.size());
    }
    else
    {
        _updateView(); // 无需移动和改变大小
    }
}

 控件所在层

        每个根控件创建的时候，需要指定其所在层，所有的层定义在MyGUI_Layers.xml文件，这个文件内容为： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<?xml version="1.0" encoding="UTF-8"?>
<MyGUI type="Layer" version="1.2">
    <Layer type="SharedLayer" name="Wallpaper">
        <Property key="Pick" value="false"/>
    </Layer>
    <Layer type="SharedLayer" name="Back">
        <Property key="Pick" value="true"/>
    </Layer>
    <Layer type="OverlappedLayer" name="Overlapped">
        <Property key="Pick" value="true"/>
    </Layer>
    <Layer type="SharedLayer" name="Middle">
        <Property key="Pick" value="true"/>
    </Layer>
    <Layer type="OverlappedLayer" name="Modal">
        <Property key="Pick" value="true"/>
    </Layer>
    <Layer type="SharedLayer" name="Main">
        <Property key="Pick" value="true"/>
    </Layer>
    <Layer type="OverlappedLayer" name="Popup">
        <Property key="Pick" value="true"/>
    </Layer>
    <Layer type="SharedLayer" name="FadeMiddle">
        <Property key="Pick" value="false"/>
    </Layer>
    <Layer type="OverlappedLayer" name="Info">
        <Property key="Pick" value="true"/>
    </Layer>
    <Layer type="SharedLayer" name="ToolTip">
        <Property key="Pick" value="false"/>
    </Layer>
    <Layer type="SharedLayer" name="DragAndDrop">
        <Property key="Pick" value="false"/>
    </Layer>
    <Layer type="SharedLayer" name="FadeBusy">
        <Property key="Pick" value="false"/>
    </Layer>
    <Layer type="SharedLayer" name="Pointer">
        <Property key="Pick" value="false"/>
    </Layer>
    <Layer type="SharedLayer" name="Fade">
        <Property key="Pick" value="false"/>
    </Layer>
    <Layer type="SharedLayer" name="Statistic">
        <Property key="Pick" value="false"/>
    </Layer>
</MyGUI>

可以看到层类型分为两种：SharedLayer和OverlappedLayer。

• SharedLayer ：SharedLayer为简单无重叠的层，重叠的控件可能会出现绘制顺序不正确，整个SharedLayer在一个批次中进行渲染。

• OverlappedLayer ：当在一个层（例如：窗口）中含有重叠的控件，那么应该使用OverlappedLayer 。每个根控件进行批次渲染，所以如果层上的控件没有打算进行彼此重叠的话，那么使用SharedLayer。

层的名称标识符，用在皮肤、布局和代码里。Pick属性设置控件是否能够响应鼠标消息，如果设置为false，鼠标指针会忽略这个层上的所有控件，直接穿透到下一层。创建根控件调用代码如下： 

1
2
3
4
5
6
7
8
9
10
11
12

Widget* Gui::baseCreateWidget(WidgetStyle _style, const std::string& _type, const std::string& _skin, const IntCoord& _coord, Align _align, const std::string& _layer, const std::string& _name)
{
    Widget* widget = WidgetManager::getInstance().createWidget(_style, _type, _skin, _coord, /*_align, */nullptr, nullptr, _name);
    mWidgetChild.push_back(widget);

    widget->setAlign(_align);

    // 附加控件到层上
    if (!_layer.empty())
        LayerManager::getInstance().attachToLayerNode(_layer, widget);
    return widget;
}

层管理器LayerManager负责将控件添加到相应的层上，attachToLayerNode代码为： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

void LayerManager::attachToLayerNode(const std::string& _name, Widget* _item)
{
    MYGUI_ASSERT(nullptr != _item, "pointer must be valid");
    MYGUI_ASSERT(_item->isRootWidget(), "attached widget must be root");

    // 从原先的层分离
    _item->detachFromLayer();

    // 附加到新的层上
    for (VectorLayer::iterator iter = mLayerNodes.begin(); iter != mLayerNodes.end(); ++iter)
    {
        if (_name == (*iter)->getName())
        {
            ILayerNode* node = (*iter)->createChildItemNode();
            node->attachLayerItem(_item);

            return;
        }
    }
    MYGUI_LOG(Error, "Layer '" << _name << "' is not found");
    //MYGUI_EXCEPT("Layer '" << _name << "' is not found");
}

可以看到限制了控件必须为根控件，如果控件原先有附加到其他层上，则必须先分离。接着遍历mLayerNodes，它存储着MyGUI_Layers.xml里面所有的层信息，找到对应的层名称，根据相应的层类型来创建一个子节点，将控件添加到这个子节点上。代码如下： 

1
2
3
4
5
6
7

void LayerNode::attachLayerItem(ILayerItem* _item)
{
    mLayerItems.push_back(_item);
    _item->attachItemToNode(mLayer, this);

    mOutOfDate = true;
}

可以看到这个控件加入到mLayerItems列表里面，mLayerItems存放着所有的控件指针，对于重叠层来说，这里面只存放一个。接着控件调用attachItemToNode方法，这个方法代码如下： 

1
2
3
4
5
6
7

void LayerItem::attachItemToNode(ILayer* _layer, ILayerNode* _node)
{
    mLayer = _layer;
    mLayerNode = _node;

    attachToLayerItemNode(_node, true);
}

继续调用方法attachToLayerItemNode，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

void LayerItem::attachToLayerItemNode(ILayerNode* _item, bool _deep)
{
    MYGUI_DEBUG_ASSERT(nullptr != _item, "attached item must be valid");

    mLayerNode = _item;

    for (VectorSubWidget::iterator skin = mDrawItems.begin(); skin != mDrawItems.end(); ++skin)
    {
        (*skin)->createDrawItem(mTexture, _item);
    }

    for (VectorLayerItem::iterator item = mLayerItems.begin(); item != mLayerItems.end(); ++item)
    {
        (*item)->attachToLayerItemNode(_item, _deep);
    }

    for (VectorLayerItem::iterator item = mLayerNodes.begin(); item != mLayerNodes.end(); ++item)
    {
        if (_deep)
        {
            ILayerNode* child_node = _item->createChildItemNode();
            (*item)->attachToLayerItemNode(child_node, _deep);
        }
    }
}

下一篇继续......

---

更多资料：
1.MyGUI layers  http://www.ogre3d.org/tikiwiki/tiki-index.php?page=MyGUI+layers