Cocos2d-x学习(八):cocos2d-x 2.0 中CCListView的用法

时间:2023-02-07 22:57:00

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.效果

Cocos2d-x学习(八):cocos2d-x 2.0 中CCListView的用法


Cocos2d-x学习(八):cocos2d-x 2.0 中CCListView的用法


示例代码下载