Cocos2d-x3.1中ListView的使用

//.h
#ifndef __ListViewTest__UIListViewTest__
#define __ListViewTest__UIListViewTest__

#include "cocos2d.h"
#include "ui/CocosGUI.h"
USING_NS_CC;
using namespace ui;//如果使用了ui/CocosGUI.h，则必须实名ui命名空间
//ListView垂直布局
class UIListViewTest_Vertical : public Scene
{
public:
UIListViewTest_Vertical();
~UIListViewTest_Vertical();
bool init();//类创建后初始化，显示界面，与构造函数相比，构造函数是初始化数据成员，也可定义一些精灵和层
void selectedItemEvent(Ref* pSender, ListView::EventType type);//ListView触摸事件

CREATE_FUNC(UIListViewTest_Vertical)//执行::create()函数时使用
Text* _displayValueLabel;//定义一个Text用于显示当前测试信息

__Array* _array;//定义一个数组
};
//ListView水平布局，其他同上
class UIListViewTest_Horizontal : public Scene
{
public:
UIListViewTest_Horizontal();
~UIListViewTest_Horizontal();
bool init();
void selectedItemEvent(Ref* pSender, ListView::EventType type);

CREATE_FUNC(UIListViewTest_Horizontal)
Text* _displayValueLabel;

__Array* _array;
};

#endif /* defined(__ListViewTest__UIListViewTest__) */

.cpp
#include "UIListViewTest.h"
const char* font_UIListViewTest = "fonts/Marker Felt.ttf";//将字体路径定义为变量

// UIListViewTest_Vertical
//构造函数，指针成员函数在初始化列表中初始化
UIListViewTest_Vertical::UIListViewTest_Vertical()
: _displayValueLabel(nullptr)
, _array(nullptr)
{

}
//指针变量析构
UIListViewTest_Vertical::~UIListViewTest_Vertical()
{
CC_SAFE_RELEASE(_array);
}
//init函数，当类创建成功时，立刻执行初始化函数
bool UIListViewTest_Vertical::init()
{
if (Scene::init())
{
Size widgetSize = Director::getInstance()->getWinSize();//获取当前屏幕大小
_displayValueLabel = Text::create("Move by vertical direction", "fonts/Marker Felt.ttf", 32);//显示当前Test信息
_displayValueLabel->setAnchorPoint(Vec2(0.5f, -1.0f));//设置锚点
_displayValueLabel->setPosition(Vec2(widgetSize.width / 2.0f,
widgetSize.height / 2.0f + _displayValueLabel->getContentSize().height * 1.5f));
addChild(_displayValueLabel);

//同上
Text* alert = Text::create("ListView vertical", "fonts/Marker Felt.ttf", 30);
alert->setColor(Color3B(159, 168, 176));
alert->setPosition(Vec2(widgetSize.width / 2.0f,
widgetSize.height / 2.0f - alert->getSize().height * 7.5f));
addChild(alert);
//创建数组
_array = Array::create();
CC_SAFE_RETAIN(_array);
for (int i = 0; i < 20; ++i)//数组存放button的名字
{
__String* ccstr = __String::createWithFormat("listview_item_%d", i);
_array->addObject(ccstr);//也可用pushback函数
}

// Create the list view ex
ListView* listView = ListView::create();//创建ListView
// set list view ex direction
listView->setDirection(ui::ScrollView::Direction::VERTICAL);//设置ListView布局方向
listView->setTouchEnabled(true);//可触摸
listView->setBounceEnabled(true);//设置反弹效果
listView->setBackGroundImage("green_edit.png");//以图片初始化背景
listView->setBackGroundImageScale9Enabled(true);//设置九妹儿
listView->setSize(Size(480, 240));//设置ListView大小
listView->ignoreContentAdaptWithSize(false);//开启锚点设置，false可更改锚点，true不可更改，Layer默认为point(0,0),其他Node为Point(0.5,0.5)
listView->setAnchorPoint(Vec2(0.5, 0.5));//设置锚点，即锚点放在节点setPosition的位置，0，0：表示节点左下角；1，1：表示节点右上角；0.5，0.5表示节点中点
listView->setPosition(Vec2((widgetSize.width / 2.0f + listView->getSize().width) / 2.0f,(widgetSize.height / 2.0f + listView->getSize().height) / 2.0f));
listView->addEventListener(CC_CALLBACK_2(UIListViewTest_Vertical::selectedItemEvent, this));//事件触发，CC_CALLBACK_参考前面文章
addChild(listView);

// create model 创建一个模型
Button* default_button = Button::create("backtotoppressed.png", "backtotopnormal.png");
default_button->setName("Title Button");

Layout* default_item = Layout::create();
default_item->setTouchEnabled(true);
default_item->setSize(default_button->getSize());
default_button->setPosition(Vec2(default_item->getSize().width / 2.0f,
default_item->getSize().height / 2.0f));
default_item->addChild(default_button);

// set model 将创建的模板设置为项目模板
listView->setItemModel(default_item);

// add default item
ssize_t count = _array->count();
for (int i = 0; i < count / 4; ++i)
{
listView->pushBackDefaultItem();//加载默认项目模板5个
}
// insert default item
for (int i = 0; i < count / 4; ++i)
{
listView->insertDefaultItem(0);//插入默认模板
}

// add custom item  //添加自定义模板
for (int i = 0; i < count / 4; ++i)
{
Button* custom_button = Button::create("button.png", "buttonHighlighted.png");
custom_button->setName("Title Button");
custom_button->setScale9Enabled(true);
custom_button->setSize(default_button->getSize());

Layout *custom_item = Layout::create();
custom_item->setSize(custom_button->getSize());
custom_button->setPosition(Vec2(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f));
custom_item->addChild(custom_button);

listView->pushBackCustomItem(custom_item);
}
// insert custom item 插入自定义模板
Vector<Widget*>& items = listView->getItems();
ssize_t items_count = items.size();
for (int i = 0; i < count / 4; ++i)
{
Button* custom_button = Button::create("button.png", "buttonHighlighted.png");
custom_button->setName("Title Button");
custom_button->setScale9Enabled(true);
custom_button->setSize(default_button->getSize());

Layout *custom_item = Layout::create();
custom_item->setSize(custom_button->getSize());
custom_button->setPosition(Vec2(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f));
custom_item->addChild(custom_button);

listView->insertCustomItem(custom_item, items_count);
}

// set item data  设置item的标题
items_count = items.size();
for (int i = 0; i < items_count; ++i)
{
Widget* item = listView->getItem(i);
Button* button = static_cast<Button*>(item->getChildByName("Title Button"));
ssize_t index = listView->getIndex(item);
button->setTitleText(static_cast<__String*>(_array->getObjectAtIndex(index))->getCString());
}

// remove last item  删除最后一个item
listView->removeLastItem();

// remove item by index
items_count = items.size(); 删除最后一个item
listView->removeItem(items_count - 1);

// set all items layout gravity 设置布局
listView->setGravity(ListView::Gravity::CENTER_VERTICAL);

// set items margin
listView->setItemsMargin(2.0f);

return true;
}

return false;
}
//事件分发
void UIListViewTest_Vertical::selectedItemEvent(Ref *pSender, ListView::EventType type)
{
switch (type)
{
case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_START:
{
ListView* listView = static_cast<ListView*>(pSender);
CC_UNUSED_PARAM(listView);
CCLOG("select child start index = %ld", listView->getCurSelectedIndex());
break;
}
case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_END:
{
ListView* listView = static_cast<ListView*>(pSender);
CC_UNUSED_PARAM(listView);
CCLOG("select child end index = %ld", listView->getCurSelectedIndex());
break;
}
default:
break;
}
}

// UIListViewTest_Horizontal
//分析同上
UIListViewTest_Horizontal::UIListViewTest_Horizontal()
: _displayValueLabel(nullptr)
, _array(nullptr)
{
}

UIListViewTest_Horizontal::~UIListViewTest_Horizontal()
{
CC_SAFE_RELEASE(_array);
}

bool UIListViewTest_Horizontal::init()
{
if (Scene::init())
{
Size widgetSize = Director::getInstance()->getWinSize();//_widget->getSize();

_displayValueLabel = Text::create("Move by horizontal direction", "fonts/Marker Felt.ttf", 32);
_displayValueLabel->setAnchorPoint(Vec2(0.5f, -1.0f));
_displayValueLabel->setPosition(Vec2(widgetSize.width / 2.0f,
widgetSize.height / 2.0f
+ _displayValueLabel->getContentSize().height * 1.5f));

addChild(_displayValueLabel);

Text* alert = Text::create("ListView horizontal", "fonts/Marker Felt.ttf", 30);
alert->setColor(Color3B(159, 168, 176));
alert->setPosition(Vec2(widgetSize.width / 2.0f, widgetSize.height / 2.0f - alert->getSize().height * 3.075f));
addChild(alert);

_array = Array::create();
CC_SAFE_RETAIN(_array);
for (int i = 0; i < 20; ++i)
{
__String* ccstr = __String::createWithFormat("listview_item_%d", i);
_array->addObject(ccstr);
}

// Create the list view ex
ListView* listView = ListView::create();
// set list view ex direction
listView->setDirection(ui::ScrollView::Direction::HORIZONTAL);
listView->setTouchEnabled(true);
listView->setBounceEnabled(true);
listView->setBackGroundImage("");
listView->setBackGroundImageScale9Enabled(true);
listView->setSize(Size(240, 130));
listView->setPosition(Vec2((widgetSize.width / 2.0f + listView->getSize().width) / 2.0f,(widgetSize.height / 2.0f + listView->getSize().height) / 2.0f));
listView->addEventListener(CC_CALLBACK_2(UIListViewTest_Horizontal::selectedItemEvent, this));
addChild(listView);

// create model
Button* default_button = Button::create("backtotoppressed.png", "backtotopnormal.png");
default_button->setName("Title Button");

Layout *default_item = Layout::create();
default_item->setTouchEnabled(true);
default_item->setSize(default_button->getSize());
default_button->setPosition(Vec2(default_item->getSize().width / 2.0f, default_item->getSize().height / 2.0f));
default_item->addChild(default_button);

// set model
listView->setItemModel(default_item);

// add default item
ssize_t count = _array->count();
for (int i = 0; i < count / 4; ++i)
{
listView->pushBackDefaultItem();
}
// insert default item
for (int i = 0; i < count / 4; ++i)
{
listView->insertDefaultItem(0);
}

// add custom item
for (int i = 0; i < count / 4; ++i)
{
Button* custom_button = Button::create("button.png", "buttonHighlighted.png");
custom_button->setName("Title Button");
custom_button->setScale9Enabled(true);
custom_button->setSize(default_button->getSize());

Layout* custom_item = Layout::create();
custom_item->setSize(custom_button->getSize());
custom_button->setPosition(Vec2(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f));
custom_item->addChild(custom_button);

listView->pushBackCustomItem(custom_item);
}
// insert custom item
Vector<Widget*>& items = listView->getItems();
ssize_t items_count = items.size();
for (int i = 0; i < count / 4; ++i)
{
Button* custom_button = Button::create("button.png", "buttonHighlighted.png");
custom_button->setName("Title Button");
custom_button->setScale9Enabled(true);
custom_button->setSize(default_button->getSize());

Layout* custom_item = Layout::create();
custom_item->setSize(custom_button->getSize());
custom_button->setPosition(Vec2(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f));
custom_item->addChild(custom_button);

listView->insertCustomItem(custom_item, items_count);
}

// set item data
items_count = items.size();
for (int i = 0; i < items_count; ++i)
{
Widget *item = listView->getItem(i);
Button *button = static_cast<Button*>(item->getChildByName("Title Button"));
ssize_t index = listView->getIndex(item);
button->setTitleText(static_cast<__String*>(_array->getObjectAtIndex(index))->getCString());
}
// remove last item
listView->removeLastItem();

// remove item by index
items_count = items.size();
listView->removeItem(items_count - 1);

// set all items layout gravity
listView->setGravity(ListView::Gravity::CENTER_VERTICAL);

// set items margin
listView->setItemsMargin(2);

return true;
}

return false;
}

void UIListViewTest_Horizontal::selectedItemEvent(Ref *pSender, ListView::EventType type)
{
switch (type)
{
case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_START:
{
ListView* listView = static_cast<ListView*>(pSender);
CC_UNUSED_PARAM(listView);
CCLOG("select child start index = %ld", listView->getCurSelectedIndex());
break;
}
case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_END:
{
ListView* listView = static_cast<ListView*>(pSender);
CC_UNUSED_PARAM(listView);
CCLOG("select child end index = %ld", listView->getCurSelectedIndex());
break;
}
default:
break;
}
}