利用cocostudio库函数 实现左右滑动的背包栏UI （cocos2d-x 2.2.0）

.h

#ifndef __COMMON_COMPONENTS__
#define __COMMON_COMPONENTS__

#include "cocos2d.h"
#include "cocos-ext.h"

USING_NS_CC;
USING_NS_CC_EXT;

#define ROOT_BACK_WIDTH        380        //background width
#define ROOT_BACK_HEIGHT    450        //background height
#define LAYOUT_WIDTH        360        //each page width
#define LAYOUT_HEIGHT        360        //each page height
#define PAGE_SUM_NUM        6        //total page num
#define EACH_PAGE_NUM        9        //each page grid num

class CCommonComponents : public cocos2d::extension::UILayer
{
public:
    CCommonComponents(void);
    ~CCommonComponents(void);

    virtual bool init();
    CREATE_FUNC(CCommonComponents);

public:
    UIImageView* createHorizontalGrid( int pageNum = PAGE_SUM_NUM );
    void tagMenuTest( CCObject* pSender );
    void refreshGrid(); 
    void pageViewEvent(CCObject *pSender, PageViewEventType type);
    void buttonTidyCallback( CCObject* pSender );

public:
    UIImageView*        m_pImgEffect[PAGE_SUM_NUM];                    //effect of selected
    UIButton*            m_pBtnAllGrid[PAGE_SUM_NUM][EACH_PAGE_NUM];    //total num of grid
    UIImageView*        m_pBtnTextureChild[PAGE_SUM_NUM][EACH_PAGE_NUM]; //each icon in gird
    UIImageView*        m_pImgLight[PAGE_SUM_NUM];                    //the current page where the lights
    int                    m_IntCurPage;                                //record the current page number
};

#endif //__COMMON_COMPONENTS__

.cpp

#include "CommonComponents.h"

CCommonComponents::CCommonComponents(void) :
     m_IntCurPage(0)
{
    memset(m_pImgEffect, 0, sizeof(m_pImgEffect));
    memset(m_pBtnAllGrid, 0, sizeof(m_pBtnAllGrid));
    memset(m_pBtnTextureChild, 0, sizeof(m_pBtnTextureChild));
    memset(m_pImgLight, 0, sizeof(m_pImgLight));
}

CCommonComponents::~CCommonComponents(void)
{
}

bool CCommonComponents::init()
{
    bool bRet = false;

    do 
    {
        CC_BREAK_IF( !UILayer::init() );


        bRet = true;

    } while (0);

    return bRet;
}

UIImageView* CCommonComponents::createHorizontalGrid( int pageNum )
{
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    UIImageView* imgBack = UIImageView::create();
    imgBack->setTexture("frame.png");
    imgBack->setScale9Enable(true);
    imgBack->setScale9Size(CCSizeMake(ROOT_BACK_WIDTH, ROOT_BACK_HEIGHT));


    UIPageView* pageView = UIPageView::create();
    pageView->setTouchEnable(true);
    pageView->setSize(CCSizeMake(LAYOUT_WIDTH, LAYOUT_HEIGHT));
    pageView->setAnchorPoint(ccp(0.5f, 0.5f));

    for (int i = 0; i < pageNum; ++i)
    {
        UIPanel* layout = UIPanel::create();
        layout->setSize(CCSizeMake(LAYOUT_WIDTH, LAYOUT_HEIGHT));

        UIImageView* imageView = UIImageView::create();
        imageView->setTouchEnable(true);
        imageView->setScale9Enable(true);
        imageView->setTexture("pic_frame1.png");
        imageView->setScale9Size(CCSizeMake(LAYOUT_WIDTH, LAYOUT_HEIGHT));
        imageView->setPosition(ccp(layout->getRect().size.width / 2, layout->getRect().size.height / 2));
        layout->addChild(imageView);

        m_pImgEffect[i] = UIImageView::create();
        m_pImgEffect[i]->setVisible(false);
        m_pImgEffect[i]->setTexture("frame_pressed.png");
        layout->addChild(m_pImgEffect[i]);

        m_pImgLight[i] = UIImageView::create();
        if( 0 == i )
        {
            m_pImgLight[i]->setTexture("green.png");
        }
        else
        {
            m_pImgLight[i]->setTexture("red.png");
        }
        m_pImgLight[i]->setPosition(ccp(-160 + i*30, -180));

        for(int j=0; j<9; ++j)
        {
            m_pBtnAllGrid[i][j] = UIButton::create();
            m_pBtnAllGrid[i][j]->setTouchEnable(true);
            m_pBtnAllGrid[i][j]->setTextures("frame.png", "frame.png", "frame.png");
            m_pBtnAllGrid[i][j]->setPosition(ccp( m_pBtnAllGrid[i][j]->getContentSize().width/2+ j%3*m_pBtnAllGrid[i][j]->getContentSize().width*1.2 + 20, 
                layout->getSize().height-m_pBtnAllGrid[i][j]->getContentSize().height/2-m_pBtnAllGrid[i][j]->getContentSize().height*(j/3)/0.85 - 25));
            layout->addChild(m_pBtnAllGrid[i][j]);
            m_pBtnAllGrid[i][j]->setWidgetTag(i*9+j);
            m_pBtnAllGrid[i][j]->addReleaseEvent(this, coco_releaseselector(CCommonComponents::tagMenuTest));

            m_pBtnTextureChild[i][j] = UIImageView::create();
            m_pBtnTextureChild[i][j]->setTexture("frame.png");
            m_pBtnAllGrid[i][j]->addChild(m_pBtnTextureChild[i][j]);
        }

        pageView->addPage(layout);

        imgBack->addChild(m_pImgLight[i]);
    }

    pageView->addEventListener(this, pagevieweventselector(CCommonComponents::pageViewEvent));
    imgBack->addChild(pageView);
    pageView->setPosition(ccp(0, 36));

    UIButton* button = UIButton::create();
    button->setTouchEnable(true);
    button->setTextures("pic_button_1.png","pic_button_2.png","pic_button_3.png");
    button->addReleaseEvent(this, coco_releaseselector(CCommonComponents::buttonTidyCallback));
    imgBack->addChild(button);
    button->setPosition(ccp(100, -180));

    UILabel* labBtnFont = UILabel::create();
    labBtnFont->setText("TIDY");
    labBtnFont->setFontSize(25);
    button->addChild(labBtnFont);

    refreshGrid();                //temporary test

    return imgBack;
}

void CCommonComponents::tagMenuTest( CCObject* pSender )
{
    UIButton* curImgClick = dynamic_cast<UIButton*>(pSender);
    int curTag = curImgClick->getWidgetTag();
    CCLOG("curTag = %d ; [%f, %f]", curTag, curImgClick->getPosition().x, curImgClick->getPosition().y);

    m_pImgEffect[m_IntCurPage]->setPosition(curImgClick->getPosition());
    m_pImgEffect[m_IntCurPage]->setVisible(true);

}

void CCommonComponents::refreshGrid()
{
    for(int i= 0; i<2; ++i)
    {
        for (int j = 0; j<EACH_PAGE_NUM; ++j)
        {
            if( i*EACH_PAGE_NUM+j <= 13 )
            m_pBtnTextureChild[i][j]->setTexture("CloseNormal.png");
        }
    }
    
}

void CCommonComponents::pageViewEvent(CCObject *pSender, PageViewEventType type)
{
    switch (type)
    {
    case PAGEVIEW_EVENT_TURNING:
        {
            UIPageView* pageView = dynamic_cast<UIPageView*>(pSender);
            CCLog(" m_IntCurPage = %d",pageView->getPage());
            if(m_IntCurPage != pageView->getPage())
            {
                m_IntCurPage = pageView->getPage();
                for(int i=0; i<PAGE_SUM_NUM; ++i)
                {
                    m_pImgEffect[i]->setVisible(false);
                    if(i == m_IntCurPage)
                    {
                        m_pImgLight[i]->setTexture("green.png");
                    }
                    else
                    {
                        m_pImgLight[i]->setTexture("red.png");
                    }
                }
            }
        }
        break;

    default:
        break;
    }
}

void CCommonComponents::buttonTidyCallback( CCObject* pSender )
{
    CCLog("running buttonCallback function");
}

使用方式：

CCommonComponents* pageLayer =  CCommonComponents::create();
    this->addChild(pageLayer);

显示效果：

   

这只是一个小的例子代码，实现方式是依赖 cocostudio 库函数，没有好，只有比较好。

欢迎来访并指教 QQ：316948714， 期待一样热爱技术的你！！！