cocos2d-x学习日志(12) --弹出对话框的设计与实现

我们时常需要这么些功能，弹出一个层，给与用户一些提示，这也是一种模态窗口，在没有对当前对话框进行确认的时候，不能继续往下操作。

功能分析

我们设计一个对话框，对话框上有几个按钮（个数可定制），当然有个标题，会让别人一眼看出它之功用，里面可以有些详细的提示文字，需要是模态窗口，而且窗口的大小可变，这样能够更好的适应不同的屏幕的大小。当然还有一个重要的功能，弹出效果 ~ 虽然从技术角度来说，实现起来并不难，或者说非常简单，但这会以一个很好的用户体验展示给用户。

代码

1.弹出框类

PopupLayer.h

//
//  PopupLayer.h
//  PopupDemo
//
//  Created by IDEA-MAC03 on 13-10-10.
//
//

#ifndef __PopupDemo__PopupLayer__
#define __PopupDemo__PopupLayer__

#include "cocos2d.h"
#include "cocos-ext.h"
using namespace cocos2d;
using namespace cocos2d::extension;
using namespace std;

class PopupLayer:public CCLayer
{

public:
    PopupLayer();
    ~PopupLayer();

    virtual bool init();
    CREATE_FUNC(PopupLayer);

     // 需要重写触摸注册函数，重新给定触摸级别
    virtual void registerWithTouchDispatcher(void);
     // 重写触摸函数，永远返回 true ，屏蔽其它层，达到 “模态” 效果
    bool ccTouchBegan(cocos2d::CCTouch *pTouch,cocos2d::CCEvent *pEvent);
    // 构架，并设置对话框背景图片
    static PopupLayer* create(const char* backgroundImage);

     // 它可以显示标题，并且设定显示文字大小
    void setTitle(const char*title,int fontsize = 20);
    // 文本内容，padding 为文字到对话框两边预留的距离，这是可控的，距上方的距离亦是如此
    void setContentText(const char *text, int fontsize = 20, int padding = 50, int paddintTop = 100);
    // 回调函数，当点击按钮后，我们关闭弹出层的同事，需要一个回调函数，以通知我们点击了哪个按钮（如果有多个）
    void setCallbackFunc(CCObject* target, SEL_CallFuncN callfun);
     // 为了添加按钮方面，封装了一个函数，传入些必要的参数
    bool addButton(const char* normalImage, const char* selectedImage, const char* title, int tag = 0);

    // 为了在显示层时之前的属性生效，选择在 onEnter 里动态展示
    virtual void onEnter();
    virtual void onExit();

private:

    void buttonCallback(CCObject* pSender);

    // 文字内容两边的空白区
    int m_contentPadding;
    int m_contentPaddingTop;

    CCObject* m_callbackListener;
    SEL_CallFuncN m_callback;

    CC_SYNTHESIZE_RETAIN(CCMenu*, m__pMenu, MenuButton);
    CC_SYNTHESIZE_RETAIN(CCSprite*, m__sfBackGround, SpriteBackGround);
    CC_SYNTHESIZE_RETAIN(CCScale9Sprite*, m__s9BackGround, Sprite9BackGround);
    CC_SYNTHESIZE_RETAIN(CCLabelTTF*, m__ltTitle, LabelTitle);
    CC_SYNTHESIZE_RETAIN(CCLabelTTF*, m__ltContentText, LabelContentText);

};

#endif /* defined(__PopupDemo__PopupLayer__) */

PopupLayer.cpp

//
//  PopupLayer.cpp
//  PopupDemo
//
//  Created by IDEA-MAC03 on 13-10-10.
//
//

#include "PopupLayer.h"

PopupLayer::PopupLayer():
m__pMenu(NULL)
,m_contentPadding(0)
,m_contentPaddingTop(0)
,m_callbackListener(NULL)
,m_callback(NULL)
,m__sfBackGround(NULL)
,m__s9BackGround(NULL)
,m__ltContentText(NULL)
,m__ltTitle(NULL)
{

}

PopupLayer::~PopupLayer()
{
    CC_SAFE_RELEASE(m__pMenu);
    CC_SAFE_RELEASE(m__sfBackGround);
    CC_SAFE_RELEASE(m__ltContentText);
    CC_SAFE_RELEASE(m__ltTitle);
    CC_SAFE_RELEASE(m__s9BackGround);
}

bool PopupLayer::init()
{
    bool bRef = false;
    do
    {
        CC_BREAK_IF(!CCLayer::init());
        this->setContentSize(CCSizeZero);
        // 初始化需要的 Menu
        CCMenu* menu = CCMenu::create();
        menu->setPosition(CCPointZero);
        setMenuButton(menu);
        setTouchEnabled(true);
        bRef = true;
    } while (0);
    return bRef;
}

void PopupLayer::registerWithTouchDispatcher()
{
       // 这里的触摸优先级设置为 -128 这保证了，屏蔽下方的触摸
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -128, true);
}

bool PopupLayer::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCLog("PopupLayer touch");
    return true;
}

PopupLayer* PopupLayer::create(const char *backgroundImage)
{
    PopupLayer* ml = PopupLayer::create();
    ml->setSpriteBackGround(CCSprite::create(backgroundImage));
    ml->setSprite9BackGround(CCScale9Sprite::create(backgroundImage));
    return ml;
}

void PopupLayer::setTitle(const char*title,int fontsize)
{
    CCLabelTTF* ltfTitle = CCLabelTTF::create(title, "", fontsize);
    setLabelTitle(ltfTitle);
}

void PopupLayer::setContentText(const char *text, int fontsize, int padding, int paddingTop){
    CCLabelTTF* ltf = CCLabelTTF::create(text, "", fontsize);
    setLabelContentText(ltf);
    m_contentPadding = padding;
    m_contentPaddingTop = paddingTop;
}

void PopupLayer::setCallbackFunc(cocos2d::CCObject *target, SEL_CallFuncN callfun)
{
    m_callbackListener = target;
    m_callback = callfun;
}

bool PopupLayer::addButton(const char *normalImage, const char *selectedImage, const char *title, int tag){
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint pCenter = ccp(winSize.width / 2, winSize.height / 2);

    // 创建图片菜单按钮
    CCMenuItemImage* menuImage = CCMenuItemImage::create(normalImage, selectedImage, this, menu_selector(PopupLayer::buttonCallback));
    menuImage->setTag(tag);
    menuImage->setPosition(pCenter);

    // 添加文字说明并设置位置
    CCSize imenu = menuImage->getContentSize();
    CCLabelTTF* ttf = CCLabelTTF::create(title, "", 20);
    ttf->setColor(ccc3(0, 0, 0));
    ttf->setPosition(ccp(imenu.width / 2, imenu.height / 2));
    menuImage->addChild(ttf);

    getMenuButton()->addChild(menuImage);
    return true;
}

void PopupLayer::buttonCallback(cocos2d::CCObject *pSender){
    CCNode* node = dynamic_cast<CCNode*>(pSender);
    CCLog("touch tag: %d", node->getTag());
    if (m_callback && m_callbackListener){
        (m_callbackListener->*m_callback)(node);
    }
    this->removeFromParentAndCleanup(true);
}

void PopupLayer::onEnter()
{
    CCLayer::onEnter();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint pCenter = ccp(winSize.width / 2, winSize.height / 2);

    CCSize contentSize;
     // 设定好参数，在运行时加载
    if (getContentSize().equals(CCSizeZero))
    {
        getSpriteBackGround()->setPosition(ccp(winSize.width / 2, winSize.height / 2));
        this->addChild(getSpriteBackGround(),0,0);
        contentSize = getSpriteBackGround()->getTexture()->getContentSize();
    }else
    {
        CCScale9Sprite *background = getSprite9BackGround();
        background->setContentSize(getContentSize());
        background->setPosition(ccp(winSize.width / 2, winSize.height / 2));
        this->addChild(background,0);
        contentSize = getContentSize();
    }

     // 添加按钮，并设置其位置
    this->addChild(getMenuButton());
    float btnWidth = contentSize.width/(getMenuButton()->getChildrenCount()+1);

    CCArray* array = getMenuButton()->getChildren();
    CCObject* pObj = NULL;
    int i = 0;
    CCARRAY_FOREACH(array, pObj)
    {
        CCNode* node = dynamic_cast<CCNode*>(pObj);
        node->setPosition(ccp(winSize.width / 2 - contentSize.width / 2 + btnWidth * (i + 1), winSize.height / 2 - contentSize.height / 3));
        i++;
    }

    // 显示对话框标题
    if (getLabelTitle())
    {
        getLabelTitle()->setPosition(ccpAdd(pCenter, ccp(0, contentSize.height / 2 - 35.0f)));
        this->addChild(getLabelTitle());
    }

    // 显示文本内容
    if (getLabelContentText())
    {
        CCLabelTTF* ltf = getLabelContentText();
        ltf->setPosition(ccp(winSize.width / 2, winSize.height / 2));
          ltf->setDimensions(CCSizeMake(contentSize.width - m_contentPadding * 2, contentSize.height - m_contentPaddingTop));
         ltf->setHorizontalAlignment(kCCTextAlignmentLeft);
        this->addChild(ltf);
    }

    CCAction* popupLayer = CCSequence::create(CCScaleTo::create(0.0, 0.0),
                                              CCScaleTo::create(0.06, 1.05),
                                              CCScaleTo::create(0.08, 0.95),
                                              CCScaleTo::create(0.08, 1.0), NULL);
    this->runAction(popupLayer);

}

void PopupLayer::onExit()
{
    CCLog("popup on exit.");
    CCLayer::onExit();
}

2.测试代码

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::CCLayer
{
public:
    // Method 'init' in cocos2d-x returns bool, instead of 'id' in cocos2d-iphone (an object pointer)
    virtual bool init();

    // there's no 'id' in cpp, so we recommend to return the class instance pointer
    static cocos2d::CCScene* scene();

    // a selector callback
    void menuCloseCallback(CCObject* pSender);

    // preprocessor macro for "static create()" constructor ( node() deprecated )
    CREATE_FUNC(HelloWorld);

    void menuCallback(cocos2d::CCObject *pSender);
    void popupLayer();
    void buttonCallback(cocos2d::CCNode *pNode);
};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"
#include "SimpleAudioEngine.h"
#include "PopupLayer.h"

using namespace cocos2d;
using namespace CocosDenshion;

CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();

    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint pointCenter = ccp(winSize.width / 2, winSize.height / 2);

    // 添加背景图片
    CCSprite* background = CCSprite::create("HelloWorld.png");
    background->setPosition(pointCenter);
    background->setScale(1.5f);
    this->addChild(background);

     // 添加菜单
    CCMenu* menu = CCMenu::create();

    CCMenuItemFont* menuItem = CCMenuItemFont::create("popup", this, menu_selector(HelloWorld::menuCallback));
    menuItem->setPosition(ccp(winSize.width / 2, winSize.height / 2));
    menuItem->setColor(ccc3(0, 0, 0));
    menu->addChild(menuItem);

    menu->setPosition(CCPointZero);
    this->addChild(menu);

    return true;
}

void HelloWorld::menuCallback(cocos2d::CCObject *pSender){
    popupLayer();
}

void HelloWorld::popupLayer()
{
    // 定义一个弹出层，传入一张背景图
    PopupLayer* pl = PopupLayer::create("useDialogBox0u00001.png");
    // ContentSize 是可选的设置，可以不设置，如果设置把它当作 9 图缩放
    pl->setContentSize(CCSizeMake(400, 360));
    pl->setTitle("吾名一叶");
    pl->setContentText("娇兰傲梅世人赏，却少幽芬暗里藏。不看百花共争艳，独爱疏樱一枝香。", 20, 50, 150);
    // 设置回调函数，回调传回一个 CCNode 以获取 tag 判断点击的按钮
    // 这只是作为一种封装实现，如果使用 delegate 那就能够更灵活的控制参数了
    pl->setCallbackFunc(this, callfuncN_selector(HelloWorld::buttonCallback));
    // 添加按钮，设置图片，文字，tag 信息
    pl->addButton("shopBtn0s01.png", "shopBtn0s02.png", "确定", 0);
    pl->addButton("bagButton0b1.png", "bagButton0b2.png", "取消", 1);
    // 添加到当前层
    this->addChild(pl);
}

void HelloWorld::buttonCallback(cocos2d::CCNode *pNode){
    CCLog("button call back. tag: %d", pNode->getTag());
}

void HelloWorld::menuCloseCallback(CCObject* pSender)
{
    CCDirector::sharedDirector()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    exit(0);
#endif
}

效果图

如上，完成了对话框的基本模型，它实现了以下功能：

• 一个可以弹出的对话框实现
• 模态窗口的实现（需要逻辑的控制）
• 多按钮的支持，位置自适应，提供回调函数
• 提供标题和内容设置
• 支持 九图 ，控制适应弹出框大小

当然还有许多其它并没有照顾到的功能，或者不完善的地方，这就需要用户自己扩展，定制了，如，这样一个层，至少应该是单例的，任何时候只应该存在一个，可以用单例模式实现，对于弹出层的内容方面，这里只有标题和内容，并且标题位置固定，按钮的位置还可以更灵活的设置等。

详解文章：http://www.ityran.com/archives/4854