cocos2dx2.2.2弹出框的实现

在上一篇文章中，我们利用CCEditBox实现了输入框功能，使我们在注册时可以输入用户名和密码。但是当用户名和密码的输入不符合规范时，我们应该怎样给与用户提示呢？下面我们就来介绍弹出框的实现方式。

我们的思路就是，创建一个模态层，将当前场景的内容盖住，然后在弹出层上给与用户相应的提示并提供一个关闭弹出层的按钮。首先，我们先来看一下效果。

这里的标题和具体提示信息需要是自定义的，才能满足不同场景的需要，而确定按钮只是用来关闭弹出层的，所以这个弹出框的主要元素并不多，实现起来也比较简单。

另外，还有一种弹出框，是用来确认是否执行某种操作的，效果如下：

这种弹出框需要两个按钮，取消按钮是终止操作，和前一个弹出框的确定按钮效果相同，都是直接关闭弹出层即可。而这里的确定按钮，是确定要执行操作，点击后，需要执行确认的操作，及执行调用弹出层的节点中的某个方法。这里的实现就比前一种弹出框复杂一些，需要有调用弹出层的对象和需要执行的函数。下面我们就来看一下具体的实现。

PopLayer.h文件

 1 #ifndef __MyGame__PopLayer__
 2 #define __MyGame__PopLayer__
 3
 4 #include <iostream>
 5 #include "cocos2d.h"
 6 #include "cocos-ext.h"
 7 USING_NS_CC;
 8 USING_NS_CC_EXT;
 9
10 class PopLayer:public CCLayer{
11 public:
12     //初始化
13     virtual bool init();
14
15     //创建
16     CREATE_FUNC(PopLayer);
17
18     //创建确定弹出框
19     static PopLayer * create(const char * title,const char * content);
20
21     //创建确定取消弹出框
22     static PopLayer * create(const char * title,const char * content,CCObject * callbackListener,SEL_CallFuncN callfun);
23
24     //设置弹出框的title
25     void setTitle(const char * title);
26
27     //设置弹出框的文本内容
28     void setContent(const char * content);
29
30     //设置确定按钮
31     void setConfirmButton();
32
33     //设置确定取消按钮,参数：调用层对象，调用层回调函数
34     void setConfirmCancelButton(CCObject * callbackListener,SEL_CallFuncN callfun);
35
36 private:
37     //重写触摸注册函数，重新给定触摸级别
38     void registerWithTouchDispatcher();
39
40     //触摸函数ccTouchBegan，返回true
41     bool ccTouchBegan(CCTouch * touch,CCEvent * pevent);
42
43     //关闭弹出框
44     void closePopLayer(CCObject * pSender);
45
46     //执行上层对象的回调函数，关闭弹出框
47     void buttonCallBackFunc(CCObject * pSender);
48
49     //上层对象
50     CCObject * m_callbackListener;
51
52     //回调函数
53     SEL_CallFuncN m_callfun;
54
55     //对话框背景大小
56     CCSize m_size;
57
58     //对话框背景精灵
59     CCSprite * m_bgSprite;
60 };
61
62 #endif /* defined(__MyGame__PopLayer__) */

PopLayer.cpp文件

  1 #include "PopLayer.h"
  2 USING_NS_CC;
  3
  4 //创建确定弹出框
  5 PopLayer * PopLayer::create(const char * title,const char * content)
  6 {
  7     PopLayer * popLayer = PopLayer::create();
  8
  9     //设置题目和文本内容
 10     popLayer->setTitle(title);
 11     popLayer->setContent(content);
 12
 13     //设置按钮
 14     popLayer->setConfirmButton();
 15
 16     return popLayer;
 17 }
 18
 19 //创建确定取消弹出框
 20 PopLayer * PopLayer::create(const char * title,const char * content,CCObject * callbackListener,SEL_CallFuncN callfun)
 21 {
 22     PopLayer * popLayer = PopLayer::create();
 23
 24     //设置题目和文本内容
 25     popLayer->setTitle(title);
 26     popLayer->setContent(content);
 27
 28     //设置按钮
 29     popLayer->setConfirmCancelButton(callbackListener,callfun);
 30
 31     return popLayer;
 32 }
 33
 34
 35 //初始化
 36 bool PopLayer::init()
 37 {
 38     if ( !CCLayer::init() ){
 39         return false;
 40     }
 41
 42     //精灵帧缓存
 43     CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();
 44     sfCache->addSpriteFramesWithFile("p_tips.plist");
 45
 46     //添加模态背景
 47     ccColor4B color = ccc4(112, 128, 144, 150);
 48     CCLayerColor * colorLayer = CCLayerColor::create(color);
 49     CCSize winSize = CCDirector::sharedDirector()->getWinSize();
 50     colorLayer->setPosition(CCPointZero);
 51     colorLayer->setContentSize(winSize);
 52     this->addChild(colorLayer);
 53
 54     //设置这个层的背景图片，并且设置其位置为屏幕中点
 55     CCSpriteFrame * f_tips_box = sfCache->spriteFrameByName("tips_box.png");
 56     CCSprite * spriteBox = CCSprite::createWithSpriteFrame(f_tips_box);
 57     m_bgSprite = spriteBox;
 58     spriteBox->setPosition(ccp(winSize.width/2,winSize.height/2));
 59     this->addChild(spriteBox);
 60
 61     //获得背景图片的大小
 62     CCSize contentSize = spriteBox->getContentSize();
 63     m_size = contentSize;
 64
 65     //开启触摸响应
 66     this->setTouchEnabled(true);
 67
 68     return true;
 69 }
 70
 71
 72 //设置弹出框的title，1/4高度
 73 void PopLayer::setTitle(const char * title)
 74 {
 75     CCLabelTTF * titleStr = CCLabelTTF::create(title,"Arial",24);
 76     titleStr->setColor(ccBLACK);
 77     titleStr->setPosition(ccp(m_size.width/2, m_size.height*(1.0-(1.0/4)/2)));
 78     m_bgSprite->addChild(titleStr);
 79 }
 80
 81 //设置弹出框的文本内容，1/2高度
 82 void PopLayer::setContent(const char * content)
 83 {
 84     CCLabelTTF * contentStr = CCLabelTTF::create(content,"Arial",22);
 85     contentStr->setColor(ccBLACK);
 86     contentStr->setPosition(ccp(m_size.width/2,m_size.height*(1.0-(1.0/4)-(1.0/2)/2)));
 87     //设置文本域
 88     contentStr->setDimensions(CCSize(this->m_size.width-60,this->m_size.height-100));
 89     //设置水平对齐方式
 90     contentStr->setHorizontalAlignment(kCCTextAlignmentLeft);
 91
 92     m_bgSprite->addChild(contentStr);
 93 }
 94
 95
 96 //设置确定按钮
 97 void PopLayer::setConfirmButton()
 98 {
 99     CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();
100
101     CCSpriteFrame * f_tips_btn_confirm_normal = sfCache->spriteFrameByName("btn_confirm_normal.png");
102     CCSprite * sprite_tips_btn_confirm_normal = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_normal);
103
104     CCSpriteFrame * f_tips_btn_confirm_select = sfCache->spriteFrameByName("btn_confirm_select.png");
105     CCSprite * sprite_tips_btn_confirm_select = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_select);
106
107     CCMenuItemSprite * itemConfirm = CCMenuItemSprite::create(sprite_tips_btn_confirm_normal, sprite_tips_btn_confirm_select, this, menu_selector(PopLayer::closePopLayer));
108
109     itemConfirm->setPosition(ccp(m_size.width/2,m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));
110
111     CCPoint bgSpritePoint = m_bgSprite->getPosition();
112     CCMenu * menu = CCMenu::create(itemConfirm,NULL);
113     menu->setPosition(ccp(bgSpritePoint.x-m_size.width/2,bgSpritePoint.y-m_size.height/2));//菜单位置设置为弹出框左下
114     this->addChild(menu);
115 }
116
117 //设置确定取消按钮,参数：调用层对象，调用层回调函数
118 void PopLayer::setConfirmCancelButton(CCObject * callbackListener,SEL_CallFuncN callfun)
119 {
120     m_callbackListener = callbackListener;
121     m_callfun = callfun;
122
123     CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();
124
125     //确定
126     CCSpriteFrame * f_tips_btn_confirm_normal = sfCache->spriteFrameByName("btn_confirm_normal.png");
127     CCSprite * sprite_tips_btn_confirm_normal = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_normal);
128
129     CCSpriteFrame * f_tips_btn_confirm_select = sfCache->spriteFrameByName("btn_confirm_select.png");
130     CCSprite * sprite_tips_btn_confirm_select = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_select);
131
132     CCMenuItemSprite * itemConfirm = CCMenuItemSprite::create(sprite_tips_btn_confirm_normal, sprite_tips_btn_confirm_select, this, menu_selector(PopLayer::buttonCallBackFunc));
133
134     itemConfirm->setPosition(ccp(m_size.width*(1.0/3),m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));
135
136     //取消
137     CCSpriteFrame * f_tips_btn_cancel_normal = sfCache->spriteFrameByName("btn_cancel_normal.png");
138     CCSprite * sprite_tips_btn_cancel_normal = CCSprite::createWithSpriteFrame(f_tips_btn_cancel_normal);
139
140     CCSpriteFrame * f_tips_btn_cancel_select = sfCache->spriteFrameByName("btn_cancel_select.png");
141     CCSprite * sprite_tips_btn_cancel_select = CCSprite::createWithSpriteFrame(f_tips_btn_cancel_select);
142
143     CCMenuItemSprite * itemCancel = CCMenuItemSprite::create(sprite_tips_btn_cancel_normal, sprite_tips_btn_cancel_select, this, menu_selector(PopLayer::closePopLayer));
144
145     itemCancel->setPosition(ccp(m_size.width*(2.0/3),m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));
146
147     CCPoint bgSpritePoint = m_bgSprite->getPosition();
148     CCMenu * menu = CCMenu::create(itemConfirm,itemCancel,NULL);
149     menu->setPosition(ccp(bgSpritePoint.x-m_size.width/2,bgSpritePoint.y-m_size.height/2));//菜单位置设置为弹出框左下
150     this->addChild(menu);
151 }
152
153
154 //执行上层对象的回调函数，关闭弹出框
155 void PopLayer::buttonCallBackFunc(CCObject * pSender)
156 {
157     CCNode * node = dynamic_cast<CCNode *>(pSender);
158     node->setTag(555);//设置tag，在调用层可以获取到
159
160     if (m_callfun &&  m_callbackListener)
161     {
162         //执行调用层回调函数，传递参数CCNode
163         (m_callbackListener->*m_callfun)(node);
164     }
165
166     this->removeFromParentAndCleanup(true);
167 }
168
169 //关闭弹出框
170 void PopLayer::closePopLayer(CCObject * pSender)
171 {
172     this->removeFromParentAndCleanup(true);
173 }
174
175
176 //重写触摸注册函数，重新给定触摸级别
177 void PopLayer::registerWithTouchDispatcher()
178 {
179     //这里的触摸优先级设置为－128，与CCMenu同级，保证了屏蔽下方的触摸
180     CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -128, true);
181 }
182
183 //触摸函数ccTouchBegan，返回true
184 bool PopLayer::ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent )
185 {
186     return true;
187 }

我们的两个create函数分别对应了两种弹出框的创建，这两种弹出框应该足够我们使用了。下面我们来看看调用的代码。

第一种弹出框的调用

1 CCLayer * popLayer = PopLayer::create("cocos2dx学习之旅","嗨！我是yangxq，我们一起来学习cocos2dx吧！");
2 this->addChild(popLayer);

第二种弹出框的调用

1 CCLayer * popLayer = PopLayer::create("tips","嗨！我是yangxq，我们一起来学习cocos2dx吧！",this,callfuncN_selector(RegisterHandleLayer::callfunN));
2 this->addChild(popLayer);

第二种弹出框触发的函数

1 void RegisterHandleLayer::callfunN(CCNode * node)
2 {
3     CCLog("Tag:%d",node->getTag());
4 }

我们在第二种弹出框中点击“确定”后，可以看到效果如下：

我们可以看到输出的日志，说明关闭弹出框后成功触发了调用层的函数，至此我们实现了弹出框功能。

时间： 2024-08-05 11:18:37

cocos2dx2.2.2弹出框的实现的相关文章

安卓中的弹出框

AlertDialog.Builder builder = new Builder(Context context) 得到一个context所在页面的弹出框, 可以是单选 builder.setSingleChoiceItems(items, checkedItem,listener)  items为弹出框的条目,checkedItem为默认选择的条目(一个),listener为弹出框的点击事件监听器(DialogInterface.OnClickListener的类型,是内部类), 也可以是多

Bootstrap方法为页面添加一个弹出框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap

popover弹出框

<style> #view{width: 300px;height: 200px;border: 1px solid red;} </style> 以上是为了viewport更容易看出来设置的样式 <body style="margin: 50px;"> <div id="view"> <button class="btn btn-danger btn-lg" data-toogle=&quo

js 常见弹出框学习

模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹出   http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/,网站提供打包好的资源下载. html中的基本结构: <div class="md-modal md-effect-1" id="mo

UIAlertView弹出框

<Alert弹出框提示用户信息>    1.遵循代理方法<UIAlertViewDelete>    2.调用方法UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"恭喜通关!" message:@"更多精彩,请购买下一关~~" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"购买&

UIActionSheet底部弹出框

<底部弹出框来提示用户信息>    1.遵循代理方法<UIActionSheetDelete>    2.调用放法 [UIActionSheet *sheet=[UIActionSheet alloc]initWithTitle:@“通关了!” delegate:self cancelButtonTitle:@“取消” destructiveButtonTitle:@“购买” otherButtonTitles:@“购买1”,@“购买2”,nil]    [sheet showIn

Bootstrap弹出框

弹出框3要素 modal-headermodal-bodymodal-footer <!--促发弹窗--> <a href="#" data-toggle="modal" data-target="#about">点我弹出</a> <!--弹窗代码--> <div class="modal fade" id="about"> <div cla

显示遮罩层和弹出框

因为最近用到了遮罩层和弹出框,上网查资料后自己完成了一个,在此做一下记录做保存. 因为用到了jq,所以需要引入jq文件,比如jquery-1.11.3.js 以下是jsp的代码: <body> <div> <input id="button" type="button" value="点击我"> <div class="shareDialog"> <div class=&q

UIAlertView - 弹出框

UIAlertView 继承于UIView 初始化方法:- (id)initWithTitle:(NSString *)title message:(NSString *)message delegate:(id /* <UIAlertViewDelegate>*/)delegate cancelButtonTitle:(NSString *)cancelButtonTitle otherButtonTitles:(NSString *)otherButtonTitles,...,nil;