cocos2d-x学习日志(7) --CCScrollView和CCTableView的使用-优快云博客

本文介绍如何使用 Cocos2d-x 的 CCScrollView 和 CCTableView 实现游戏帮助页面的左右滑动及列表视图效果。通过创建 GalleryLayer 和 ListViewLayer 类，演示了设置视图方向、内容尺寸、子项数量和内容等关键步骤。

在游戏和应用中经常要实现左右滑动展示游戏帮助、以列表显示内容的UI效果，就像android中的Gallery和ListView。本文通过CCScrollView和CCTableView分别来实现这两个效果，基于cocos2d-x 2.0.4版本。
首先来简单了解一下这两个东东，CCScrollView本身是一个CCLayer，而CCTableView是CCScrollView的子类，这是引擎已经帮我们封装好了的，CCTableView可以设置成横向和纵向，用它可以实现类似于Gallery和ListView的效果。

二、实现

1.添加cocos2d-x扩展库文件

2. 首先实现游戏帮助界面

(1) 创建头文件GalleryLayer.h

[cpp]view plaincopy 
    
 #ifndef __HELP_SCENE_H__  
 #define __HELP_SCENE_H__  
   
 #include "cocos2d.h"  
 #include "SimpleAudioEngine.h"  
 #include "cocos-ext.h"  
   
 USING_NS_CC;  
 USING_NS_CC_EXT;  
   
 class GalleryLayer : public cocos2d::CCLayer ,public CCScrollViewDelegate  
 {  
 public:  
     virtual bool init();    
   
     void menuCloseCallback(CCObject* pSender);  
   
     CREATE_FUNC(GalleryLayer);  
   
 public:  
     //scrollview滚动的时候调用  
     void scrollViewDidScroll(CCScrollView* view);  
     //缩放的时候调用  
     void scrollViewDidZoom(CCScrollView* view);  
   
     virtual void onEnter();  
     virtual void onExit();  
   
     virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);  
     virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);  
     virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);  
     virtual void ccTouchCancelled(CCTouch *pTouch, CCEvent *pEvent);  
   
 private:  
     //根据手势滑动的距离和方向滚动图层  
      void adjustScrollView(float offset);  
      CCScrollView *m_pScrollView;  
      CCPoint m_touchPoint;  
      int m_nCurPage;  
 };  
   
 #endif    

类GalleryLayer继承了CCScrollViewDelegate，实现了它的两个纯虚函数，主要是为了当scrollview滚动和缩放时回调这两函数，这样我们就可以在这两函数中做相关操作了。

(2) 看源文件GalleryLayer.cpp

[cpp]view plaincopy 
    
 #include "GalleryLayer.h"  
 #include "ListViewLayer.h"  
   
 using namespace cocos2d;  
 using namespace cocos2d::extension;  
   
 bool GalleryLayer::init()  
 {  
     bool bRet = false;  
     do  
     {  
        CC_BREAK_IF( !CCLayer::init() );  
   
        m_nCurPage = 1;  
        CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();  
        CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();  
   
        CCLayer *pLayer = CCLayer::create();  
        char helpstr[30] = {0};  
        for (int i = 1; i <= 3; ++ i)  
        {  
            memset(helpstr, 0, sizeof(helpstr));  
            sprintf(helpstr,"bg_%02d.png",i);  
            CCSprite *pSprite = CCSprite::create(helpstr);  
            pSprite->setPosition(ccp(visibleSize.width * (i-0.5f), visibleSize.height / 2));  
            pLayer->addChild(pSprite);  
        }  
          
        m_pScrollView = CCScrollView::create(CCSizeMake(960, 640), pLayer);  
        m_pScrollView->setContentOffset(CCPointZero);  
        m_pScrollView->setTouchEnabled(false);  
        m_pScrollView->setDelegate(this);  
        m_pScrollView->setDirection(kCCScrollViewDirectionHorizontal);  
        pLayer->setContentSize(CCSizeMake(960*3, 640));  
   
        this->addChild(m_pScrollView);  
   
        CCSpriteFrameCache *pCache =  CCSpriteFrameCache::sharedSpriteFrameCache();  
      
        pCache->addSpriteFrame(CCSpriteFrame::create("button_normal.png",CCRectMake(0, 0, 64, 64)),"button_normal.png");  
        pCache->addSpriteFrame(CCSpriteFrame::create("button_selected.png",CCRectMake(0, 0, 64, 64)),"button_selected.png");  
        for (int i = 1; i <= 3; ++ i)  
        {  
            CCSprite *pPoint = CCSprite::createWithSpriteFrameName("button_normal.png");  
            pPoint->setTag(i);  
            pPoint->setPosition(ccp( origin.x + (visibleSize.width - 3 * pPoint->getContentSize().width)/2 + pPoint->getContentSize().width * (i-1), origin.y + 30));  
            this->addChild(pPoint);  
        }  
         CCSprite *pPoint = (CCSprite *)this->getChildByTag(1);  
         pPoint->setDisplayFrame(pCache->spriteFrameByName("button_selected.png"));  
       
         bRet = true;  
     }while(0);  
   
     return bRet;  
   
 }  
   
 void GalleryLayer::menuCloseCallback(CCObject* pSender)  
 {  
   
 }  
   
 void GalleryLayer::scrollViewDidScroll(cocos2d::extension::CCScrollView *view)  
 {  
     CCLOG("scroll");  
 }  
   
 void GalleryLayer::scrollViewDidZoom(cocos2d::extension::CCScrollView *view)  
 {  
     CCLOG("zoom");  
 }  
   
 void GalleryLayer::onEnter()  
 {  
     CCLayer::onEnter();  
     CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 1, false);  
 }  
   
 void GalleryLayer::onExit()  
 {  
     CCDirector::sharedDirector()->getTouchDispatcher()->removeDelegate(this);  
     CCLayer::onExit();  
     CCSpriteFrameCache::sharedSpriteFrameCache()->removeUnusedSpriteFrames();  
 }  
   
   
 bool GalleryLayer::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)  
 {  
     m_touchPoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());  
     return true;  
 }  
   
 void GalleryLayer::ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent)  
 {  
       
 }  
   
 void GalleryLayer::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)  
 {  
     CCPoint endPoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());  
     float distance = endPoint.x - m_touchPoint.x;  
     if(fabs(distance) > 50)  
     {  
         adjustScrollView(distance);  
     }  
 }  
   
 void GalleryLayer::ccTouchCancelled(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)  
 {  
     CCPoint endPoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());  
     float distance = endPoint.x - m_touchPoint.x;  
     if(fabs(distance) > 50)  
     {  
         adjustScrollView(distance);  
     }  
 }  
   
 void GalleryLayer::adjustScrollView(float offset)  
 {  
     CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();  
     CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();  
     CCSpriteFrameCache *pCache =  CCSpriteFrameCache::sharedSpriteFrameCache();  
     CCSprite *pPoint = (CCSprite *)this->getChildByTag(m_nCurPage);  
     pPoint->setDisplayFrame(pCache->spriteFrameByName("button_normal.png"));  
     if (offset<0)  
     {  
         m_nCurPage ++;  
     }else  
     {  
         m_nCurPage --;  
     }  
   
     if (m_nCurPage <1)  
     {  
         m_nCurPage = 1;  
     }  
   
     if(m_nCurPage > 3)  
     {  
         //拨动到大于第三层,添加listViewLayer  
         CCLayer *pLayer = ListViewLayer::create();  
         CCScene *pScene = CCScene::create();  
         pScene->addChild(pLayer);  
         CCDirector::sharedDirector()->replaceScene(pScene);  
     }  
     else  
     {  
         pPoint = (CCSprite *)this->getChildByTag(m_nCurPage);  
         pPoint->setDisplayFrame(pCache->spriteFrameByName("button_selected.png"));  
         CCPoint  adjustPos = ccp(origin.x - visibleSize.width * (m_nCurPage-1), 0);  
         m_pScrollView->setContentOffset(adjustPos, true);  
     }  
 }  

这里一共有三张图，是从捕鱼达人中拿出来的背景图，当滚完三张图时就跳转到ListViewLayer场景去，上面的代码比较容易懂。

首先创建一个CCLayer，包含三张背景图，设置CCLayer的ContentSize，并设置三张图片的位置然后设置CCLayer为CCScrollview的内容，并设置CCScrollView的显示区域。最后根据用户滑动的方向和距离，通过设置scrollview的setContentOffset，滚动视图。CCScrollview.h文件中封装了一个枚举类型，一共有四个方向，常用横向和纵向，这里使用了横向。

[cpp]view plaincopy 
    
 typedef enum {  
     kCCScrollViewDirectionNone = -1,  
     kCCScrollViewDirectionHorizontal = 0,  
     kCCScrollViewDirectionVertical,  
     kCCScrollViewDirectionBoth  
 } CCScrollViewDirection;  

(3) 测试代码

AppDelegate.cpp,找到applicationDidFinishLaunching()添加，显示屏幕size

[cpp]view plaincopy 
    
 //显示屏幕的size  
    CCSize screenSize = CCEGLView::sharedOpenGLView()->getFrameSize();  
      
    CCSize designSize = CCSizeMake(960, 640);  
      
    if (screenSize.height != 960)  
    {  
        CCSize resourceSize = CCSizeMake(960, 640);  
        pDirector->setContentScaleFactor(resourceSize.height / designSize.height);  
    }  
      
    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionNoBorder);  

HelloWorldScene.cpp

[cpp]view plaincopy 
    
 CCLayer *pLayer =  GalleryLayer::create();  
 this->addChild(pLayer);  

(4) 效果图

3.现在来实现列表展示(ListView)的效果

（1）创建ListViewLayer.h

[cpp]view plaincopy 
    
 #ifndef __TABLEVIEWTESTSCENE_H__  
 #define __TABLEVIEWTESTSCENE_H__  
   
 #include "cocos2d.h"  
 #include "cocos-ext.h"  
   
 class ListViewLayer : public cocos2d::CCLayer, public cocos2d::extension::CCTableViewDataSource, public cocos2d::extension::CCTableViewDelegate  
 {  
 public:  
     virtual bool init();    
       
     virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view);  
   
     virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view);  
   
     //处理触摸事件，可以计算点击的是哪一个子项  
     virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);  
     //每一项的宽度和高度  
     virtual cocos2d::CCSize cellSizeForTable(cocos2d::extension::CCTableView *table);  
     //生成列表每一项的内容  
     virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);  
     //一共多少项  
     virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);  
   
     CREATE_FUNC(ListViewLayer);  
 };  
   
 #endif   

(2) 源文件 ListViewLayer.cpp

[cpp]view plaincopy 
    
 #include "ListViewLayer.h"  
   
 USING_NS_CC;  
 USING_NS_CC_EXT;  
   
   
 bool ListViewLayer::init()  
 {  
     bool bRet = false;  
     do  
     {  
         CC_BREAK_IF( !CCLayer::init() );  
   
         CCTableView* pTableView = CCTableView::create(this, CCSizeMake(960, 640));  
         pTableView->setDirection(kCCScrollViewDirectionVertical);  
         pTableView->setPosition(CCPointZero);  
         pTableView->setDelegate(this);  
         pTableView->setVerticalFillOrder(kCCTableViewFillTopDown);  
         this->addChild(pTableView);  
         pTableView->reloadData();  
   
         bRet = true;  
     }while(0);  
   
     return bRet;  
 }  
   
   
   
 void ListViewLayer::tableCellTouched(CCTableView* table, CCTableViewCell* cell)  
 {  
     CCLog("cell touched at index: %i", cell->getIdx());  
 }  
   
 CCSize ListViewLayer::cellSizeForTable(CCTableView *table)  
 {  
     return CCSizeMake(960, 120);  
 }  
   
 CCTableViewCell* ListViewLayer::tableCellAtIndex(CCTableView *table, unsigned int idx)  
 {  
     CCString *pString = CCString::createWithFormat("%d", idx);  
     CCTableViewCell *pCell = table->dequeueCell();  
     if (!pCell) {  
         pCell = new CCTableViewCell();  
         pCell->autorelease();  
         CCSprite *pSprite = CCSprite::create("listitem.png");  
         pSprite->setAnchorPoint(CCPointZero);  
         pSprite->setPosition(CCPointZero);  
         pCell->addChild(pSprite);  
   
         CCLabelTTF *pLabel = CCLabelTTF::create(pString->getCString(), "Arial", 20.0);  
         pLabel->setPosition(CCPointZero);  
         pLabel->setAnchorPoint(CCPointZero);  
         pLabel->setTag(123);  
         pCell->addChild(pLabel);  
     }  
     else  
     {  
         CCLabelTTF *pLabel = (CCLabelTTF*)pCell->getChildByTag(123);  
         pLabel->setString(pString->getCString());  
     }  
   
   
     return pCell;  
 }  
   
 unsigned int ListViewLayer::numberOfCellsInTableView(CCTableView *table)  
 {  
     return 20;  
 }  
   
   
 void ListViewLayer::scrollViewDidScroll(CCScrollView *view)  
 {  
 }  
   
 void ListViewLayer::scrollViewDidZoom(CCScrollView *view)  
 {  
 }  