轉(zhuǎn)載請(qǐng)注明來(lái)自：Alex Zhou的程序世界，本文鏈接：http://codingnow.cn/cocos2d-x/1024.html

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

?

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

class GalleryLayer : public cocos2d::CCLayer ,public CCScrollViewDelegate { public:virtual bool init(); void menuCloseCallback(CCObject* pSender);CREATE_FUNC(GalleryLayer);public://scrollview滾動(dòng)的時(shí)候會(huì)調(diào)用void scrollViewDidScroll(CCScrollView* view);//scrollview縮放的時(shí)候會(huì)調(diào)用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://根據(jù)手勢(shì)滑動(dòng)的距離和方向滾動(dòng)圖層void adjustScrollView(float offset);CCScrollView *m_pScrollView;CCPoint m_touchPoint;int m_nCurPage; };

類(lèi)GalleryLayer繼承了CCScrollViewDelegate，實(shí)現(xiàn)了它的兩個(gè)純虛函數(shù)，主要是為了當(dāng)scrollview滾動(dòng)和縮放時(shí)回調(diào)這兩函數(shù)，這樣我們就可以在這兩函數(shù)中做相關(guān)操作了。

(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);} }

這里一共有三張圖，是從捕魚(yú)達(dá)人中拿出來(lái)的背景圖，當(dāng)滾完三張圖時(shí)就跳轉(zhuǎn)到ListViewLayer場(chǎng)景去，上面的代碼比較容易懂。
首先創(chuàng)建一個(gè)CCLayer，包含三張背景圖，設(shè)置CCLayer的ContentSize，并設(shè)置三張圖片的位置
然后設(shè)置CCLayer為CCScrollview的內(nèi)容，并設(shè)置CCScrollView的顯示區(qū)域。
最后根據(jù)用戶(hù)滑動(dòng)的方向和距離，通過(guò)設(shè)置scrollview的setContentOffset，滾動(dòng)視圖。
CCScrollview.h文件中封裝了一個(gè)枚舉類(lèi)型，一共有四個(gè)方向，常用橫向和縱向，這里使用了橫向。

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

下面來(lái)看看這部分的效果：

2. 現(xiàn)在來(lái)實(shí)現(xiàn)列表展示(ListView)的效果
（1）創(chuàng)建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);//每一項(xiàng)的寬度和高度virtual cocos2d::CCSize cellSizeForTable(cocos2d::extension::CCTableView *table);//生成列表每一項(xiàng)的內(nèi)容virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);//一共多少項(xiàng)virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);CREATE_FUNC(ListViewLayer); };

?

ListViewLayer繼承了CCTableViewDataSource和CCTableViewDelegate。這兩個(gè)抽象類(lèi)封裝了幾個(gè)有用的函數(shù)，我們?cè)谙旅娴脑创a中將實(shí)現(xiàn)它們。
（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) { }

首先需要?jiǎng)?chuàng)建CCTableView，設(shè)置它的顯示區(qū)域和顯示方向，這里使用了縱向。設(shè)置每個(gè)子項(xiàng)的寬度和高度，子項(xiàng)的數(shù)量以及每個(gè)子項(xiàng)對(duì)應(yīng)的內(nèi)容。每個(gè)子項(xiàng)是一個(gè)CCTableViewCell，這里進(jìn)行了優(yōu)化，復(fù)用了子項(xiàng)對(duì)象。
下面是效果圖：

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

轉(zhuǎn)載于:https://www.cnblogs.com/jeekun/p/3182032.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。