现在的位置: 首页 > 综合 > 正文

clayui界面库系列教程之四:控件的使用

2013年07月20日 ⁄ 综合 ⁄ 共 4027字 ⁄ 字号 评论关闭

这次我们来讲解一下clayui自带的控件的使用


       先介绍一下clayui里控件的特点


       clayui里的控件,都有一个布局,这个布局规定了控件的皮肤,以及控件里的子窗口的摆放位置,缩放系数,角度,动画。没有布局的控件是不起任何作用的,因为连皮肤都没有,是不可见的。


       目前clayui为每个控件都提供一个简单的布局,以后界面编辑器发布后,大家就可以自由的修改布局了。


       提示:CLAYUI_TTEXT这个文本控件,是没有布局的。


      
目前clayui系统里包含了名为:“editbox”, “slider”, “listbox”, “combobox”, “checkbox”, “radiobox”的布局,根据名称对应相同的控件


      
以combobox为例,介绍控件的创建:


       先new一个CLAYUI_ComboBox对象

       CLAYUI_ComboBox* comboframe = new CLAYUI_ComboBox();


       初始化
       comboframe->Init(mainframe, g_graphics.m_draw, 0);


       设置布局,combobox的布局当然是名称为"combobox"的布局
       comboframe->SetLayout(1, 0, "combobox");


       将combobox加入到mainframe里
       mainframe->AddCustomFrame(0, "combo", 400, 300, 120, 24, 100, comboframe);


       其他控件的创建与此类似,不同之处在
SetLayout这个函数,例如编辑框,传递的第三个参数就是"editbox"了


       下面介绍每个控件的用法:




          


      
CLAYUI_TTEXT:  
文本控件(没有布局)


      
SetText, GetText:


      
这2个函数就是设置文本,得到文本了


       SetTextAlignType(short textxaligntype, short textyaligntype);


       设置文本对齐方式,


      
textxaligntype: 0表示左对齐,1表示行居中

      

      
textyaligntype:0表示顶对齐,1表示列居中


       SetFont(char* textname, int textengine)


      
设置字体,目前设置字体比较简单,没有下划线,倾斜等高级效果


      
textname: 字体文件的绝对路径,目前仅支持不包含点阵的矢量TTF字体


       textengine: 设为0


       SetTextSize(int size, int xoffset, float yoffset)


       设置字体大小,字间距,行间距


       size: 字体大小


       xoffset: 字间距


       yoffset: 行间距,是一个倍数,例如:1.5倍行距,3倍行距...



       SetTextColor(short r, short g, short b, short a)


       设置文字颜色


       SetClip(int isclip, int left, int top, int width, int height)


       设置文字的裁减矩形,如果没有设置,文字将不显示


       GetRowSpacing()


       得到行间距


       GetCharacterSpacing()


       得到字间距


       GetTextAlignType(short* xaligntype, short* yaligntype)


       得到文字对齐方式


       GetFontSize()


       得到字体大小


       SetIsHasCursor(short ishascursor)


       设置是否有文字光标


       GetIsHasCursor()


       是否有文字光标


       GetTextCursor(short* sx, short* ex)


       得到光标的位置/选中字符串的起始序号与结束序号


       光标没有选中字符串时,sx 返回光标的位置,ex返回-1


      
消息:


      
CLAYUIMSG_TTEXT_ECHANGE: 文本框内容改变后发送此消息


      
CLAYUI_EditBox:
编辑框,布局名为"editbox",编辑框中包含一个
CLAYUI_TTEXT


      
SetText, GetText


       设置,得到文本


      
GetSysText()


       返回CLAYUI_TTEXT的指针


       消息:


      
CLAYUIMSG_EDITBOX_ECHANGE: 文本框内容改变后发送此消息


       CLAYUI_CheckBox: 复选框,布局名为“checkbox",复选框中包含一个CLAYUI_TTEXT


      
SetCheck, GetCheck


       设置,得到复选状态


      
SetText


       设置文本


      
消息:


      
CLAYUI_LCLICK: 左键按下的消息就是复选状态改变的消息


       CLAYUI_RadioBox: 单选框,布局名为“radiobox",派生自CLAYUI_CheckBox


      
SetRelativeRadio


       设置相关联的单选框


       CLAYUI_Slider: 滚动条,布局名为“slider",包含一个类型为CLAYUI_FRAME的子窗口,作为滚动块使用


      
提示:
默认滚动条是一个垂直滚动条,如果你想要一个水平滚动条,把它旋转90度就行了


      
SetRange(float rmin, float rmax),GetRange(float& rmin, float& rmax)


       设置范围,得到范围


      
SetPos(float pos),float GetPos()


       设置当前值,得到当前值


      
SetLTU(int ltl, int mtm, int utu)


       设置滚动块的活动范围


       ltl:滚动块left到滚动条left的间距


      
mtm:滚动块bottom 到滚动条bottom的间距


       utu:滚动块top到滚动条top的间距


      
消息:


      
CLAYUIMSG_SLIDER_POSCHANGE
: 滚动块位置改变后发送此消息


       CLAYUI_ListBox:列表框,布局名为“listbox",由一个滚动条,2个子窗口组成,2个子窗口被用来制作鼠标选中和滑动的动画。


      
SetItemsDepth(DWORD depth)


       设置列表框里所有Item的深度,目前depth设为2,需要手工设置。


       这里说明一下,由于CLAYUI_ListBox已经包含了3个子窗口,而列表框添加的item也是子窗口,那么需要设置一下添加的item的深度,避免被其它3个子窗口覆盖


       目前滚动条的深度为2,另外2个子窗口的深度分别为0,1,那么需要设置item的深度为2,当item被添加后,会被插入到2这个深度,而滚动条的深度会++,那么,结果就是item就会覆盖2个子窗口,而被滚动条遮挡


       由于可以使用界面编辑器来编辑"listbox"的布局,用户可以在这个布局里另外添加个性化的窗口,动画元素,所以深度需要用户自己来设置。


      
ClearAllItem()

      

       清除所有item


      
SetCursel(int index)


       设置序号为index的item为选中状态


      
GetString(int index)


       得到序号为index的item的文字


      
GetCurSel()


       返回选中item的序号


      
DeleteItem(int index)


       删除序号为inidex的item


      
GetItem(int index)


       得到序号为index的子item指针


       目前这里会得到一个CLAYUI_TTEXT的对象,为什么说是”目前“呢?因为listbox被设计为可以添加其他基类为CLAYUI_FRAME的窗口,例如,添加一个EDITBOX作为一个Item,此功能还未开放出来。


      
InsertString(int index, CLAYUI_CHAR* str)


       插入序号为index的文本


      
SetFontInfo(char* fontpath, DWORD textengine, DWORD textsize, CLAYUI_COLOR textcolor)


       设置文字的参数


      
AddString(CLAYUI_CHAR* str)


       添加文本


      
消息:


      
CLAYUIMSG_LISTBOX_SELCHANGE
: 当item被鼠标单击时会触发此消息


       CLAYUI_ComboBox:下拉框,包含一个CLAYUI_EditBox,一个CLAYUI_ListBox, 一个CLAYUI_FRAME(作为下拉按钮)


      
SetListHeight(int height)

 

       设置下拉框的高度

 

      
其他函数与listbox里的类似,这里就不多做说明了

 

      
消息:


      
CLAYUIMSG_COMBOBOX_SELCHANGE
: 当item被鼠标单击时会触发此消息

 

抱歉!评论已关闭.