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 }
我们在第二种弹出框中点击“确定”后，可以看到效果如下：
我们可以看到输出的日志，说明关闭弹出框后成功触发了调用层的函数，至此我们实现了弹出框功能。
