我的Cocos2d-x学习笔记（十五）CCControlSlider、CCControlSwitch、CCScale9Sprite、CCControlButton

学习几个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* progressFile, 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 * onSprite, CCSprite * offSprite, 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, 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);

const char* file：图片文件名字。

CCRect rect,：截取图片的大小，从左上到右下。

CCRect capInsets：若未对CCScale9Sprite的capInsets进行设置，创建的九宫图的分区为九等分。capInsets则是设置了中间区域的大小，从而得到其他8块区域的大小。

实例：

bool HelloWorld::init()
{
	CCLayer::init();
	CCSize winSize = CCDirector::sharedDirector()->getWinSize();
	CCScale9Sprite* scal = CCScale9Sprite::create("scale9.png", CCRectMake(0, 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;