Cocos2d-x3.1中ListView的使用

工程中添加UIListViewTest类，定义.h和.cpp文件。

//.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;
    }
}

源码下载