上一篇文章中我們講到了Quick-Cocos2d-x 3.3中的display文件中包含的方法。今天我們來介紹下Quick-Cocos2d-x 3.3中的ui庫。
Quick-Cocos2d-x 3.3中的UI分爲兩部分，一部分位於framework的ui.lua中，一部分位於framework/cc/ui中。在framework/cc/ui中的代碼已經重構了ui.lua中的接口，對於新用戶我們只需要使用framework/cc/ui下的接口就可以了。
我們先看下ui文件夾下有哪些文件：
下面我們來詳細說下每個文件的用途和內容：
| 文件名稱 | 控件 |
|---|---|
| UIButton | 按鈕基類 |
| UICheckBoxButton | CheckBox按鈕控件 |
| UICheckBoxButtonGroup | CheckBox按鈕組控件 |
| UIGroup | 控件組基類 |
| UIImage | 圖片控件 |
| UIInput | 輸入控件 |
| UILabel | 文字控件 |
| UILayout | 佈局基類 |
| UIListView | 列表控件 |
| UIListViewItem | 列表項控件 |
| UILoadingBar | 加載進度條控件 |
| UIPageView | PageView控件 |
| UIPageViewItem | PageView單個控件 |
| UIPushButton | 按鈕控件 |
| UIScrollView | 滾動視圖控件 |
| UISlider | 滑動控件 |
| UIStretch | 拉伸控件 |
接下來我們介紹常用的幾個控件，至於基類有興趣的同學可以自己去了解。 目前Quick-Cocos2d-x常用的控件有：
- UIPushButton
- UIImage
- UIInput
- UILabel
- UIListView
UIPushButton
UIPushButton其實就是我們常見的按鈕，在Cocos2d-x中相當於Menu和ImageMenuItem的組合。
UIPushButton包含三個方法：
|
1
2
3
|
function
UIPushButton:ctor(images, options)function
UIPushButton:setButtonImage(state, image, ignoreEmpty)function
UIPushButton:onTouch_(event) |
|
1
|
function
UIPushButton:ctor(images, options) |
ctor()創建一個UIPushButton對象，images傳入的是不同狀態下的圖片，options是參數表 其中scale9爲是否縮放。
|
1
|
function
UIPushButton:setButtonImage(state, image, ignoreEmpty) |
setButtonImage用來設置不同狀態下的按鈕狀態。
|
1
|
function
UIPushButton:onTouch_(event) |
該函數用來設置PushButton的觸摸事件。
UIImage
|
1
|
function
UIImage:ctor(filename, options) |
創建一個UIImage對象，filename是圖片文件名稱，options是參數表，scale9表示是scale9圖片。
|
1
|
function
UIImage:setLayoutSize(width, height) |
設置圖片大小。
UIInput
UIInput是輸入控件，相當於原來的EditBox和TextFiled。
|
1
|
function
UIInput:ctor(options) |
創建一個UIInput控件。options控件是參數表，UIInputType代表是EditBox或TextFiled。options的具體參數有點多，可以參看UIInput中newEditBox_和newTextFiled_的參數說明。
UILabel
UILabel是Cocos2d-x中的文本標籤的集合。
|
1
|
function
UILabel:ctor(options) |
創建一個UILabel控件。其中options爲參數表，options.UILabelType表示文本標籤的類型，1表示BMFont，2表示TTF。
|
1
|
function
UILabel:setLayoutSize(width, height) |
設置控件大小。
UIListView
UIListView是Quick-Cocos2d-x中的列表控件。
|
1
|
function
UIListView:ctor(params) |
創建一個UIListView控件。params表示UIListView的參數表。
|
1
|
function
UIListView:onCleanup() |
清除列表內容
|
1
|
function
UIListView:onTouch(listener) |
註冊列表控件觸摸函數。
|
1
|
function
UIListView:setAlignment(align) |
列表控件設置所有listItem中content的對齊方式
|
1
|
function
UIListView:newItem(item) |
創建一個新的listViewItem項
|
1
|
function
UIListView:setViewRect(item) |
設置顯示區域
|
1
|
function
UIListView:addItem(listItem, pos) |
在列表項中添加一項
|
1
|
function
UIListView:removeItem(listItem, bAni) |
在列表項中移除一項
|
1
|
function
UIListView:removeAllItems() |
移除所有的項
|
1
|
function
UIListView:getItemPos(listItem) |
取某項在列表控件中的位置
|
1
|
function
UIListView:isItemInViewRect(pos) |
判斷某項是否在列表控件的顯示區域中
|
1
|
function
UIListView:reload() |
加載列表
|
1
|
function
UIListView:dequeueItem() |
取一個空閒項出來,如果沒有返回空。