Cocos2d-x学习笔记（七）-------->Button控件

Button控件

一、按钮控件的介绍及使用

Button控件：在引擎中实现按钮有多种可选方法，其主要区别在于可视效果的区别，你可以选择使用图片生成精灵作为按钮各个状态的显示效果，也可以使用各种字体生成Label控件，而Label控件实际上就是精灵的子类，它可以作为按钮各个状态的显示效果。

生成图片式按钮：

使用：在创建图片式按钮的过程中，首先要指定每个状态用到的图片，用这些图片生成精灵对象。

//创建三个图片精灵，分别用于按钮的正常状态、按下状态及无效状态
CCSprite* spriteNormal = CCSprite::create("menuitemsprite.png", CCRectMake(0, 23*2, 115, 23));
CCSprite* spriteSelected = CCSprite::create("menuitemsprite.png", CCRectMake(0, 23*1, 115, 23));
CCSprite* spriteDisabled= CCSprite::create("menuitemsprite.png", CCRectMake(0, 23*0, 115, 23));

然后使用刚刚生成的精灵对象生成图片式按钮，其类型是 CCMenuItemSprite。在生成函数中还指定了按钮按下时的回调函数MenuLayerMainMenu::menuCallback。x引擎使用 menu_selector()这样的宏定义来指定按钮按下时将要执行的回调函数。回调函数中，是按钮按下之后的代码内容，例如场景跳转等操作可以放在这里执行。

//生成使用精灵图片的按钮
CCMenuItemSprite* item1 = CCMenuItemSprite::create(
spriteNormal, spriteSelected, spriteDisabled, this, 
menu_selector(MenuLayerMainMenu::menuCallback));

生成标签式按钮：

使用：以 BitmapFont字体的标签为例，首先生成一个 CCLabelBMFont类型的标签控件，然后使用此标签显示按钮的状态，同时在生成按钮时指定按钮的响应函数为MenuLayerMainMenu::menuCallbackConfig函数。

CCLabelBMFont* label = CCLabelBMFont::create("configuration", "fonts/bitmapFontTest3.fnt");
CCMenuItemLabel* item5 = CCMenuItemLabel::create(label, this, menu_selector(MenuLayoutMainMenu::menuCallbackConfig));

最后两种方式生成的按钮控件都需要添加到一个 CCMenu类型的层节点上， CCMenu类型的层与普通的层节点不同，它是专门捕捉并处理用户输入操作的，所有与用户输入有关的 UI控件，都需要添加到这个类型的层节点上，用户对控件的操作才能被x引擎捕捉到，所以在按钮定义完成之后，我们需要在场景中定义并添加一个 CCMenu类型的层节点，并将按钮都添加到此层节点中。

CCMenu* menu = CCMenu::create(item1,item2,item3,item4,item5,item6,item7,item8,NULL);
menu->alignItemsVertically();

注：最后一定要再添加一个NULL，这样CCMenu对象就知道已经添加到尾部了，最后使用CCMenu对象的alignItemsVertically函数将控件进行了垂直方向的对齐操作，这样全部按钮就在垂直方向居中对齐了。

效果：

二、悬挂按钮控件的介绍及使用

ToggleButton控件：悬挂按钮，在x引擎中对应的名称 CCMenuItemToggle。它与普通按钮的区别在于其作用是用于标记状态的，同时他也可以处理按钮被按下时的事件。 ToggleButton的底层实现，实际上是使用了两个普通按钮控件，一个按钮用于显示其On状态，另一个用于显示其Off状态，同时这些按钮都可以响应同一个点击事件。

使用：

CCMenuItemFont::setFontName("Marker Felt");
CCMenuItemFont::setFontSize(34);
CCMenuItemToggle* item = CCMenuItemToggle::createWithTarget(this,
menu_selector(MenuLayer4::menuCallback),
CCMenuItemFont::create("On"),
CCMenuItemFont::create("Off"),
NULL);

效果：

在使用 CCMenuItemFont生成标签式按钮之前，指定标签上显示的系统字体以及字体大小。然后用 CCMenuItemFont::create("On")和 CCMenuItemFont::create("Off")生成两个标签式按钮，分别会显示字符串“On”和“Off”代表开启和关闭状态，在使用 CCMenuItemToggle生成悬挂式按钮时也是使用 menu_selector宏来指定悬挂按钮点击后的回调函数，然后将生成的标签式按钮作为参数传入，最后传入的参数也是 NULL，代表到了参数末尾。

注：如果一个悬挂式按钮只有两种状态，添加两个状态按钮就可以了；如果悬挂按钮需要表现多个状态，比如在游戏中一个悬挂按钮要为用户提供“简单”，“普通”，“困难”三个难度之间的切换，这时就需要生成并传入三个普通按钮来表示这三个状态。

CCMenuItemToggle* item = CCMenuItemToggle::createWithTarget(this,
menu_selector(MenuLayer4::menuCallback),
CCMenuItemFont::create("Easy"),
CCMenuItemFont::create("Normal"),
CCMenuItemFont::create("Hard"),
NULL);

效果：

这个悬挂按钮生成并添加到场景中之后，会默认显示它的第一个状态按钮“Easy”，单击一次之后会切换到下一个状态按钮“Nomal”，再单击一次会切换到"Hard"状态按钮，再点击就会循环显示“Easy”状态按钮，以此类推。在单击时的回调函数中，我们需要知道点击后当前处于的状态，在回调函数中可以这样做来获得当前的状态信息：

void MenuLayer4::menuCloseCallback(CCObject* pSender){
	CCMenuItemToggle* btn = (CCMenuItemToggle*)pSender;
	switch (btn->getSelectedIndex())
	{
	case 0:
		...
		break;
	case 1:
		...
		break;
	case 2:
		...
		break;
	default:
		break;
	}
}

效果：

我们在回调函数中可以知道当前发生的单击事件的对象，也就是回调函数的参数 CCObject* pSender，因为我们知道发生回调函数的控件是 CCMenuItemToggle类型的，所以将参数强制转换为这个类型的对象，接下来我们就可以使用 CCMenuItemToggle类提供的 getSelectedIndex()函数取得当前的状态 ID，0表示当前为“Easy”状态，按照顺序1表示“Nomal”状态，2表示"Hard"状态。这样，我们就可以通过当前的状态 ID，做出相应的处理。