码迷,mamicode.com
首页 > 其他好文 > 详细

Duilib学习笔记《03》— 控件使用

时间:2015-11-17 16:55:05      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

在前面已经对duilib有个一个基本的了解,并且创建了简单的空白窗体。这仅仅只是一个开始,如何去创建一个绚丽多彩的界面呢?这就需要一些控件元素(按钮、文本框、列表框等等)来完善。


一. Duilib控件简介

在之前空白窗体的基础上,在界面上添加了一些控件,让大家先对这些控件效果有个基本的认识。如下图所示:
基本控件
技术分享
 
高级控件
技术分享
 
 
一些控件的基本显示效果就如同上面两幅图所示。实际上,在Duilib学习笔记《01》—duilib整体框架认识中我们就已经提到过Duilib这个库的组成,其中就提到了控件这部分,如下图所示:
技术分享
 
对应到工程代码中,实际上是分为了两部分——Core 和 Control
Core中包含的是所有控件公用的部分,里面主要是一些基类和绘制的封装。
Control中包含的就是各个不同的控件的行为。
技术分享       技术分享
 

二. Duilib控件使用

下面就挑选部分控件的使用具体说明一下:
1)Button控件
技术分享
 
按钮控件大家应该都不陌生了,在之前的空白窗体例子中左上角的系统操作按钮就用的按钮控件。
<Button name="closeBtn" maxwidth="45" maxheight="17" normalimage="file=‘sys_dlg_close.png‘ source=‘90,0,135,17‘" hotimage="file=‘sys_dlg_close.png‘ source=‘45,0,90,17‘" pushedimage="file=‘sys_dlg_close.png‘ source=‘0,0,45,17‘"/>
在XML布局中以<Button  属性名=”属性值” />的形式书写。
如上面的closeBtn的例子。其中:name表示控件名称,同一窗口内必须唯一;maxwidth、maxheight表示分别控件的最大宽度、最大高度;normalimage、hotimage、pushedimage分别表示按钮的三状态(正常状态、鼠标移动上去的状态、鼠标按下的状态)。
当然,除了例子中的这些属性外,每个控件对应的都还有很多属性,具体可以查阅属性列表,根据实际需要使用。
2)Edit控件
技术分享
 
<Edit name="button1" tooltip="普通控件" text="普通控件" bkimage="res=‘button_pushed.png‘ corner=‘6,6,6,6‘" />

Edit控件对应的有各种属性(只读、数字、密码。。。),而对应的仅仅只需要在XML中普通控件的布局属性中设分别设置readonly、numberonly、password即可。

3)Combo控件
<Combo name="font_type" droptype="droplist" width="100" height="22" textpadding="4,1,1,1" normalimage="file=‘combo.png‘ source=‘0,0,100,22‘ corner=‘2,2,20,2‘" hotimage="file=‘combo.png‘ source=‘0,22,100,44‘ corner=‘2,2,22,2‘" pushedimage="file=‘combo.png‘ source=‘0,44,100,66‘ corner=‘2,2,22,2‘">
    <ListLabelElement text="微软雅黑" selected="true" height="23" />
    <ListLabelElement text="宋体" height="23" />
    <ListLabelElement text="黑体" height="23" />
    <ListLabelElement text="幼圆" height="23" />
    <ListLabelElement text="楷体" height="23" />
</Combo>

XML布局中外侧是<Combo></Combo>,内层通过<ListLabelElement />添加具体选择。

4)List控件
<List name="listview" vscrollbar="true" hscrollbar="true" headerbkimage="file=‘list_header_bg.png‘" itemtextstyle="center">
    <ListHeader height="24" menu="true">
        <ListHeaderItem text="姓名" width="100" hotimage="file=‘list_header_hot.png‘" pushedimage="file=‘list_header_pushed.png‘" sepimage="file=‘list_header_sep.png‘" sepwidth="1" />
        <ListHeaderItem text="学号" width="200" hotimage="file=‘list_header_hot.png‘" pushedimage="file=‘list_header_pushed.png‘" sepimage="file=‘list_header_sep.png‘" sepwidth="1" />
        <ListHeaderItem text="成绩" width="200" hotimage="file=‘list_header_hot.png‘" pushedimage="file=‘list_header_pushed.png‘" sepimage="file=‘list_header_sep.png‘" sepwidth="1" />
    </ListHeader>
</List>

在实际中,我们可能需要向控件中添加数据,而对于List中如何添加数据呢?如下所示:

// List控件中添加数据
// 注意:添加List列表内容,必须先Add(pListElement)添加元素,再SetText进行元素值的设置
for (int i = 0; i < 10; i++)
{
    CListTextElementUI* pListElement = new CListTextElementUI;
    pListElement->SetTag(i);
    m_pList->Add(pListElement);

    pListElement->SetText(0, _T("WHO1753"));
    pListElement->SetText(1, _T("程序设计"));
    pListElement->SetText(2, _T("100"));
}

技术分享


三. 总结

除了上述这些列举的这些控件例子外,还有其它很多控件没能一一列举。但记住一点,一些复杂的东西都是由一些简单的东西所组成的。对于控件这部分的介绍,总结起来其实主要就是一下几点:
1)布局
控件在XML中布局基本都是<控件 属性名=”属性值”  />的形式书写。
2)属性设置
在前面,控件的属性我们基本都是在XML布局文件找那个就添加设置了。这当然是一个方法。但除此之外,还可以通过控件对应提供的方法来设置。如Edit控件,我们可以直接在XML布局中可以设置只读、数字、密码等属性。同样,我们也可以在Edit所提供的方法中发现提供了SetReadonly、SetNumberOnly、SetPasswordMord等方法。具体使用中根据时间情况的需要在XML中设置或者通过控件方法设置。
3)根据name获取控件
对于很多控件,最终可能不仅仅只是一个单纯的显示。很多时候还要和数据打交道。所以在具体处理时需要根据XMl文件中控件的属性name获取指定的控件进行相关操作。在代码中控件(以Button为例,其它控件获取方法类似)获取方式如下:
CButtonUI* m_pCloseBtn;        
m_pCloseBtn = static_cast<CButtonUI*>(m_PaintManager.FindControl(_T("closeBtn")));

4)控件使用

不同的控件具体情况下,操作也不一样。如Edit控件可用于输入文本,数字等等。List控件可以显示不同列、不同行的数据。也就是说具体每个控件的方法不一样,对应的每个控件的方法,Duilib的Control中包含的就是各个不同的控件的行为方法了,使用时如果对于某些方法不熟悉,可以直接查看。

最后附上本节对应的代码:代码下载
 
 
 
 

Duilib学习笔记《03》— 控件使用

标签:

原文地址:http://www.cnblogs.com/MrYuan/p/4971980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!