学习几个UI控件，CCControlSlider、CCControlSwitch、CCControlButton，它们都来自Cocos2d-x扩展库。
使用UI时候需要包含扩展库头文件与命名空间，如下：
#include "cocos-ext.h" USING_NS_CC_EXT;
CCScale9Sprite需要：
#include "cocos-ext.h" using namespace cocos2d::extension;一、滑动条（CCControlSlider）：
就如名字一样，这个控件就是添加一个滑动条，其类中创建代码如下：
class CC_EX_DLL CCControlSlider : public CCControl
{
public:
static CCControlSlider* create(const char* bgFile,const char* progressFile,const char* thumbFile);
static CCControlSlider* create(CCSprite * backgroundSprite,CCSprite* pogressSprite,CCSprite* thumbSprite);
}有两种不同的创建方法：
第一种创建方式：通过图片
static CCControlSlider* create(const char* bgFile,const char* thumbFile);这个create通过三张图片进行创建。
const char* bgFile：滑动条未滑动时背景图片。
const char* progressFile,：滑动条向前滑动后，滑动部分显示，表示滑动进度。
const char* thumbFile：拇指，滑动按钮。
实例：只能响应CCControlEventValueChanged
bool HelloWorld::init()
{
CCLayer::init();
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCLabelTTF* ttf = CCLabelTTF::create();
ttf->setTag(5);
ttf->setPosition(ccp(winSize.width/2 +20,winSize.height/2+20));
addChild(ttf);
CCControlSlider* slider = CCControlSlider::create("sliderTrack.png","sliderProgress.png","sliderThumb.png");
slider->setMaximumValue(10);
slider->setMinimumValue(5);
slider->setValue(7.5);
slider->setMaximumAllowedValue(9);
slider->setMinimumAllowedValue(6);
slider->setPosition(ccp(winSize.width/2,winSize.height/2));
addChild(slider);
slider->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::controlSlider),CCControlEventValueChanged);
return true;
}
void HelloWorld::controlSlider(CCObject* obj,CCControlEvent event)
{
CCControlSlider* sli = (CCControlSlider*)obj;
CCString* str = CCString::createWithFormat("%g",sli->getValue());
CCLabelTTF* ttf = (CCLabelTTF*)getChildByTag(5);
ttf->setString(str->getCString());
}setMaximumValue：设置滑动按钮滑动到最大位置时候的值。
setMinimumValue：设置滑动按钮滑动到最小位置时候的值。
setMaximumAllowedValue：设置滑动按钮在滑动范围内，允许滑动到的最大值。
setMinimumAllowedValue：设置滑动按钮在滑动范围内，允许滑动到的最小值。
setValue：设置滑动块的默认值。
addTargetWithActionForControlEvents：给滑动条（CCControlSlider）添加回调函数，其中CCControlEvent填写CCControlEventValueChanged。
第二种创建方式：通过精灵
CCSprite* bg = CCSprite::create("sliderTrack.png");
CCSprite* progress = CCSprite::create("sliderProgress.png");
CCSprite* thumb = CCSprite::create("sliderThumb.png");
CCControlSlider* slider = CCControlSlider::create(bg,progress,thumb);
slider->setMaximumValue(5);
slider->setMinimumValue(0);
slider->setPosition(ccp(winSize.width / 2,winSize.height / 2));
addChild(slider);
二、开关按钮（CCControlSwitch）
开关按钮，点一下按钮换一下位置，可以实现开关功能。
class CC_EX_DLL CCControlSwitch : public CCControl
{
public:
/** Creates a switch with a mask sprite,on/off sprites for on/off states and a thumb sprite. */
static CCControlSwitch* create(CCSprite *maskSprite,CCSprite * onSprite,CCSprite * offSprite,CCSprite * thumbSprite);
/** Creates a switch with a mask sprite,on/off sprites for on/off states,a thumb sprite and an on/off labels. */
static CCControlSwitch* create(CCSprite *maskSprite,CCSprite * thumbSprite,CCLabelTTF* onLabel,CCLabelTTF* offLabel);
}创建函数有两个，不过两个create前面部分参数相同。
CCSprite *maskSprite：掩底背景图片。
CCSprite * onSprite：按钮为开时图片。
CCSprite * offSprite：按钮为关时的图片。
CCSprite * thumbSprite：按钮图片。
CCLabelTTF* onLabel：按钮为开时显示的文字。
CCLabelTTF* offLabel：按钮为关是显示的文字。
实例：只能响应CCControlEventValueChanged
bool HelloWorld::init()
{
CCLayer::init();
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCSprite* mask = CCSprite::create("switch-mask.png");
CCSprite* on = CCSprite::create("switch-on.png");
CCSprite* off = CCSprite::create("switch-off.png");
CCSprite* thumb = CCSprite::create("switch-thumb.png");
CCLabelTTF* onLabel = CCLabelTTF::create("On","",20);
CCLabelTTF* offLabel = CCLabelTTF::create("Off",20);
CCControlSwitch* conSwitch = CCControlSwitch::create(mask,on,off,thumb,onLabel,offLabel);
conSwitch->setOn(false);
conSwitch->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::controlSwitch),CCControlEventValueChanged);
conSwitch->setPosition(ccp(winSize.width/2,winSize.height/2));
addChild(conSwitch);
return true;
}
void HelloWorld::controlSwitch(CCObject* obj,CCControlEvent event)
{
CCControlSwitch* sw = (CCControlSwitch*)obj;
if (sw->isOn())
{
CCLog("Click On");
}
else
{
CCLog("Click off");
}
}isOn：获取按钮当前为关还是开。
setOn：设置按钮为关还是开。默认按钮为开。
三、九妹图（CCScale9Sprite）
原理引用一下老师讲的：
CCScale9Sprite 对象，是一种CCSprite 对象的变形，它的用法和CCSprite类似，不同点是：CCScale9Sprite 对象有个特性就是缩放贴图时可以尽量不
失真。
CCScale9Sprite 的实现非常巧妙，是通过1 个CCSpriteBatchNode 和9 个CCSprite 来实现的，原理很简单，通过将原纹理资源切割成9 部分（PS : 这也是叫九宫图的原因）。
根据想要的尺寸，完成以下的三个步骤：
（1）保持4 个角部分不变形
（2）单向拉伸4 条边（即在4 个角两两之间的边，比如上边，只做横向拉伸）
（3）双向拉伸中间部分（即九宫图的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）CCSpriteBatchNode 的资源为整个的纹理，9 个CCSprite 对应于纹理的9个部分（根据纹理不同，9 部分所占比例会有所不同），根据想要的尺寸，将9 部分拼装在一起！
Cocos2d-x中CCScale9Sprite 部分代码如下：
class CC_EX_DLL CCScale9Sprite : public CCNodeRGBA
{
public:
static CCScale9Sprite* create(const char* file,CCRect rect,CCRect capInsets);
static CCScale9Sprite* create(const char* file,CCRect rect);
static CCScale9Sprite* create(CCRect capInsets,const char* file);
static CCScale9Sprite* create(const char* file);
static CCScale9Sprite* create();
static CCScale9Sprite* createWithSpriteFrame(CCSpriteFrame* spriteFrame,CCRect capInsets);
static CCScale9Sprite* createWithSpriteFrame(CCSpriteFrame* spriteFrame);
static CCScale9Sprite* createWithSpriteFrameName(const char*spriteFrameName,CCRect capInsets);
static CCScale9Sprite* createWithSpriteFrameName(const char*spriteFrameName);
}由上面代码可以看出创建CCScale9Sprite 有三种方法，第一种从图片直接创建，第二种是从精灵帧创建，第三种通过精灵帧的名字创建。
（一）直接从图片创建
static CCScale9Sprite* create(const char* file,const char* file); static CCScale9Sprite* create(const char* file);const char* file：图片文件名字。
CCRect capInsets：若未对CCScale9Sprite的capInsets进行设置，创建的九宫图的分区为九等分。capInsets则是设置了中间区域的大小，从而得到其他8块区域的大小。
实例：
bool HelloWorld::init()
{
CCLayer::init();
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCScale9Sprite* scal = CCScale9Sprite::create("scale9.png",CCRectMake(0,116,102),CCRectMake(20,20,56,20));
scal->setPreferredSize(CCSizeMake(100,100));
scal->setPosition(ccp(winSize.width/2,winSize.height/2));
addChild(scal);
return true;
}
（二）从精灵帧与精灵帧名创建
由函数create可以看出，其第一个参数需要相应的精灵帧或者精灵帧名字外，其余参数相同。
四、CCControlButton：重点在于此控件能响应多种CCControlEvent
创建的代码如下：
class CC_EX_DLL CCControlButton : public CCControl
{
public:
static CCControlButton* create(CCNode* label,CCScale9Sprite* backgroundSprite);
static CCControlButton* create(std::string title,const char * fontName,float fontSize);
static CCControlButton* create(CCScale9Sprite* sprite);
static CCControlButton* create();
}
实例：
bool HelloWorld::init()
{
CCLayer::init();
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCScale9Sprite* bgButton = CCScale9Sprite::create("button.png");
CCScale9Sprite* bgButtonLighted = CCScale9Sprite::create("button.png");
CCLabelTTF* text = CCLabelTTF::create("Touch Me",30);
CCControlButton *button = CCControlButton::create(text,bgButton);
button->setPosition(ccp(winSize.width/2,winSize.height/2));
button->setBackgroundSpriteForState(bgButtonLighted,CCControlStateHighlighted);
button->setTitleColorForState(ccRED,CCControlStateHighlighted);
button->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::controlButtonTouchDown),CCControlEventTouchDown);
button->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::controlButtonTouchDragInside),CCControlEventTouchDragInside);
addChild(button);
return true;
}
void HelloWorld::controlButtonTouchDown(CCObject* obj,CCControlEvent event)
{
CCLog("TouchDown");
}
void HelloWorld::controlButtonTouchDragInside(CCObject* obj,CCControlEvent event)
{
CCLog("DragInside");
}
CCControlEvent：
enum
{
CCControlEventTouchDown = 1 << 0,// A touch-down event in the control.
CCControlEventTouchDragInside = 1 << 1,// An event where a finger is dragged inside the bounds of the control.
CCControlEventTouchDragOutside = 1 << 2,// An event where a finger is dragged just outside the bounds of the control.
CCControlEventTouchDragEnter = 1 << 3,// An event where a finger is dragged into the bounds of the control.
CCControlEventTouchDragExit = 1 << 4,// An event where a finger is dragged from within a control to outside its bounds.
CCControlEventTouchUpInside = 1 << 5,// A touch-up event in the control where the finger is inside the bounds of the control.
CCControlEventTouchUpOutside = 1 << 6,// A touch-up event in the control where the finger is outside the bounds of the control.
CCControlEventTouchCancel = 1 << 7,// A system event canceling the current touches for the control.
CCControlEventValueChanged = 1 << 8 // A touch dragging or otherwise manipulating a control,causing it to emit a series of different values.
};
typedef unsigned int CCControlEvent;
CCControlState：
enum
{
CCControlStateNormal = 1 << 0,// The normal,or default state of a control—that is,enabled but neither selected nor highlighted.
CCControlStateHighlighted = 1 << 1,// Highlighted state of a control. A control enters this state when a touch down,drag inside or drag enter is performed. You can retrieve and set this value through the highlighted property.
CCControlStateDisabled = 1 << 2,// Disabled state of a control. This state indicates that the control is currently disabled. You can retrieve and set this value through the enabled property.
CCControlStateSelected = 1 << 3 // Selected state of a control. This state indicates that the control is currently selected. You can retrieve and set this value through the selected property.
};
typedef unsigned int CCControlState;