在游戏中经常需要以列表方式显示UI,比如游戏的商城,需要上下滑动来浏览商品列表。CCTableView就可以来实现这个效果,为了更加人性化,我们为CCTableView加上一个滑动条。当滑动CCTableView的时候,滑动条会移动到相应位置。反之当移动滑动条移动的时候CCTableView会移动到相应位置。
滑动条使用CCControlSlider来实现,当触发滑动条回调函数时,修改CCTableView的偏移量为滑动条的值。当滑动CCTableView的时候,修改滑动条的值为CCTableView的偏移量。为了不出现死循环,我用两个布尔变量来控制它们的滑动,因为滑动任何一方时都会触发另外一方修改自己,自身被修改时又会去修改另一方,陷入死循环中导致程序崩溃。
具体实现:
HelloWorld.h
#ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__#include "cocos2d.h"#include "cocos-ext.h"using namespace cocos2d;using namespace cocos2d::extension;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; };#endif // __HELLOWORLD_SCENE_H__
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; } 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; } unsigned int HelloWorld::numberOfCellsInTableView(CCTableView *table) { return 20; }