这篇记录了两个控件的使用流程:Button 和 CheckBox。

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

Button

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

昨天好不easy让cocostudio排好的图片资源在cocos2dxproject中跑起来了。事实上也就是一个button。
说到button,那我这次就要让button点击后实现相应的功能,如按下去后会发生什么什么。
这个有以下几个步骤:
1、从cocostudio生成的.json文件里提取资源;
2、在提取出来的资源包里找到我们要用的buttonbutton。
3、加入button相应的回调函数

以下就说下怎样实现吧:(友情提示:请完整看完整篇博文在写程序)
1、用这段代码提取资源,这个前面已经有说过了

  1. auto UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.Json");
  2. this->addChild(UI);

这里有点要补充的,尽管说C++11后用auto就能够自己主动将UI转成相应的类型。可是我们毕竟都还是菜鸟。能不取巧就不取巧,这里的UI究竟是个什么类型的变量呢?点进去看后才发现是:cocos2d::ui::Widget* 类型的。所以实际上我们的操作应该是:

  1. cocos2d::ui::Widget UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.json");

只是我发现用cocos2d::ui这样写好长好麻烦啊有木有,于是就在文件上声明了作用域:

  1. using namespace cocos2d::ui;

恩,这样就方便多了

2、接下来是找到资源中的button。我在cocostudio中将button命名为“Button_1”,所以我就通过这个名字找到该button。

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

看完这行代码我感觉又有一些东西要解释了:
首先这里用到的类名是Button,而不是我们在cocos2dx中经常使用的Menu;其次是Helper这货又是什么碗糕?点进源代码看下(事实上看上面代码也就知道了)。它就是用来寻找资源里相应的控件,它的寻找方式有三种,例如以下:

  1. static Widget* seekWidgetByTag(Widget* root, int tag);//通过tag找到该控件
  2. static Widget* seekWidgetByName(Widget* root, const char* name);//通过名称找到该控件
  3. static Widget* seekActionWidgetByActionTag(Widget* root, int tag);//通过tag找到该动作

上面三行代码的凝视还算清楚,我就不多说了,最后一个是通过tag找到动作,事实上我没怎么理解,等以后试过了再说吧。

3、既然是button,那么肯定会有回调函数,仅仅是Button相应的回调函数可与Menu的不一样咯。


我们都知道Menu相应的会调函数格式是这种:

  1. void menuCallback(Ref* sender);

而Button相应的回调函数格式是这种:

  1. void menuCallback(Ref* sender,TouchEventType type);

也就是多了个TouchEventType这个类型的參数嘛,那么,TouchEventType这货是什么玩意呢?到UIWidget.h源文件里看看:

  1. typedef enum
  2. {
  3. TOUCH_EVENT_BEGAN,
  4. TOUCH_EVENT_MOVED,
  5. TOUCH_EVENT_ENDED,
  6. TOUCH_EVENT_CANCELED
  7. }TouchEventType;

从枚举能够看出TouchEventType有四种类型。和cocos2dx触摸回调相应的onTouchBegan等非常像啊有木有。
我们临时别管这个TouchEventType。先定义下这个回调函数,例如以下:

  1. void HelloWorld::m_callback(Ref* sender,TouchEventType type)
  2. {
  3. CCLOG("haah");
  4. }

执行程序。点击button后发现"haah"会跳出两次,多点了几次发现了规律。原来是你刚点下去的那一刻会弹出一条"haah",当你点击结束离开Button也会弹出一条"haah"。这种效果现任不是我们想要的,毕竟一夫一妻制是法定的。因此,TouchEventType最终派上用场。从上面我们已经知道TouchEventType有四种类型。以下我们就用switch case推断它相应的是哪种类型。然后做相应的操作。

  1. void HelloWorld::m_callback(Ref* sender,TouchEventType type)
  2. {
  3. switch(type)
  4. {
  5. case TOUCH_EVENT_BEGAN:
  6. CCLOG("touch began");
  7. break;
  8. case TOUCH_EVENT_ENDED:
  9. CCLOG("touch ended");
  10. break;
  11. }
  12. }

执行看下效果:点击button,然后再放开。分别输出以下两局:
touch began
touch ended

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

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

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

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

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

CheckBox

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

接下来看看CheckBox这个控件。

之前在cocos2dx上也有实现过于checkBox相似的功能,只是那是用一个Menu与两张图片来实现的。由此可见我是多么的单纯。

1、创建一个新的cocostudioproject。拉一个CheckBox控件到场景中。改动name 为“CheckBox",最后导出project到cocos2dx项目Resources文件夹下。

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

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

执行,没有问题。

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

  1. CheckBox* checkBox = static_cast<CheckBox*>(Helper::seekWidgetByName(checkLayout,"CheckBox"));
  2. checkBox->setPosition(Point(400,300));
  3. 4、以下进入UICheckBox.h中看下checkBox的源代码。有以下这些API
  4. //创建一个checkBox
  5. static CheckBox* create();
  6. static CheckBox* create(const std::string& backGround,
  7. 						const std::string& backGroundSeleted,
  8. 						const std::string& cross,
  9. 						const std::string& backGroundDisabled,
  10. 						const std::string& frontCrossDisabled,
  11. 						TextureResType texType = UI_TEX_TYPE_LOCAL);
  12. void setSelectedState(bool selected);	//设置checkBox的状态,true为选中打钩状态,false为未选中状态
  13. bool getSelectedState();				//获取checkBox的状态
  14. virtual std::string getDescription() const override;//获取widget(CheckBox)在.json中的 name,比如上面的”CheckBox“
  15. //add a call back function would called when checkbox is selected or unselected.
  16. void addEventListenerCheckBox(Ref* target,SEL_SelectedStateEvent selector);//加入回调函数

5、以下自己创建一个checkBox。代码例如以下:

  1. CheckBox* checkBox2 = CheckBox::create("check_box_normal.png",//未选中时的显示图片
  2. "check_box_normal_press.png",//点击checkBox后触摸没有松开时的图片
  3. "check_box_active.png",//选中时的显示图片
  4. "check_box_normal_disable.png",//从选中到未选中切换过程中,触摸没有松开时的显示图片
  5. "check_box_active_disable.png");
  6. checkBox2->setPosition(Point(200,200));
  7. this->addChild(checkBox2,2);
  8. //加入回调函数
  9. checkBox2->addEventListenerCheckBox(this,checkboxselectedeventselector(HelloWorld::checkBoxCallback));

以下看下回调函数:

  1. void HelloWorld::checkBoxCallback(Ref* sender,CheckBoxEventType type)
  2. {
  3. CCLOG("haha");
  4. }

执行程序后发现,点击checkBox,checkBox从未选中到选中状态时。输入一个"haha",再点击。checkBox从选中到未选中时又输出一次"haha".
上面属于最普通的測试,以下尝试点高端东西,看看回调函数的第二个參数:CheckBoxEventType type

先看CheckBoxEventType 都有哪些类型:

  1. typedef enum
  2. {
  3. CHECKBOX_STATE_EVENT_SELECTED,
  4. CHECKBOX_STATE_EVENT_UNSELECTED
  5. }CheckBoxEventType;

还好仅仅有两种状态,我深深的松了口气(要不然checkBox还能有几种状态?!

)。

以下用switch case推断当下属于哪种状态,然后做相应的处理:

  1. void HelloWorld::checkBoxCallback(Ref* sender,CheckBoxEventType type)
  2. {
  3. // CCLOG("haha");
  4. switch (type)
  5. {
  6. case CHECKBOX_STATE_EVENT_SELECTED:
  7. CCLOG("selected");//选中时响应
  8. break;
  9. case CHECKBOX_STATE_EVENT_UNSELECTED:
  10. CCLOG("unselected");//未选中时响应
  11. break;
  12. default:
  13. break;
  14. }
  15. }

恩,就是这样子啦。非常easy的说。

睡觉去了。我果然不适合熬夜!

尊重原创。转载请注明来源:http://blog.csdn.net/star530/article/details/37362781

Cocostudio学习笔记(2) Button + CheckBox的更多相关文章

  1. Cocostudio学习笔记(1) 扯扯蛋 + 环境搭建

    转眼七月份就到了,2014已经过了一半,而我也最终算是有"一年工作经验"了,开心ing. 回想这一年Cocos2dx的游戏开发经历,去年下半年重心主要在游戏的逻辑上,而今年上半年重 ...

  2. Cocostudio学习笔记(3) ImageView + Slider

    此记录使用两个控制流:ImageView 和 Slide. ---------------------------------------------------------------------- ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

    Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox ...

  4. Cocostudio学习笔记(5) Text + TextAtlas + TextBMFont

    下午一群大学生到我们公司參观学习,搞得我好紧张.于是滔滔不绝的给他们介绍了怎样开发一款游戏... 今晚研究的控件就是三个label:Text,TextAtlas,TextBMFont 我先在cocos ...

  5. ExtJs学习笔记之Button组件

    按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...

  6. Cocostudio学习笔记(4) LoadingBar+ TextField

    这同时录制两个控件的使用方法:LoadingBar和 TextField. -------------------------------------------------------------- ...

  7. android学习笔记(3)Button控件的学习

    一,增加一个button并用外部类绑定事件 //XML文件: <Button android:id="@+id/button1" android:layout_width=& ...

  8. WPF学习笔记——为BUTTON添加背景图片

    首先要肯定,代码: <Style x:Key="UserItemButton" TargetType="Button"> <Setter Pr ...

  9. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. 带包的java类在cmd环境下的执行办法

    带包的java类在cmd环境下的执行办法:工程目录为D:\Program Files\eclipse\workspace\ReadFileByLinesUniq上面目录下有两个文件夹bin和src源文 ...

  2. redis 安装 检测是否安装命令

    0: 安装redis服务: # wget http://download.redis.io/releases/redis-3.2.6.tar.gz# tar xzf redis-3.2.6.tar.g ...

  3. 抽取、转换和装载介绍(三)ETL系统的34个子系统

    这部分对ETL系统的架构中34个关键子系统进行分类.ETL其实可以分为下面四个步骤: 抽取.在ETL环境中从源系统收集原始数据并且在对任何对数据的重要重构发生之前都将数据写入磁盘.子系统1到子系统3都 ...

  4. [uart]理解线路规程的作用

    转自:http://biancheng.dnbcw.info/linux/336240.html Linux OS的设备驱动有相当经典的抽象思想以及分层思想.与通信世界里面的思想相一致. 一.在Lin ...

  5. sendmsg/recvmsg和struct msghdr

    函数原型 #include <sys/types.h> #include <sys/socket.h> ssize_t sendmsg(int sockfd, const st ...

  6. 訪问站点时仅仅是显示主页(index.jsp),没有请求连接数据库读取数据。

    两部曲: 1:在你的web.xml中的Struts2的核心过滤器的映射中添加 <filter-mapping>     <dispatcher>REQUEST</disp ...

  7. PHP变量解析顺序variables_order

    转载自:http://blog.csdn.net/knight0450/article/details/4291556 故事从一个有点诡异的BUG开始,后台一个使用频率不是很高的广告提交功能有时候会莫 ...

  8. js学习笔记15----子节点和兄弟节点的操作

    1.元素.firstChild : 只读属性,第一个子节点 标准下:会包含文本类型的子节点. 非标准下:只包含元素类型子节点. 元素.firstElementChild : 只读属性,第一个元素子节点 ...

  9. Qt 自定义事件的实现

    初学Qt,用了Qt自带的事件,然后想怎么才能定义自己的事件呢?又如何使用自定义事件呢?看了篇文章,说先要子类化QEvent,然后定义自己的QEvent::Type,然后重写QWidget::event ...

  10. sh脚本循环

    sh for循环 for File in 1 2 3 4 5 do echo $File done sh for多重循环 for image_size_input in 160 140 120 100 ...