Cocostudio 笔记（2）Button+CheckBox

最新推荐文章于 2020-06-11 09:52:28 发布

yan183yan

最新推荐文章于 2020-06-11 09:52:28 发布

阅读量311

点赞数

Button和CheckBox使用流程：

（1）Button

1、从cocostudio生成的.json文件中提取资源；

2、在提取出来的资源包里找到我们要用的按钮button；

下面就说下如何实现吧：

（友情提示：请完整看完整篇博文在敲代码）

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;

恩，这样就方便多了

2、接下来是找到资源中的按钮。 我在cocostudio中将按钮命名为“

Button_1

”，所以我就通过这个名字找到该按钮。

Button* closeBt = static_cast<Button*>(Helper::seekWidgetByName(UI,"Button_1"));

看完这行代码我感觉又有一些东西要解释了：

首先这里用到的类名是Button,而不是我们在cocos2dx中常用的Menu ；其次是Helper这货又是什么碗糕？点进源码看下（其实看上面代码也就知道了），它就是用来寻找资源里对应的控件，它的寻找方式有三种，如下：

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找到动作，其实我没怎么理解，等以后试过了再说吧。

3、既然是按钮，那么肯定会有回调函数，只是Button对应的回调函数可与Menu的不一样咯。

我们都知道Menu对应的会调函数格式是这样的：

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等很像啊有木有。

我们暂时别管这个TouchEventType，先定义下这个回调函数,如下：

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;
  }
}

运行看下效果：点击按钮，然后再放开，分别输出下面两局：

touch began

touch ended

4、最后再提示下，也是最重要的提示，那就是头文件千万别忘了加了。

我也不再多说要加啥头文件，总之将下面这堆东西放进去就对了：

#include "editor-support/cocostudio/CCSGUIReader.h"
#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h"

奇怪，我这里只是在做笔记，怎么写得风格就跟在写博客似的...

----------------------------------------------------------------------------------------------------------------------------

CheckBox

---------------------------------------------------------------------------------------------------------------------------

接下来看看CheckBox这个控件。之前在cocos2dx上也有实现过于checkBox类似的功能，不过那是用一个Menu与两张图片来实现的。由此可见我是多么的单纯。

1 、创建一个新的cocostudio工程。 拉一个CheckBox控件到场景中，修改name 为“CheckBox",最后导出工程到cocos2dx项目Resources目录下。

2、在cocos2dx中加载cocostudio的.json文件

cocos2d::ui::Widget* checkLayout = GUIReader::getInstance()->widgetFromJsonFile("CheckBoxUi_1.json");
this->addChild(checkLayout,2);

运行，没有问题。

3、提取layout中的checkBox控件，挪动它的位置（这次我学到经验了。 直接到test中看checkBox的API接口）

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);//添加回调函数

5、下面自己创建一个checkBox 。代码如下：

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".

上面属于最普通的测试，下面尝试点高端东西 ，看看回调函数的第二个参数： CheckBoxEventType type 。先看CheckBoxEventType 都有哪些类型：

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;
  }
}