游戏开发中，经常会使用到很多有关界面的控件，这些都属于UI控件。
看了一下cocos里面的各种控件，几乎所有UI控件的基类都继承Widget类，目前看是这样，这个类是节点类的一种，若要自定义UI控件，继承这个类是必须的。
Widget类里包含了：
FocusDirection 控件焦点方向
PositionType 布局系统中的控件位置类型
SizeType 布局系统中的控件尺寸类型
TouchEventType 触摸事件类型
TextureResType 纹理资源类型
BrightStyle 控件的高亮属性
ccWidgetTouchCallback 控件触摸事件回调
ccWidgetClickCallback 控件点击事件回调
ccWidgetEventCallback 空间用户定制事件等(与CocosStudo一起使用)
同时还包含了这些属性的各种相关方法，功能十分强大，由于太多不一一列出来，有兴趣可以查看官方API。
那这些控件要怎样排版呢？这个时候就涉及到Layout类，一般来说，我们称其为页面视图控件，每一个页面是一个Layout类。
Layout类中的常用方法
static Layout* create() //创建一个Layout对象
virtual void addChild(Node * child) //向其添加一个子节点，一般添加控件Widget的子类
void setBackGroundImage(const std::string& fileName,TextureResType=UI_TEX_TYPE_LOCAL) 设置页面背景图
void setBackGroundColor(const Color3B& color) //设置背景颜色 ※相对的还有get方法
void setBackGroundColor(const Color3B& startColor,const Color3B& endColor) //设置背景颜色，参数一是开始时颜色，参数二是结束时背景颜色 ※相对的还有获取2个状态颜色的get方法
void setBackGroundImageColor(const Color3B& color) //设置背景图像的颜色 ※相对的还有get方法
void removeBackGroundImage() //删除背景图像
const Size& getBackGroundImageTextureSize() //获取背景图像尺寸
除了可以自定义UI控件外，Cocos2dx原本就已经为我们准备了一套简单易懂功能齐全的UI控件。
以下列表只列出常用的方法，更多其他方法可以查询官网API
1、文本标签控件-Text
该控件可以在屏幕上显示指定文本内容，跟LabelTTF很像。
static Text* create //默认创建对象方法
void setText(const std::string& text) //设置此控件显示的文本内容
const std::string& getStringValue() //获得显示文本内容
void setFontSize(int size) //设置此控件显示文本时采用的字体尺寸
void setFontName(const std::string& name) //设置控件采用的字体式样，参数是样式字体名
void setTextAreaSize(const Size& size) //设置控件文本区域的尺寸
void setTextHorizontalAlignment(TextHAlignment alignment) //设置控件水平个对齐方式
void setTextVerticalAlignment(TextVAlignment alignment) //设置控件垂直个对齐方式
建立示例：
auto text = Text::create();
text->setFontName("fonts/starcraft.ttf");
text->setText("text");
text->setFontSize(40);
text->setPosition(300,300); //接下来的省略这个步骤
addChild(text);
2、按钮控件-Button
该控件可以在屏幕上添加必要的按钮
static Button* create() //创建一个Button对象，跟MenuItem很像
void loadTextures(const std::string& normal,const std::string& selected,const std::string& disabled="",TextureResType texType=UI_TEX_TYPE_LOCAL) //为按钮加载纹理，参数一是控件未选中时图片路径，参数二是被选中时的，参数三是被禁用状态下的图片，参数四表示才用纹理类型。参数有两个，一个是UI_TEX_TYPE_LOCAL表示直接才用路径文件，UI_TEX_TYPE_PLIST由Plist文件加载纹理
void setPressedActionEnabled(bool enabled) //设置按钮被按下时是否变大
void setTitleText(const std::string& text) //设置按钮显示文本
void setTitleColor(const Color3B& color) //设置文本颜色
void setTitleFontSize(float size) //设置显示的文本字体尺寸
void setTitleFontName(const std::string& fontName) //设置按钮显示的文本字体样式
void addTouchEventListener(Ref* target,SEL_TouchEvent selector) //来自父类的方法，要使按钮按下后制定执行任务，必须为其添加监听器。
建立示例：
auto * button = Button::create();
button->setTitleText("有种按我");
button->setTitleFontSize(16);
button->loadTextures("pic/button1.png","pic/button2.png","",UI_TEX_TYPE_LOCAL);
button->addTouchEventListener(this,toucheventselector(Layer::buttonEvent));//添加监听
buttonEvent(Object * pSender,TouchEventType type){监听回调函数
switch(type){
case ui::TOUCH_EVENT_BEGAN: //当按钮被按下时
......;
case ui::TOUCH_EVENT_MOVED: //手指在按钮上移动时
......;
case ui::TOUCH_EVENT_ENDED: //按钮抬起时
......;
case ui::TOUCH_EVENT_CANCELED: //按钮取消时
......;
}}
3、静态图像控件-ImageView
该控件可以用于游戏画面中一些静态物体的显示，跟静态经历相似。
static ImageView* create() //创建一个对象
void loadTexture(const std::string& fileName,TextureResType texType=UI_TEX_TYPE_LOCAL) //为图像显示控件加载纹理，参数一是文件路径，而是采用类型。
建立示例：
auto imageView = ImageView::create();
imageView->loadTexture("pic/bg.png",UI_TEX_TYPE_LOCAL);
4、自定义字体文本控件-TextAtlas
该控件跟LabelAtlas非常相似，通过预渲染所有字符的纹理来绘制字符串
static TextAtlas* create() //创建一个对象
void setProperty(const std::string& stringValue,const std::string& charMapFile,int itemWidth,int itemHeight,const std::string& startCharMap) //初始化字符串，参数一为要显示字符串，参数二是字体图偏，参数三是字体宽度，参数四是字体高度，参数五是字体起始字符
void setString Value(const std::string& value) //设置字符串文本
const std::string& getStringValue() //获取文本字符串
建立示例：
auto textAtlas = TextAtlas::create();
textAtlas->setProperty("0123456789","fonts/number.png",16,30,"0");
5、位图文本控件-TextBMFont
类似LabelBMFont,通过fnt字体坐标文件来进行文本渲染。
static TextBMFont* create() //创建一个TextBMFont对象
void setFntFile(const std::string& fileName) //设置显示文本所采用的字体式样文件路径
void setText(const std::string& value) //设置显示文本
const std::string& getStringValue() //获取文本字符串
建立示例：
auto textBMFont = TextBMFont::create();
textBMFont->setFntFile("fonts/dd.fnt");
textBMFont->setText("0123465");
6、进度条控件-LoadingBar
显示进度加载时使用，没有设置进度条最大值的方法。
static LoadingBar* create() //创建一个对象
void setDirection(LoadingBarType dir) //设置进度条进度加载的方向，参数有LoadingBarTypeLeft和LoadingBarTypeRight。
int getDirection() //获取进度条加载方向
void loadTexture(const std::string& texture,TextureResType texType=UI_TEX_TYPE_LOCAL) //为进度条加载纹理，参数一是加载纹理图片的路径，参数二是才用纹理类型。
void setPercent(int percent) //设置进度条加载百分比
int getPercent() //获取加载百分比
建立示例：
auto loadingBar = LoadingBar::craete();
loadingBar->loadTexture("pic/bar.png",UI_TEX_TYPE_LOCAL);
loadingBar->setPercent(50);
7、拖拉条控件-Slider
该控件用于游戏中需要拖拉调节某项值的大小的情况，比如拖拉声量大小等。
static Slider* create() //创建一个对象
void loadBarTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL) //为未进行拖拉时的进度条加载纹理，参数一是加载纹理图片的路径，参数二是采用纹理类型。
void loadProgressBarTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL) //为正在拖拉时的进度条加载纹理，参数一是加载纹理图片路径，参数二是采用纹理类型。
void loadSlidBallTexture(const std::string& normal,const std::string& pressed,const std::string& disabled,TextureResType texType=UI_tEX_TYPE_LOCAL) //为拖拉条上的游标加载纹理，参数一是游标没被选中时图片路径，参数二是被按下时的图片路径，参数三是被禁用时的图片路径，参数四是纹理类型。
void
void setPercent(int percent) //设置拖拉条百分比
int getPrecent //获取进度条百分比
void addEventListenerSlider(Ref* target，SEL_SlidPercentChangedEvent selector) //为拖拉条设置监听，参数一指向带有事件处理方法的对象指针，参数二是指向对应的处理方法的指针
建立示例：
auto slider = Slider::Create();
slider->loadBarTexture("pic/sliderTrack.png");
slider->loadSlidBallTextures("pic/sliderBall1.png","pic/sliderBall2.png","",UI_tEX_TYPE_LOCAL);
slider->loadProgressBarTexture("pic/sliderProgress.png");
slider->adddEventListenerSlider(this,Sliderpercentchangedselector(Layer::sliderBarEvent)); //添加监听器
sliderBarEvent(Oject* pSender,SliderEventType type){ //监听函数参数
if(type == SLIDER_PERCENTCHANGED){
Slider* slider = dynamic_cast<Slider*>(pSender); //强行转类型
slider->getPercent();
}}
转自：https://blog.csdn.net/gladioluslai/article/details/52608246