工程中新增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;
    }
}