cocos2d-x - 滚动列表(类似天天酷跑道具菜单)详解(CCScrollView的使用)

今天要写一个滚动列表功能,类似下面这样。（图片资源都是自己从天天酷跑里面抠的,仅用于学习方便）

首先,这样一个列表就和iOS里面的UITableView没什么两样,当然,Android中肯定也存在类似的控件。

在cocos2d-x引擎中参照ios中的UITableView实现了一个叫做CCTableView的类，用于创建列表，对于熟悉ios程序设计的人来说，这个内容应该是很好理解的。

下面就介绍下CCTableView。

首先,mark几个比较好的博文。

Cocos2d-x CCTableView实现列表：http://www.tuicool.com/articles/viaQn2

cocos2d-x CCTableView：http://www.cnblogs.com/sevenyuan/archive/2013/07/25/3214534.html

cocos2d-x CCScrollView和CCTableView的使用:http://www.tuicool.com/articles/fuemq2

另外.先介绍下涉及的几个常用方法。

必须实现：

//触摸到某个cell的事件    virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);        //定制每个cell的size    virtual cocos2d::CCSize tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx);        //定制每个cell的内容    virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);        //确定这个tableview的cell行数    virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);

选择实现：
 

//设置单元格高亮的状态    virtual void tableCellHighlight(CCTableView* table, CCTableViewCell* cell);    //设置单元格非高亮的状态    virtual void tableCellUnhighlight(CCTableView* table, CCTableViewCell* cell);

必须实现：

//由于CCTableView是继承CCScrollView，所以要继承这两个方法    virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view) {}    virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view) {}

下面介绍实现方法。

1。使用的时候要注意要引入扩展库文件： #include "cocos-ext.h" ,并且最好要添加： USING_NS_CC_EXT ; 这样就不用老是加前缀cocos2d::extension。

2。要继承CCTableView的两个代理 CCTableViewDelegate 和 CCTableViewDataSource。比如:

class HelloWorld : public cocos2d::CCLayer,public cocos2d::extension::CCTableViewDelegate,public cocos2d::extension::CCTableViewDataSource{};

3。实现需要的方法（上述列举的三类中, 其中两类必须实现。 还有一类可选。）

简单三不,就能定制属于你自己的列表了。很简单吧。

下面给出上述天天酷跑道具列表的实现代码。

GameInfo.h

////  GameInfo.h//  RunGame////  Created by 余龙泽 on 14-3-28.////#ifndef __RunGame__GameInfo__#define __RunGame__GameInfo__#include <iostream>#include "cocos2d.h"#include "cocos-ext.h"USING_NS_CC_EXT;//cocos2dx定义的宏using namespace cocos2d;class GameInfo : public cocos2d::CCLayer,public cocos2d::extension::CCTableViewDelegate,cocos2d::extension::CCTableViewDataSource{public:    virtual bool init();    static cocos2d::CCScene* scene();        void menuCloseCallback(CCObject* pSender);        public:        //CCTableViewDelegate继承自CCScrollViewDelegate    virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view);        virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view);        //点击哪个cell    virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);    //每个cell的size    virtual cocos2d::CCSize cellSizeForTable(cocos2d::extension::CCTableView *table);    //生成cell    virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);    //cell的数量    virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);        //按下去的时候，就是高亮显示，这里可以设置高亮状态    virtual void tableCellHighlight(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);        //松开的时候，取消高亮状态    virtual void tableCellUnhighlight(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);                void scrollBar(cocos2d::extension::CCTableView* table);    CREATE_FUNC(GameInfo);};#endif /* defined(__RunGame__GameInfo__) */

GameInfo.cpp

////  GameInfo.cpp//  RunGame////  Created by 余龙泽 on 14-3-28.////#include "GameInfo.h"#include "SimpleAudioEngine.h"using namespace cocos2d;using namespace CocosDenshion;CCScene* GameInfo::scene(){    CCScene *scene = CCScene::create();        GameInfo *layer = GameInfo::create();    scene->addChild(layer);        return scene;}bool GameInfo::init(){    if ( !CCLayer::init() )    {        return false;    }        //获取屏幕大小    CCSize visibSize=CCDirector::sharedDirector()->getVisibleSize();        //设置背景    CCSprite *bg_ = CCSprite::create("pic_InfoBg.png");    this->setPosition(ccp(visibSize.width/2, visibSize.height/2));    this->addChild(bg_);        //添加列表    CCTableView *tableView=CCTableView::create(this, CCSizeMake(620, 450));        tableView->setDirection(kCCScrollViewDirectionVertical);        tableView->setPosition(ccp(-525, -275));        tableView->setAnchorPoint(ccp(0, 0));    tableView->setDelegate(this);        tableView->setVerticalFillOrder(kCCTableViewFillTopDown);        this->addChild(tableView,1);        tableView->reloadData();        return true;}void GameInfo::menuCloseCallback(CCObject* pSender){    CCDirector::sharedDirector()->end();#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)    exit(0);#endif}//cell的数量unsigned int GameInfo::numberOfCellsInTableView(CCTableView *table){    return 6;}//生成cellCCTableViewCell* GameInfo::tableCellAtIndex(CCTableView *table, unsigned int idx){    CCString *nameString=CCString::createWithFormat("cell_%d.png",idx);        CCTableViewCell *cell = table->dequeueCell();        if (!cell)    {                cell = new CCTableViewCell();                cell->autorelease();                //设置当前cell图片        CCSprite *iconSprite = CCSprite::create(nameString->getCString());        iconSprite->setAnchorPoint(CCPointZero);        iconSprite->setPosition(ccp(0, 0));        iconSprite->setTag(123);        cell->addChild(iconSprite);            }    else    {                //创建了就不需要再重新创建了，不然你会发现图片跟文字都不对        CCTexture2D *aTexture=CCTextureCache::sharedTextureCache()->addImage(nameString->getCString());                CCSprite *pSprite=(CCSprite *)cell->getChildByTag(123);                pSprite->setTexture(aTexture);    }            return cell;        }CCSize GameInfo::cellSizeForTable(CCTableView *table){    return CCSizeMake(605, 105);}void GameInfo::tableCellHighlight(CCTableView *table, CCTableViewCell *cell){    }void GameInfo::tableCellUnhighlight(CCTableView *table, CCTableViewCell *cell){}void GameInfo::tableCellTouched(CCTableView *table, CCTableViewCell *cell){    CCBlink *blink_ = CCBlink::create(1.0f, 7);    cell->runAction(blink_);}void GameInfo::scrollViewDidScroll(cocos2d::extension::CCScrollView *view){}void GameInfo::scrollViewDidZoom(cocos2d::extension::CCScrollView *view){}

写到这里,基本差不多了。

如果需要上述demo的话.可以留下邮箱我单独发送。

学习的路上,与君共勉。