Button控件
一、按钮控件的介绍及使用
Button控件:在引擎中实现按钮有多种可选方法,其主要区别在于可视效果的区别,你可以选择使用图片生成精灵作为按钮各个状态的显示效果,也可以使用各种字体生成Label控件,而Label控件实际上就是精灵的子类,它可以作为按钮各个状态的显示效果。
//创建三个图片精灵,分别用于按钮的正常状态、按下状态及无效状态 CCSprite* spriteNormal = CCSprite::create("menuitemsprite.png",CCRectMake(0,23*2,115,23)); CCSprite* spriteSelected = CCSprite::create("menuitemsprite.png",23*1,23)); CCSprite* spriteDisabled= CCSprite::create("menuitemsprite.png",23*0,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,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);
效果:
注:如果一个悬挂式按钮只有两种状态,添加两个状态按钮就可以了;如果悬挂按钮需要表现多个状态,比如在游戏中一个悬挂按钮要为用户提供“简单”,“普通”,“困难”三个难度之间的切换,这时就需要生成并传入三个普通按钮来表示这三个状态。
CCMenuItemToggle* item = CCMenuItemToggle::createWithTarget(this,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; } }
效果: