带侧滑条的tableview

先简单讲解一下TableView的使用方法：

//点击cell的响应事件void ChooseLevelLayer::tableCellTouched(TableView* table, TableViewCell* cell){    CCLOG("cell touched at index: %ld", cell->getIdx());    //getIdx是从0开始    for(int i=1;i<11;i++){        if (i == cell->getIdx()) {            auto gamelayer = GameLayer::createScene();            Director::getInstance()->replaceScene(TransitionFadeTR::create(1.0f,gamelayer));        }    }}Size ChooseLevelLayer::tableCellSizeForIndex(TableView *table, ssize_t idx){    return Size(330, 330);}//这里每创建一个cell都会调用一次TableViewCell* ChooseLevelLayer::tableCellAtIndex(TableView *table, ssize_t idx){    auto stringcell = String::createWithFormat("%ld.png", idx+1);    auto string = String::createWithFormat("%ld", idx+1);    TableViewCell *cell = table->dequeueCell();    if (!cell) {        cell = new TableViewCell();        cell->autorelease();            auto sprite = Sprite::create(stringcell->getCString());            sprite->setAnchorPoint(Vec2::ZERO);            sprite->setPosition(Vec2(0, 0));            cell->addChild(sprite);                        auto label = Label::createWithSystemFont(string->getCString(), "Helvetica", 30.0);        label->setColor(Color3B::GREEN);        label->setPosition(Vec2::ZERO);label->setAnchorPoint(Vec2::ZERO);        label->setTag(123);        cell->addChild(label,5);    }    else    {        //这里也是不能少的。原因不明        auto label = (Label*)cell->getChildByTag(123);        label->setString(string->getCString());                auto sprite = Sprite::create(stringcell->getCString());        sprite->setAnchorPoint(Vec2::ZERO);        sprite->setPosition(Vec2(0, 0));        cell->addChild(sprite);    }        return cell;}ssize_t ChooseLevelLayer::numberOfCellsInTableView(TableView *table){    return 10;}

在游戏中经常需要以列表方式显示UI，比如游戏的商城，需要上下滑动来浏览商品列表。CCTableView就可以来实现这个效果，为了更加人性化，我们为CCTableView加上一个滑动条。当滑动CCTableView的时候，滑动条会移动到相应位置。反之当移动滑动条移动的时候CCTableView会移动到相应位置。

滑动条使用CCControlSlider来实现，当触发滑动条回调函数时，修改CCTableView的偏移量为滑动条的值。当滑动CCTableView的时候，修改滑动条的值为CCTableView的偏移量。为了不出现死循环，我用两个布尔变量来控制它们的滑动，因为滑动任何一方时都会触发另外一方修改自己，自身被修改时又会去修改另一方，陷入死循环中导致程序崩溃。

 

具体实现：
HelloWorld.h

#pragma once#include "cocos2d.h"#include "cocos-ext.h"USING_NS_CC;USING_NS_CC_EXT;class HelloWorld : public CCLayer, public CCTableViewDataSource, public CCTableViewDelegate{public:    HelloWorld();    ~HelloWorld();    virtual bool init();      static CCScene* scene();      CREATE_FUNC(HelloWorld);    virtual void scrollViewDidScroll(CCScrollView *view);    virtual void scrollViewDidZoom(CCScrollView *view) {}    virtual void tableCellTouched(CCTableView *table, CCTableViewCell *cell){}    virtual CCSize tableCellSizeForIndex(CCTableView *table, unsigned int idx);    virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx);    virtual unsigned int numberOfCellsInTableView(CCTableView *table);private:    void valueChanged( CCObject *sender, CCControlEvent controlEvent );private:    bool m_bTable;    bool m_bSlider;    CCSize winSize;};

 

HelloWorld.cpp

#include "HelloWorldScene.h"HelloWorld::HelloWorld(){    winSize = CCDirector::sharedDirector()->getWinSize();}HelloWorld::~HelloWorld(){}CCScene* HelloWorld::scene(){    CCScene *scene = CCScene::create();        HelloWorld *layer = HelloWorld::create();    scene->addChild(layer);    return scene;}bool HelloWorld::init(){    if ( !CCLayer::init() )    {        return false;    }     CCControlSlider *slider = CCControlSlider::create("sliderTrack.png","sliderTrack.png" ,"sliderThumb.png");    slider->setAnchorPoint(ccp(0.5f, 1.0f));    slider->setMinimumValue( -(60*20-250) );   // 单个cell的高度 × cell的总数 - CCTableView的高度    slider->setMaximumValue(0);    slider->setPosition(ccp(winSize.width/2+70, winSize.height/2));    slider->setRotation(90);    slider->setValue(-(60*20-250));            // 默认为0    slider->setTag(1);    addChild(slider);        // 监听滑动条    slider->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);        CCTableView *tableView = CCTableView::create(this, CCSizeMake(60, 250));    tableView->setDirection(kCCScrollViewDirectionVertical);    tableView->setPosition(ccp(winSize.width/2-30, winSize.height/2-120));    tableView->setDelegate(this);    tableView->setTag(0);    addChild(tableView);    tableView->setVerticalFillOrder(kCCTableViewFillTopDown);    tableView->reloadData();    return true;}// 滑动条回调

void HelloWorld::valueChanged( CCObject *sender, CCControlEvent controlEvent ){    m_bTable = false;    if ( m_bSlider )    {        CCTableView *tableView = (CCTableView *)getChildByTag(0);        CCControlSlider *slider = (CCControlSlider *)getChildByTag(1);        tableView->setContentOffset(CCSizeMake(0, slider->getValue()));    }    m_bTable = true;}// 拖动CCTableView触发

void HelloWorld::scrollViewDidScroll(CCScrollView* view){    m_bSlider = false;    if ( m_bTable  )    {        CCTableView *tableView = (CCTableView *)getChildByTag(0);        CCControlSlider *slider = (CCControlSlider *)getChildByTag(1);        slider->setValue(tableView->getContentOffset().y);    }    m_bSlider = true;}//cell的宽、高CCSize HelloWorld::tableCellSizeForIndex(CCTableView *table, unsigned int idx){     return CCSizeMake(60, 60);}CCTableViewCell* HelloWorld::tableCellAtIndex(CCTableView *table, unsigned int idx){    CCString *string = CCString::createWithFormat("%d", idx);    CCTableViewCell *cell = table->dequeueCell();    if (!cell)    {        cell = new CCTableViewCell();        cell->autorelease();        CCSprite *sprite = CCSprite::create("Icon.png");        sprite->setAnchorPoint(CCPointZero);        sprite->setPosition(ccp(0, 0));        cell->addChild(sprite);        CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Helvetica", 20.0);        label->setPosition(CCPointZero);        label->setAnchorPoint(CCPointZero);        label->setTag(123);        cell->addChild(label);    }    else    {        CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);        label->setString(string->getCString());    }    return cell;}//cell的数量unsigned int HelloWorld::numberOfCellsInTableView(CCTableView *table){    return 20;}