您的位置: 首页  >  IT文章  >  MyGui札记（2）控件类型和皮肤

MyGui札记（2）控件类型和皮肤

分类: IT文章 • 2024-09-26 22:08:37
MyGui笔记（2）控件类型和皮肤

前篇：《MyGui笔记（1）建立第一个工程》
本篇：创建控件的方法要传入控件类型和控件皮肤，这里简单记录下所有控件的类型和皮肤。
环境：MyGui3.2.0(OpenGL平台)

控件类型

        从WidgetManager::initialise()可以看到所有的控件类型为下：

控件类型 控件说明 控件备注
Button 按钮  
Canvas 画布 显示纹理
ComboBox 下拉框 派生自EditBox，可设置是否可编辑
DDContainer 拖曳容器  
EditBox 编辑框  
ItemBox 项框 派生自DDContainer，支持拖曳
ListBox 列表框  
MenuBar 菜单栏  
MenuControl 菜单控件  
MenuItem 菜单项  
MultiListBox 多行列表框  
MultiListItem 多行列表项  
PopupMenu 弹出菜单  
ProgressBar 进度条  
ScrollBar 滚动条  
ScrollView 滚动视图  
ImageBox 图像框  
TextBox 文本框  
TabControl 标签控件  
TabItem 标签项  
Widget 控件  
Window 窗口  

        这些控件的关系图如下：
第一张：
MyGui札记（2）控件类型和皮肤
第二张：
MyGui札记（2）控件类型和皮肤
第三张： 
MyGui札记（2）控件类型和皮肤

 控件皮肤

        再来看Widget::_initialise(WidgetStyle _style, const IntCoord& _coord, const std::string& _skinName, Widget* _parent, ICroppedRectangle* _croppedParent, const std::string& _name)如何加载皮肤，代码如下：

1
2
3
4
5
6
7
ResourceSkin* skinInfo = nullptr;
ResourceLayout* templateInfo = nullptr;

if (LayoutManager::getInstance().isExist(_skinName))
    templateInfo = LayoutManager::getInstance().getByName(_skinName);
else
    skinInfo = SkinManager::getInstance().getByName(_skinName);

可以看到先判断皮肤是否来自布局管理器，否则的话再从皮肤管理器进行获取，亦即先从MyGUI_BlueWhiteTemplates.xml获取，再从MyGUI_BlueWhiteSkins.xml获取。MyGUI_BlueWhiteTemplates.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
    <Resource type="ResourceLayout" name="Window" version="3.2.0">
        <Widget type="Widget" skin="PanelEmpty" position="15 10 68 49" name="Root">
            <Property key="Snap" value="true"/>
            <Property key="Movable" value="false"/>
            <UserString key="LE_TargetWidgetType" value="Window"/>
            <Widget type="Widget" skin="CaptionEmptySkin" position="0 0 68 28" align="HStretch Top">
                <Widget type="TextBox" skin="TextBox" position="2 3 62 24" align="HStretch Top" name="Caption">
                    <Property key="TextColour" value="0 0 0"/>
                    <Property key="TextAlign" value="Center"/>
                    <Property key="FontName" value="Default"/>
                </Widget>
            </Widget>
            <Widget type="Widget" skin="WindowFrameSkin" position="0 28 68 20" align="Stretch">
                <Widget type="Widget" skin="ClientTileSkin" position="4 2 58 12" align="Stretch" name="Client"/>
            </Widget>
        </Widget>
    </Resource>
    <Resource type="ResourceLayout" name="Button" version="3.2.0">
        <Widget type="Widget" skin="ButtonSkin" position="20 25 29 26" name="Root">
            <Property key="FontName" value="Default"/>
            <Property key="TextAlign" value="Center"/>
            <UserString key="LE_TargetWidgetType" value="Button"/>
        </Widget>
    </Resource>

每个可视控件都有一个Resource type="ResourceLayout"的节点来描述该控件的布局，由上内容也可以看出某些控件是其他基本控件进行组合而成的。做为根子控件带有属性name="Root"，其子节点包含属性描述、子控件描述等等。注意一点<UserString key="LE_TargetWidgetType" value="Button"/>
表明这个控件所使用的控件类型为Button。所有的布局控件为下：

布局名称 说明 控件类型
CheckBox 勾选框 Button
RadioButton 单选按钮 Button
ScrollBarH 水平滚动条 ScrollBar
ScrollBarV 垂直滚动条 ScrollBar
SliderH 水平滑块 ScrollBar
SliderV 垂直滑块 ScrollBar
SliderHEmpty 空白水平滑块 ScrollBar
SliderVEmpty 空白垂直滑块 ScrollBar
Button 按钮 Button
ButtonImage 图像按钮 Button
TextBox 文本框 TextBox
EditBox 编辑框 EditBox
EditBoxStretch 可伸缩编辑框 EditBox
EditBoxEmpty 空白编辑框 EditBox
WordWrapEmpty 空白换行 EditBox
ComboBox 下拉框 ComboBox
Window 窗口 Window
WindowC 带标题的窗口 Window
WindowCS 带标题可调整大小的窗口 Window
WindowCX 带标题带关闭按钮的窗口 Window
WindowCSX 带标题可调整大小带关闭按钮的窗口 Window
MenuBar 菜单栏 MenuBar
MenuBarButton 菜单栏按钮 Button
MenuBarSeparator 菜单栏分割线 Widget
PopupMenu 弹出菜单 PopupMenu
PopupMenuSeparator 弹出菜单分割线 Widget
PopupMenuNormal 弹出菜单打钩按钮 Button
PopupMenuPopup 弹出菜单右侧展开按钮 Button
ProgressBar 进度条 ProgressBar
ProgressBarFill 填充式进度条 ProgressBar
ListBoxItem 列表框项 Button
ListBox 列表框 ListBox
ItemBox 项框 ItemBox
ItemBoxEmpty 空白项框 ItemBox
ScrollView 滚动视图 ScrollView
ScrollViewEmpty 空白滚动视图 ScrollView
TabHeaderButton 标签头按钮 Button
TabControl 标签控件 TabControl
MultiListBox 多行列表框 MultiListBox
MultiListButton 多行列表按钮 Button
MultiSubListBox 多行子列表框 ListBox

MyGUI_BlueWhiteSkins.xml内容部分为下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <Resource type="ResourceSkin" name="ButtonSkin" size="29 26" texture="MyGUI_BlueWhiteSkins.png">
        <BasisSkin type="SubSkin" offset="0 0 7 7" align="Left Top">
            <State name="disabled" offset="136 2 7 7"/>
            <State name="normal" offset="136 29 7 7"/>
            <State name="highlighted" offset="136 56 7 7"/>
            <State name="pushed" offset="136 83 7 7"/>
            <State name="disabled_checked" offset="136 110 7 7"/>
            <State name="normal_checked" offset="136 137 7 7"/>
            <State name="highlighted_checked" offset="136 164 7 7"/>
            <State name="pushed_checked" offset="136 191 7 7"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="7 0 14 7" align="HStretch Top">
            <State name="disabled" offset="143 2 14 7"/>
            <State name="normal" offset="143 29 14 7"/>
            <State name="highlighted" offset="143 56 14 7"/>
            <State name="pushed" offset="143 83 14 7"/>
            <State name="disabled_checked" offset="143 110 14 7"/>
            <State name="normal_checked" offset="143 137 14 7"/>
            <State name="highlighted_checked" offset="143 164 14 7"/>
            <State name="pushed_checked" offset="143 191 14 7"/>
        </BasisSkin>
        ……
    </Resource>

可以看出记录的是控件皮肤的构成，size属性指定控件的大小，texture指定控件所在的纹理图。含有多个SubSkin子节点，代表此皮肤的构成，比如这里的ButtonSkin皮肤是由九宫格拼接的，则有9个SubSkin子节点，另外还有个SimpleText来指定按钮上的文本位置。用SkinEditor.exe打开纹理文件MyGUI_BlueWhiteSkins.png，在Skins标签里选择ButtonSkin，切换到Regions标签，可看到具体的子皮肤构成，如下图所示：
MyGui札记（2）控件类型和皮肤

关于MyGUI_BlueWhiteImages.xml文件的作用，这个文件全部内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8"?>
<MyGUI type="Resource" version="1.1">
    <Resource type="ResourceImageSet" name="MultiListButtonImage">
        <Group name="Icons" texture="MyGUI_BlueWhiteSkins.png" size="12 10">
            <Index name="None">
                <Frame point="74 185"/>
            </Index>
            <Index name="Up">
                <Frame point="74 198"/>
            </Index>
            <Index name="Down">
                <Frame point="74 211"/>
            </Index>
        </Group>
    </Resource>
</MyGUI>

只定义了一个ResourceImageSet资源图像集，名称为MultiListButtonImage，这个名称被MyGUI_BlueWhiteTemplates.xml里面的内容进行引用，内容如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
    <Resource type="ResourceLayout" name="MultiListButton" version="3.2.0">
        <Widget type="Widget" skin="MultiListButtonSkin" position="20 25 45 21" name="Root">
            <Property key="FontName" value="Default"/>
            <Property key="TextAlign" value="Center"/>
            <UserString key="LE_TargetWidgetType" value="Button"/>
            <Widget type="ImageBox" skin="ImageBox" position="29 4 12 10" align="Right VCenter" name="Image">
                <Property key="ImageResource" value="MultiListButtonImage"/>
                <Property key="ImageGroup" value="Icons"/>
                <Property key="ImageName" value="Down"/>
                <Property key="NeedMouse" value="false"/>
            </Widget>
        </Widget>
    </Resource>

MultiListButton多行列表按钮采用了这个图像集，用ImageEditor.exe打开MyGUI_BlueWhiteImages.xml文件，在Images标签选择MultiListButtonImage，切换到Indexes标签，可看到索引到的是空白图像、上箭头图像、下箭头图像，如下图所示：
MyGui札记（2）控件类型和皮肤

另外，MyGUI_BlueWhiteTheme.xml文件，内容如下：

1
2
3
4
5
6
<?xml version="1.0" encoding="UTF-8"?>
<MyGUI type="List">
    <List file="MyGUI_BlueWhiteImages.xml"/>
    <List file="MyGUI_BlueWhiteSkins.xml"/>
    <List file="MyGUI_BlueWhiteTemplates.xml"/>
</MyGUI>

这个主题文件列出了该主题所需要使用到的另外文件，分别是MyGUI_BlueWhiteImages.xml、MyGUI_BlueWhiteSkins.xml和MyGUI_BlueWhiteTemplates.xml，这些都已在上面进行大概介绍过了。
下一篇继续……​

相关推荐