标签:des style blog http color 使用
这篇记录了两个控件的使用流程:Button 和 CheckBox。
----------------------------------------------------------------------------------------------------------------------------
Button
---------------------------------------------------------------------------------------------------------------------------
昨天好不容易让cocostudio排好的图片资源在cocos2dx工程中跑起来了,其实也就是一个按钮。
说到按钮,那我这次就要让按钮点击后实现对应的功能,如按下去后会发生什么什么。
这个有以下几个步骤:
1、从cocostudio生成的.json文件中提取资源;
2、在提取出来的资源包里找到我们要用的按钮button;
3、添加按钮对应的回调函数
下面就说下如何实现吧:(友情提示:请完整看完整篇博文在敲代码)
1、用这段代码提取资源,这个前面已经有说过了
auto UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.Json"); this->addChild(UI);这里有点要补充的,虽然说C++11后用auto就可以自动将UI转成对应的类型,但是我们毕竟都还是菜鸟,能不取巧就不取巧,这里的UI到底是个什么类型的变量呢?点进去看后才发现是:cocos2d::ui::Widget* 类型的。所以实际上我们的操作应该是:
cocos2d::ui::Widget UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.json");不过我发现用cocos2d::ui这样写好长好麻烦啊有木有,于是就在文件上声明了作用域:
using namespace cocos2d::ui;恩,这样就方便多了
Button* closeBt = static_cast<Button*>(Helper::seekWidgetByName(UI,"Button_1"));看完这行代码我感觉又有一些东西要解释了:
static Widget* seekWidgetByTag(Widget* root, int tag);//通过tag找到该控件 static Widget* seekWidgetByName(Widget* root, const char* name);//通过名称找到该控件 static Widget* seekActionWidgetByActionTag(Widget* root, int tag);//通过tag找到该动作上面三行代码的注释还算清楚,我就不多说了,最后一个是通过tag找到动作,其实我没怎么理解,等以后试过了再说吧。
void menuCallback(Ref* sender);而Button对应的回调函数格式是这样的:
void menuCallback(Ref* sender,TouchEventType type);也就是多了个TouchEventType这个类型的参数嘛,那么,TouchEventType这货是什么玩意呢?到UIWidget.h源文件中看看:
typedef enum { TOUCH_EVENT_BEGAN, TOUCH_EVENT_MOVED, TOUCH_EVENT_ENDED, TOUCH_EVENT_CANCELED }TouchEventType;从枚举可以看出TouchEventType有四种类型,和cocos2dx触摸回调对应的onTouchBegan等很像啊有木有。
void HelloWorld::m_callback(Ref* sender,TouchEventType type) { CCLOG("haah"); }运行程序,点击按钮后发现"haah"会跳出两次,多点了几次发现了规律,原来是你刚点下去的那一刻会弹出一条"haah",当你点击结束离开Button也会弹出一条"haah"。这种效果现任不是我们想要的,毕竟一夫一妻制是法定的。因此,TouchEventType终于派上用场。从上面我们已经知道TouchEventType有四种类型,下面我们就用switch case判断它对应的是哪种类型,然后做相应的操作。
void HelloWorld::m_callback(Ref* sender,TouchEventType type) { switch(type) { case TOUCH_EVENT_BEGAN: CCLOG("touch began"); break; case TOUCH_EVENT_ENDED: CCLOG("touch ended"); break; } }运行看下效果:点击按钮,然后再放开,分别输出下面两局:
#include "editor-support/cocostudio/CCSGUIReader.h" #include "cocostudio/CocoStudio.h" #include "ui/CocosGUI.h"
----------------------------------------------------------------------------------------------------------------------------
CheckBox
---------------------------------------------------------------------------------------------------------------------------
接下来看看CheckBox这个控件。之前在cocos2dx上也有实现过于checkBox类似的功能,不过那是用一个Menu与两张图片来实现的。由此可见我是多么的单纯。cocos2d::ui::Widget* checkLayout = GUIReader::getInstance()->widgetFromJsonFile("CheckBoxUi_1.json"); this->addChild(checkLayout,2);运行,没有问题。
5、下面自己创建一个checkBox。代码如下:CheckBox* checkBox = static_cast<CheckBox*>(Helper::seekWidgetByName(checkLayout,"CheckBox")); checkBox->setPosition(Point(400,300)); 4、下面进入UICheckBox.h中看下checkBox的源码。有下面这些API //创建一个checkBox static CheckBox* create(); static CheckBox* create(const std::string& backGround, const std::string& backGroundSeleted, const std::string& cross, const std::string& backGroundDisabled, const std::string& frontCrossDisabled, TextureResType texType = UI_TEX_TYPE_LOCAL); void setSelectedState(bool selected); //设置checkBox的状态,true为选中打钩状态,false为未选中状态 bool getSelectedState(); //获取checkBox的状态 virtual std::string getDescription() const override;//获取widget(CheckBox)在.json中的 name,例如上面的”CheckBox“ //add a call back function would called when checkbox is selected or unselected. void addEventListenerCheckBox(Ref* target,SEL_SelectedStateEvent selector);//添加回调函数
CheckBox* checkBox2 = CheckBox::create("check_box_normal.png",//未选中时的显示图片 "check_box_normal_press.png",//点击checkBox后触摸没有松开时的图片 "check_box_active.png",//选中时的显示图片 "check_box_normal_disable.png",//从选中到未选中切换过程中,触摸没有松开时的显示图片 "check_box_active_disable.png"); checkBox2->setPosition(Point(200,200)); this->addChild(checkBox2,2); //添加回调函数 checkBox2->addEventListenerCheckBox(this,checkboxselectedeventselector(HelloWorld::checkBoxCallback));
void HelloWorld::checkBoxCallback(Ref* sender,CheckBoxEventType type) { CCLOG("haha"); }运行程序后发现,点击checkBox,checkBox从未选中到选中状态时,输入一个"haha",再点击,checkBox从选中到未选中时又输出一次"haha".
typedef enum { CHECKBOX_STATE_EVENT_SELECTED, CHECKBOX_STATE_EVENT_UNSELECTED }CheckBoxEventType;还好只有两种状态,我深深的松了口气(要不然checkBox还能有几种状态?!)。下面用switch case判断当下属于哪种状态,然后做相应的处理:
void HelloWorld::checkBoxCallback(Ref* sender,CheckBoxEventType type) { // CCLOG("haha"); switch (type) { case CHECKBOX_STATE_EVENT_SELECTED: CCLOG("selected");//选中时响应 break; case CHECKBOX_STATE_EVENT_UNSELECTED: CCLOG("unselected");//未选中时响应 break; default: break; } }恩,就是这样子啦,很容易的说。
睡觉去了,我果然不适合熬夜!
尊重原创,转载请注明来源:http://blog.csdn.net/star530/article/details/37362781
Cocostudio学习笔记(2) Button + CheckBox,布布扣,bubuko.com
Cocostudio学习笔记(2) Button + CheckBox
标签:des style blog http color 使用
原文地址:http://blog.csdn.net/star530/article/details/37362781