Cocos2d-x学习（八）：cocos2d-x 2.0 中CCListView的用法

cocos2d-x 2.0 版更新了，把opengl 1.1 替换为opengl 2.0，这个版本只能在iphone 3gs，android 2.2 以上版本才能跑，并且android的模拟器也不支持！

这次更新终于更新了几个UI控件，比如Button，Slider，ListView（本来打算自己写个ListView的，这下省事了，看到注释，这里要感谢网龙公司了，当然，还要感谢cocos2d-x的整合）。

但是这个tests中没有加入对ListView的使用教程，只有在CCTextureWatcher中有简单的提到，但是CCTextureWatcher是缓存图片纹理的查看类，并不是单纯的ListView的教程介绍，考虑到以后肯定会用到，所以先记录一下简单的用法和原理。

1.CCListView的设计，主要分为3部分

（1）ListView容器

ListView容器就是盛放Cell的大容器，CCListView继承于CCLayerColor，主要是处理显示样式，监听触摸事件，更新的操作。

（2）Cell子容器

CCListViewCell也是继承于CCLayerColor，它处理的就很单纯了，就是负责ListView中每一项（Item）的显示

（3）代理方法

CCListViewDelegate定义了关于CCListView的回调接口，这个和ios app开发中TabView的原理是一样的。

（可能从android刚刚转到cocos2d-x的开发的我们不是很习惯这种设计，其实和android是非常类似的，Cell子容器和代理方法，不就是android中的ListView的各种adapter吗？只是adapter整合了它们，在初始化adapter的时候会将数据和显示规则都定义好）

2.简单用法

（1）类定义

我想一般的用法会是自定义一个层作为ListView添加到其它层上，首先继承CCLayer，还要继承CCListViewDelegate，用来处理显示和回调CCListView，当然也可以继承于CCObject，但是要注意的是一定要定义一个visit()方法，用于更新！

[cpp] view plaincopy

1. #include "cocos2d.h"  
2.   
3. #include "CCListView.h"  
4.   
5. USING_NS_CC;  
6. using namespace cocos2d::extension;  
7.   
8. class ListViewDemoLayer: public CCLayer, public CCListViewDelegate  
9. {  
10. private:  
11.     CCLabelTTF *m_InfoLabel;  
12.   
13. private:  
14.     // 存放的List数据  
15.     std::list<std::string> *m_pDataList;  
16.     CCListView *m_pListView;  
17.     bool m_bFresh;  
18.       
19. public:  
20.     ListViewDemoLayer();  
21.     ~ListViewDemoLayer();  
22.       
23.     virtual bool init();  
24.       
25.     LAYER_NODE_FUNC(ListViewDemoLayer);  
26.       
27.     virtual void visit();  
28.       
29. public:  
30.     // 继承自CCListViewDelegate所需要实现的方法  
31.     virtual void CCListView_numberOfCells(CCListView *listView, CCListViewProtrolData *data);  
32.     virtual void CCListView_cellForRow(CCListView *listView, CCListViewProtrolData *data);  
33.     virtual void CCListView_didClickCellAtRow(CCListView *listView, CCListViewProtrolData *data);  
34.     virtual void CCListView_didScrollToRow(CCListView *listView, CCListViewProtrolData *data);  
35. };  
36.   
37. #endif  

（PS：注意那鬼魅的命名作用域）

（2）自定义

用一个list<string>对象作为数据模拟显示，（如果是做道具店，装备商店列表，可能就是自定义类型的list了，因为数据结构会比较复杂，这里只是一个简单的字符串的例子而已）

[cpp] view plaincopy

1. // 初始化List数据  
2.         m_pDataList = new std::list<std::string>;  
3.         for (int i=0; i<15; i++) {  
4.             char info[20];  
5.             sprintf(info, "Cell %d", i);  
6.             m_pDataList->push_back(info);  
7.         }  

定义一个CCListView对象，这里最重要的是要记得一定要设置其ContentSize()，如果不设置，则默认为0，什么都没有

[cpp] view plaincopy

1. // 初始化List数据  
2.         m_pDataList = new std::list<std::string>;  
3.         for (int i=0; i<15; i++) {  
4.             char info[20];  
5.             sprintf(info, "Cell %d", i);  
6.             m_pDataList->push_back(info);  
7.         }  

还定义了一个CCLabelTTF用于显示ListView的信息

visit()方法还是很重要的，这是在cocos2d-x引擎每帧更新的时候都会调用的（比如动画的变化。。。），我们在这里可以判断当前的ListView需要不需要更新，当ListView有增减项的时候，为了达到显示同步，是需要更新的，调用listView.reload()

[cpp] view plaincopy

1. void ListViewDemoLayer::visit()  
2. {  
3.     CCLayer::visit();  
4.     if (m_bFresh) {  
5.         m_pListView->reload();  
6.         m_bFresh = false;  
7.     }  
8. }  

（3）CCListViewDelegate实现

virtual void CCListView_numberOfCells(CCListView *listView,CCListViewProtrolData *data);

返回ListView的条目数

virtual void CCListView_cellForRow(CCListView *listView,CCListViewProtrolData *data);

定义Cell的样式

在这里只简单的定义一个文本项，并且设置选中的背景色之类的

[cpp] view plaincopy

1. void ListViewDemoLayer::CCListView_cellForRow(cocos2d::extension::CCListView *listView, cocos2d::extension::CCListViewProtrolData *data)  
2. {  
3.     CCSize listSize = m_pListView->getContentSize();  
4.     CCSize cellSize = CCSizeMake(listSize.width, listSize.height / 5);  
5.       
6.     CCListViewCell *cell = CCListViewCell::node();  
7.     cell->setOpacity(0);  
8.     cell->setContentSize(cellSize);  
9.     cell->setSelectionColor(ccc4(255, 0, 0, 255));  
10.     data->cell = cell;  
11.       
12.     std::list<std::string>::iterator it = m_pDataList->begin();  
13.     for (int i=0; i<data->nRow; ++i) {  
14.         ++it;  
15.     }  
16.     CCLabelTTF *cellLabel = CCLabelTTF::labelWithString(((std::string) *it).c_str(), "Arial", 32);  
17.     cellLabel->setPosition(ccp(cellSize.width / 2, cellSize.height / 2));  
18.     cell->addChild(cellLabel);  
19. }  

（PS：这个机制是类似于android中BaseAdapter的getView()方法的）

virtual void CCListView_didClickCellAtRow(CCListView *listView,CCListViewProtrolData *data);

ListView产生点击之后的回调

简单的修改一下显示文本，根据data->nRow得到当前项所在位置

[cpp] view plaincopy

1. void ListViewDemoLayer::CCListView_didClickCellAtRow(cocos2d::extension::CCListView *listView, cocos2d::extension::CCListViewProtrolData *data)  
2. {  
3.     char info[100];  
4.     sprintf(info, "No. %d Row", data->nRow);  
5.     m_InfoLabel->setString(info);  
6. }  

（PS：这个机制类似于android中ListView.setOnItemClickListener()）

virtual void CCListView_didScrollToRow(CCListView *listView,CCListViewProtrolData *data);

ListView滑动产生的回调

3.效果

示例代码下载