CocoStudio 界面编辑器学习

标题有点大，实际上我只是从github上找的一个cocostudio的工程文件，直接导出来用用，因为目前还是不太会用cocostudio这个工具，后面自己可能会花点时间学习一下。在这里我们就看一下在代码里如何加载这个界面文件，可以在程序里操作。先贴一张效果图出来看看，顺便说说我是在linux下写的代码：

在这个界面上除了中间显示"Layout"和左上角的按钮是我用代码实现的，整个中间的界面都是在cocostudio里编辑好加载进来，在这里我们看看如何在代码里加载：

#include "cocos2d.h"
#include "CocoStudio/GUI/System/CocosGUI.h"

USING_NS_CC;

using namespace cocos2d::extension;
using namespace ui;


class HelloWorld : public cocos2d::CCLayer
{
public:
    virtual ~HelloWorld();
    virtual bool init();  
    
    static cocos2d::CCScene* scene();
    
    void menuCloseCallback(CCObject* pSender);
    
    CREATE_FUNC(HelloWorld);
    
    UILayer *uiLayer;
    Layout *widget;
    UILabel* alert;
    
    CCSize size;
    
    void backCallback(CCObject *obj,TouchEventType type);
    void leftCallback(CCObject *obj,TouchEventType type);
    void middleCallback(CCObject *obj,TouchEventType type);
    void rightCallback(CCObject *obj,TouchEventType type);
};  

在这里需要注意，因为我们使用了cocostudio，所以需要引入一下头文件和命名空间

#include "CocoStudio/GUI/System/CocosGUI.h"

using namespace cocos2d::extension;
using namespace ui;

接着我们把这个Layer的init函数贴上来：

 bool HelloWorld::init()
 {
     //////////////////////////////
     // 1. super init first
     if ( !CCLayer::init() )
     {
         return false;
     }
 
     CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
     CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
 
     size = CCDirector::sharedDirector()->getWinSize();
 
     /////////////////////////////
     // 2. add a menu item with "X" image, which is clicked to quit the program
     //    you may modify it.
 
     // add a "close" icon to exit the progress. it's an autorelease object
     CCMenuItemImage *pCloseItem = CCMenuItemImage::create(
                                         "CloseNormal.png",
                                         "CloseSelected.png",
                                         this,
                                         menu_selector(HelloWorld::menuCloseCallback));
 
     pCloseItem->setPosition(ccp(origin.x + visibleSize.width - pCloseItem->getContentSize().width/2 ,
                                 origin.y + pCloseItem->getContentSize().height/2));
 
     // create menu, it's an autorelease object
     CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);
     pMenu->setPosition(CCPointZero);
     this->addChild(pMenu, 1);
 
     uiLayer = UILayer::create();
     addChild(uiLayer);
 
     widget = static_cast<Layout*>(GUIReader::shareReader()->widgetFromJsonFile("UITest.json"));
     uiLayer->addWidget(widget);
 
     uiLayer->setPosition(ccp(150,100));
 
     CCSize widgetSize = widget->getSize();
 
 
     //自己添加控件
     alert = UILabel::create();
     alert->setText("Layout");
     alert->setFontName("Marker Felt");
     alert->setFontSize(30);
     alert->setColor(ccc3(159, 168, 176));
     alert->setAnchorPoint(ccp(0.5,0.5));
     alert->setPosition(ccp(widgetSize.width/2,widgetSize.height/2));
     alert->retain();
     uiLayer->addWidget(alert);
 
 
     UIButton *button = UIButton::create();
     button->setTouchEnabled(true);
     button->loadTextures("button.png", "button1.png", "");
     button->setPosition(ccp(40, widgetSize.height-40));
 
     uiLayer->addWidget(button);
 
     //从布局文件获取按钮
     Label *back = static_cast<Label*>(UIHelper::seekWidgetByName(widget, "back"));
     if(back != NULL)
     {
         back->addTouchEventListener(this,toucheventselector(HelloWorld::backCallback));
     }
 
     Button *left = static_cast<Button*>(UIHelper::seekWidgetByName(widget,"left_Button"));
     if(left!=NULL)
     {
         left->addTouchEventListener(this,toucheventselector(HelloWorld::leftCallback));
     }
 
     Button *middle = static_cast<Button*>(UIHelper::seekWidgetByName(widget,"middle_Button"));
     if(middle!=NULL)
     {
         middle->addTouchEventListener(this,toucheventselector(HelloWorld::middleCallback));
     }
 
     Button *right = static_cast<Button *>(UIHelper::seekWidgetByName(widget,"right_Button"));
     if(right!=NULL)
     {
         right->addTouchEventListener(this,toucheventselector(HelloWorld::rightCallback));
     }
 
     return true;
 }

逐行分析一下这个代码，免得自己以后忘记,34-40行的代码初始化了定义的uiLayer对象和widget对象。需要注意的是在这里加载json文件的方法

GUIReader::shareReader()->widgetFromJsonFile("UITest.json")

这个时候运行我们的程序就可以看到界面了。

45-60行的代码主要是使用代码的方式在widget里添加了一个label和一个button

65-70行的代码主要是获取布局文件里的对象控件，并为其设置监听器，接着我们看看其监听器的函数是如何处理，在这里只贴一个出来：

void HelloWorld::leftCallback(CCObject *obj,TouchEventType type)
{
    switch(type)
    {
        case TOUCH_EVENT_ENDED:
        {
            CCLog("left
");
            alert->setText("Left");
        }
        break;
        default:
        break;
    }
}

这样当点击昨天的绿色按钮是就会更换最中间Label的文字