这次我们来讲解一下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被鼠标单击时会触发此消息