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 
#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;
}

//生成cell
CCTableViewCell* 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的话.可以留下邮箱我单独发送。

学习的路上,与君共勉。