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()方法，用于更新！

#include "cocos2d.h"

#include "CCListView.h"

USING_NS_CC;
using namespace cocos2d::extension;

class ListViewDemoLayer: public CCLayer, public CCListViewDelegate
{
private:
    CCLabelTTF *m_InfoLabel;

private:
    // 存放的List数据
    std::list<std::string> *m_pDataList;
    CCListView *m_pListView;
    bool m_bFresh;
    
public:
    ListViewDemoLayer();
    ~ListViewDemoLayer();
    
    virtual bool init();
    
    LAYER_NODE_FUNC(ListViewDemoLayer);
    
    virtual void visit();
    
public:
    // 继承自CCListViewDelegate所需要实现的方法
    virtual void CCListView_numberOfCells(CCListView *listView, CCListViewProtrolData *data);
    virtual void CCListView_cellForRow(CCListView *listView, CCListViewProtrolData *data);
    virtual void CCListView_didClickCellAtRow(CCListView *listView, CCListViewProtrolData *data);
    virtual void CCListView_didScrollToRow(CCListView *listView, CCListViewProtrolData *data);
};

#endif

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

（2）自定义

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

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

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

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

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

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

void ListViewDemoLayer::visit()
{
    CCLayer::visit();
    if (m_bFresh) {
        m_pListView->reload();
        m_bFresh = false;
    }
}

（3）CCListViewDelegate实现

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

返回ListView的条目数

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

定义Cell的样式

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

void ListViewDemoLayer::CCListView_cellForRow(cocos2d::extension::CCListView *listView, cocos2d::extension::CCListViewProtrolData *data)
{
    CCSize listSize = m_pListView->getContentSize();
    CCSize cellSize = CCSizeMake(listSize.width, listSize.height / 5);
    
    CCListViewCell *cell = CCListViewCell::node();
    cell->setOpacity(0);
    cell->setContentSize(cellSize);
    cell->setSelectionColor(ccc4(255, 0, 0, 255));
    data->cell = cell;
    
    std::list<std::string>::iterator it = m_pDataList->begin();
    for (int i=0; i<data->nRow; ++i) {
        ++it;
    }
    CCLabelTTF *cellLabel = CCLabelTTF::labelWithString(((std::string) *it).c_str(), "Arial", 32);
    cellLabel->setPosition(ccp(cellSize.width / 2, cellSize.height / 2));
    cell->addChild(cellLabel);
}

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

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

ListView产生点击之后的回调

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

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

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

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

ListView滑动产生的回调

3.效果

示例代码下载