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 }

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

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