首页 > 代码库 > Cocos2d-x滚动列表详解(CCScrollView的使用)

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

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

必须实现:

1
2
3
4
5
6
7
8
9
10
11
//触摸到某个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);
选择实现:
1
2
3
4
//设置单元格高亮的状态
    virtual void tableCellHighlight(CCTableView* table, CCTableViewCell* cell);
    //设置单元格非高亮的状态
    virtual void tableCellUnhighlight(CCTableView* table, CCTableViewCell* cell);
必须实现:
1
2
3
//由于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。比如:
1
2
class HelloWorld : public cocos2d::CCLayer,public cocos2d::extension::CCTableViewDelegate,public cocos2d::extension::CCTableViewDataSource{ 
};
3。实现需要的方法(上述列举的三类中, 其中两类必须实现。 还有一类可选。)

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

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


GameInfo.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//
//  GameInfo.h
//  RunGame
//
//  Created by zhanglin on 14-05-14.
//
//
 
#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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
//
//  GameInfo.cpp
//  RunGame
//
//  Created by zhanglin on 14-05-14.
//
//
 
#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);
     
    returnscene;
}
 
bool GameInfo::init()
{
    if( !CCLayer::init() )
    {
        returnfalse;
    }
     
    //获取屏幕大小
    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();
     
    returntrue;
}
 
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)
{
    return6;
}
 
//生成cell
CCTableViewCell* GameInfo::tableCellAtIndex(CCTableView *table, unsigned int idx)
{
    CCString *nameString=CCString::createWithFormat("cell_%d.png",idx);
     
    CCTableViewCell *cell = table->dequeueCell();
     
    if(!cell)
    {
         
        cell = newCCTableViewCell();
         
        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);
 
    }
     
     
    returncell;
     
     
}
 
 
CCSize GameInfo::cellSizeForTable(CCTableView *table)
{
    returnCCSizeMake(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)
{
}