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

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