云信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