云信DUILIB 常用控件 小实例

云信duilib在原duilib基础上扩展而来，包含了常用的控件。

下面是自己学习过程中，经常用到的一些小知识点。

1 Label标签

1.1 一般用法

<Label name= "path_label" valign="center" height="auto" width="auto" margin="10,0,5,0"  text="存储地址"  normaltextcolor="white" font="1"
 />

比如：MFC 中常用的文件对话框

使用duilib可以这么写

              <Label name= "path_label" valign="center" height="auto" width="auto" margin="10,0,5,0"  text="存储地址"  normaltextcolor="white" font="1" />
              <RichEdit name="record_path" width="450" height="28" margin= "10,0,0,0" bkcolor="bk_url_edit"  bordersize="1"  bordercolor="bk_border_url_edit" valign="center"  align="vcenter" font="1" multiline="false" padding="5,0,0,0" normaltextcolor="bk_url_edit_text" disabledtextcolor="bk_url_edit_text" prompttext="路径" promptcolor="bk_url_edit_text"  borderround="2,2"/>
              <Button  name="set_file_path"  height="28" width="auto" margin= "20,0,1,0" bordersize="1"  valign="center"  normaltextcolor="change_file_path_color" font="1" text="打开路径"/>   

1.2 

使得标签位于盒子中间显示

可以这么写

            <Box bkcolor="bk_wnd_darkcolor1" height="60">
                <Label font="1" halign="center" valign="center" normaltextcolor="white" text="标签" />
            </Box>

1.3

使用textid  好处是在不修改XML的情况下，可以方便修改文字

<Label name="no_search_result_tip" visible="false" halign="center"
 margin="0,20,0,0" textid="STRID_MAINWINDOW_NO_SEARCH_RESULT" font="2"
/>

而这个textid是保存在bin\\lang\\zh_CN目录下的gdstrings.ini文件中的。

此文件中定义了id所对应的文本

1.4 Label标签的width默认是auto，根据文字确定宽度

将其居中对齐，可用如下方式

//将其设置为 stretch  可拉伸方式，这样其宽度由父容器决定，然后再将其 文字对齐方式设置为center 居中对齐
<Label  width="stretch" align="center" text="课程题目" font="9" />
或者，使用如下方式：
<Label  text="本节知识点" halign="center" font="7" />
   //标签宽度是文字宽度，因此align不起作用，这时候设置halign的含义是指它在父容器内的排序方式，此时是居中

2 分割线

分割线也是经常用到的。

2.1 横向分割线

<Control bkcolor="splitline_level2" height="1" />
or
<Control class="splitline_hor_level1" width="stretch"/> 

2.2 纵向分割线

<Control class="splitline_ver_level1" height="stretch"/>

分割线的颜色是在global.xml中定义的

  <!--分割线色值-->
    <!--第一级分割线，较深-->
    <TextColor name="splitline_level1" value="#ffd2d4d6"/>
    <!--第二级分割线，较浅-->
    <TextColor name="splitline_level2" value="#ffebedf0"/>
    <TextColor name="splitline_level8" value="#ff222435"/> 
 
    <!--分割线-->
    <Class name="splitline_hor_level1" value="bkcolor="splitl
ine_level1" height="1""/>
    <Class name="splitline_hor_level2" value="bkcolor="splitl
ine_level2" height="1""/>
    <Class name="splitline_ver_level1" value="bkcolor="splitl
ine_level1" width="1""/>
    <Class name="splitline_hor_level3" value="bkcolor="splitl
ine_level8" height="1""/> 

2.3 子控件间隔

 布局中的 childmargin="20" 表示 子控件间的额外距离。这个有时候也是分割线效果，只不过分割线颜色为背景色，这是因为它本质上是子控件的间隙。

比如VListBox设置childmargin  可以让列表项之间有空隙，进而起到分割线作用

                <VListBox class="list" bkcolor="lightcolor3" name="course_list" vscrollunit="100" childmargin="20" padding="30,20,20,0">

3图像

3.1 盒子里有一个图片，圆形居中，图片中间部分显示label名字

<Box height="150" bkcolor="bk_wnd_logincolor">
   <Control bkimage="circle-1.png" width="100" height="100"  valign="center" halign="center" borderround="100,100" />
   <Label text="使用者" halign="center" valign="center" />
</Box>

3.2 图片按钮

<Button name="btn_header1" width="66" height="66" margin="1,1,1,1"
 borderround="66,66" cursortype="hand" bkimage="1.png" />

不过，这种图片按钮，规整成圆形后，边界很粗糙，所以可以加边界遮罩，即除边界外全透明的同等图片来缓和处理。

上图所示，是加遮罩后的效果。

<Box width="auto" height="auto" valign="center" >
    <Button name="btn_header" width="66" height="66" margin="1,1,1,1" borderround="66,66" cursortype="hand" />
    <Control bkimage="head_mask.png" mouse="false"/>//68*68的边界遮罩
</Box> 

3.3  小图标 配合按钮、EDIT等控件使用

       <!--搜索栏-->
        <HBox height="36" bkcolor="bk_main_wnd_search">
            <Control name="search_icon" width="auto" height="auto" valign="center" margin="10,0,0,0" alpha="192" bkimage="file='../public/icon/icon_search.png'"/>
            <RichEdit class="simple prompt" name="search_edit" height="auto" margin="8,0,10,0" valign="center" font="2" normaltextcolor="white" prompttextid="STRID_MIANWINDOW_SEARCH_EDIT_PROMPT"/>
            <Button name="clear_input" visible="false" valign="center" margin="0,0,10,0"
                    normalimage="..\public\button\btn_del_search_normal.png" 
                    hotimage="..\public\button\btn_del_search_hover.png" 
                    pushedimage="..\public\button\btn_del_search_normal.png"/>
        </HBox>

4 Option选项卡与Tab 展示页  结合使用

点击某一选项卡后，展示这一选项卡对应的页面，点击另一个选项卡后，则展示另一个选项卡对应的页面。由此构成了多页面展示效果。

实现逻辑如下：

逻辑如下:
            <HBox width="auto" height="auto" halign="center" margin="0,11,0,0" childmargin="10">
                <Option group="demo_opt" selected="true">
                    <Event type="select" receiver="demo_tab" applyattribute="selectedid="0""/>
                </Option>
                <Option group="demo_opt" >
                    <Event type="select" receiver="demo_tab" applyattribute="selectedid="1""/>
                </Option>
                <Option group="demo_opt" >
                    <Event type="select" receiver="demo_tab" applyattribute="selectedid="2""/>
                </Option>
            </HBox>
                <TabBox name="demo_tab" height="auto">
                    <VBox height="auto" name="tab_0">
                    </VBox>
                    <VBox height="auto" name="tab_1">
                    </VBox>
                    <VBox height="auto" name="tab_2">
                    </VBox>
                </TabBox>

实例1： 使用option控件

                <!-- Option选项卡 -->
            <VBox halign="center" childmargin="10">
                    <Option  bordersize="5" height="60" width="stretch" valign="center" halign="center" group="headPage_opt" name="myCourse" selected="true" selectednormalcolor="bk_wnd_darkcolor5" selectedhotcolor="bk_wnd_darkcolor1" selectedpushedcolor="bk_wnd_darkcolor1" text="我的课程" normaltextcolor="white">
                     <Event type="select" receiver="page_tab" applyattribute="selectedid="0""/>
                    </Option>
                    <Option width="stretch"  selectednormalcolor="bk_wnd_darkcolor5" selectedhotcolor="bk_wnd_darkcolor1" selectedpushedcolor="bk_wnd_darkcolor1"  height="60"   valign="center" halign="center" group="headPage_opt" name="myDevice" text="设备调试" normaltextcolor="white">
                        <Event type="select" receiver="page_tab" applyattribute="selectedid="1""/>
                    </Option>
                    <Option width="stretch"  selectednormalcolor="bk_wnd_darkcolor5" selectedhotcolor="bk_wnd_darkcolor1" selectedpushedcolor="bk_wnd_darkcolor1"  height="60"   valign="center" halign="center" group="headPage_opt" name="mySet" text="设置" normaltextcolor="white">
                        <Event type="select" receiver="page_tab" applyattribute="selectedid="2""/>
                    </Option>   
            </VBox>  
 
 
        <TabBox  name="page_tab" >
            <VBox>
                <Label text="页面1"/>
            </VBox>
            <VBox>
                <Label text="页面2"/>
            </VBox>
            <VBox>
                <Label text="页面3"/>
            </VBox>
        </TabBox>

实例2：使用OptionBox布局，这样功能更强大。

            <VBox  halign="center">
                <OptionBox height="60" cursortype="hand" group="headPage_opt" name="myCourse" selected="true">
                    <Event type="select" receiver=".\select_tab" applyattribute="selectedid="0""/>
                    <Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="1""/>
                    <Event type="select" receiver="page_tab" applyattribute="selectedid="0""/>
 
                    <TabBox mouse="false" mousechild="false" name="select_tab" >
                        <HBox>
                            <Control normalimage="file='bk_tab_selected.png'  corner='5,5,5,5'"/>     
                        </HBox>
                        <HBox>
                            <Control  normalimage="file='bk_tab_unselected.png' corner='5,5,5,5'"/>            
                        </HBox>
                    </TabBox>
                    <Label text="页面1"  halign="center" valign="center" normaltextcolor="bk_wnd_darkcolor1" font="2" mouse="false"/>
                </OptionBox>
                <OptionBox height="60" cursortype="hand" group="headPage_opt" name="myDevice">
                    <Event type="select" receiver=".\select_tab" applyattribute="selectedid="1""/>
                    <Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="0""/>
                    <Event type="select" receiver="page_tab" applyattribute="selectedid="1""/>
                    <TabBox mouse="false" mousechild="false" name="select_tab">
                        <HBox>
                            <Control normalimage="file='bk_tab_selected.png'  corner='5,5,5,5'"/>     
                        </HBox>
                        <HBox>
                            <Control  normalimage="file='bk_tab_unselected.png' corner='5,5,5,5'"/>            
                        </HBox>
                    </TabBox>
                    <Label text="页面2"  halign="center" valign="center" normaltextcolor="bk_wnd_darkcolor1" font="2" mouse="false"/>
                </OptionBox>
                <OptionBox height="60" cursortype="hand" group="headPage_opt" name="mySet">
                    <Event type="select" receiver=".\select_tab" applyattribute="selectedid="1""/>
                    <Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="0""/>
                    <Event type="select" receiver="page_tab" applyattribute="selectedid="2""/>
                     <TabBox mouse="false" mousechild="false" name="select_tab">
                        <HBox>
                            <Control normalimage="file='bk_tab_selected.png'  corner='5,5,5,5'"/>     
                        </HBox>
                        <HBox>
                            <Control  normalimage="file='bk_tab_unselected.png' corner='5,5,5,5'"/>            
                        </HBox>
                    </TabBox>
                    <Label text="页面3"  halign="center" valign="center" normaltextcolor="bk_wnd_darkcolor1" font="2" mouse="false"/>                    
                </OptionBox>
            </VBox>
 
 
        <TabBox  name="page_tab" >
            <VBox>
                <Label text="页面1"/>
            </VBox>
            <VBox>
                <Label text="页面2"/>
            </VBox>
            <VBox>
                <Label text="页面3"/>
            </VBox>
        </TabBox>
 

效果如下：

4 最大化按钮

默认情况下，在界面上添加后，你会发现，虽然最大化了窗口，但是再次点击时并没有起作用，因为这需要自己添加代码，在响应单击事件时确定最大化，和从最大化返回。

实现由两种方式，第一种如下：

XML中语句

        <!-- 左侧标题栏 最小及关闭按钮 -->
        <HBox height="auto" margin="200,5,5,5" valign="top">
            <Control mouse="false"/>
            <Button class="btn_wnd_min" margin="2,0,2,0" name="minbtn"/>
            <Button class="btn_wnd_max" name="btn_max_restore" margin="2,0,2,0"/> //最大化
            <Button class="btn_wnd_close" name="closebtn"/>
        </HBox>
        <!-- 标题栏分割线 -->
        <Control bkcolor="splitline_level2" height="1" margin="200,40,0,0"/>

相应窗口的代码，比如CMyForm窗口

1）定义按钮

ui::Button		*btn_max_restore_;

2）响应OnClicked( ui::EventArgs* arg )消息

     如果最大化，点击的时候则返回原状态，如果是原状态，点击后则最大化。

	else if(name == L"btn_max_restore")
	{
		DWORD style = GetWindowLong(m_hWnd, GWL_STYLE);
		if (style & WS_MAXIMIZE)
			::ShowWindow(m_hWnd, SW_RESTORE);
		else
			::ShowWindow(m_hWnd, SW_MAXIMIZE);
	}

3）定义函数，用于设置此按钮的类别，比如设置为最大化类、设置为restore类，每种类云信duilib提供了对应的界面展现形式。

void OnWndSizeMax(bool max);

void OnWndSizeMax(bool max)
{
	if (btn_max_restore_)
		btn_max_restore_->SetClass(max ? L"btn_wnd_restore" : L"btn_wnd_max"); 
}

而什么时候改变状态呢，是在消息处理中，判断是否窗口改变大小消息

HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
	if (uMsg == WM_SIZE)
	{
		if (wParam == SIZE_RESTORED)
			OnWndSizeMax(false);
		else if (wParam == SIZE_MAXIMIZED)
			OnWndSizeMax(true);
	}
	return __super::HandleMessage(uMsg, wParam, lParam);
}

这样设置后，最大化及还原功能就正常了。

第二种如下：

                    <HBox width="auto" height="auto" valign="top">
                        <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0"/>             //最小化
                        <Box width="21" margin="4,6,0,0">
                            <Button class="btn_wnd_max" name="maxbtn"/>                          //最大化
                            <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>  //还原  默认不可见
                        </Box>
                        <Button class="btn_wnd_close" name="closebtn" margin="4,6,0,0"/>         //关闭
                    </HBox>

窗口中新增一改变窗口大小时响应的函数

void OnWndSizeMax(bool max);

void CMyForm::OnWndSizeMax(bool max)
{
	if (!m_pRoot)
		return;

	FindControl(L"maxbtn")->SetVisible(!max);
	FindControl(L"restorebtn")->SetVisible(max);
}

窗口大小改变时，响应此函数 

LRESULT CMyForm::HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
	if (uMsg == WM_SIZE)
	{
		if (wParam == SIZE_RESTORED)
			OnWndSizeMax(false);
		else if (wParam == SIZE_MAXIMIZED)
			OnWndSizeMax(true);
	}

这个相对来说，简单些，设置的不多。

暂时，这些，未完待续。。。

有同样使用这个不开源的网易云信的，可以加Q群331506725