轉載請注明來自：Alex Zhou的程序世界，本文鏈接：http://codingnow.cn/cocos2d-x/1024.html

//==================================================================================

?

在游戲和應用中經常要實現左右滑動展示游戲幫助、以列表顯示內容的UI效果，就像android中的Gallery和ListView。本文通過CCScrollView和CCTableView分別來實現這兩個效果，基于cocos2d-x 2.0.4版本。
首先來簡單了解一下這兩個東東，CCScrollView本身是一個CCLayer，而CCTableView是CCScrollView的子類，這是引擎已經幫我們封裝好了的，CCTableView可以設置成橫向和縱向，用它可以實現類似于Gallery和ListView的效果。
1. 首先實現游戲幫助界面
(1) 創建頭文件GalleryLayer.h

class GalleryLayer : public cocos2d::CCLayer ,public CCScrollViewDelegate { public:virtual bool init(); void menuCloseCallback(CCObject* pSender);CREATE_FUNC(GalleryLayer);public://scrollview滾動的時候會調用void scrollViewDidScroll(CCScrollView* view);//scrollview縮放的時候會調用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; };

類GalleryLayer繼承了CCScrollViewDelegate，實現了它的兩個純虛函數，主要是為了當scrollview滾動和縮放時回調這兩函數，這樣我們就可以在這兩函數中做相關操作了。

(2) 看源文件GalleryLayer.cpp

#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){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文件中封裝了一個枚舉類型，一共有四個方向，常用橫向和縱向，這里使用了橫向。

typedef enum {kCCScrollViewDirectionNone = -1,kCCScrollViewDirectionHorizontal = 0,kCCScrollViewDirectionVertical,kCCScrollViewDirectionBoth } CCScrollViewDirection;

下面來看看這部分的效果：

2. 現在來實現列表展示(ListView)的效果
（1）創建ListViewLayer.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); };

?

ListViewLayer繼承了CCTableViewDataSource和CCTableViewDelegate。這兩個抽象類封裝了幾個有用的函數，我們在下面的源碼中將實現它們。
（2）源文件 ListViewLayer.cpp

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) { }

首先需要創建CCTableView，設置它的顯示區域和顯示方向，這里使用了縱向。設置每個子項的寬度和高度，子項的數量以及每個子項對應的內容。每個子項是一個CCTableViewCell，這里進行了優化，復用了子項對象。
下面是效果圖：

源碼下載地址：http://download.csdn.net/detail/zhoujianghai/4975604

轉載于:https://www.cnblogs.com/jeekun/p/3182032.html

總結

以上是生活随笔為你收集整理的cocos2d-x CCScrollView和CCTableView的使用（转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。