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

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

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

热点推荐