ListView 两列多行实现

ListView 两行多列实现

ListView只能添加Layout对象，不能添加Node的非Widget对象

1.使用cocosStudio1.6制作出 ListView 的界面

2.手动向 ListView 中添加内容

3.将要添加的内容也使用 cocosStudio 制作出来

4.然后创建一个新的类用来获取 将要添加的内容

5.创建出来多个 将要添加的内容

6.创建一个cocos2d::ui::Layout 将其包裹起来，并设置其各自的位置，(本代码就添加两列)

7.将创建的多个cocos2d::ui::Layout一次添加到ListView中(m_pListView->pushBackCustomItem(pLayout1);)

8.m_pListView->pushBackCustomItem(pLayout1);

　　添加的是：每调用一次就添加一行，下次再调用的时候就将其添加到下一行(本代码是竖直中心对齐)

代码：(未优化)

HelloWorld.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

// 使用 cocosStudio 1.6 制作的头文件
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;
using namespace cocos2d::ui; 

class HelloWorld : public cocos2d::CCLayer
{
public:
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  

    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::CCScene* scene();
    
    // a selector callback
    void menuCloseCallback(CCObject* pSender);
    void   scrollCallBack(CCObject* object , ScrollviewEventType type);

    // implement the "static node()" method manually
    CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

HelloWorld.cpp

#include "HelloWorldScene.h"
#include "ListViewItem.h"
#include "cocos-ext.h"

USING_NS_CC_EXT;

USING_NS_CC;

CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();
    
    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    

    //cocos2d::ui::Widget* LV = GUIReader::shareReader()->widgetFromJsonFile("LV_1.json"); // LV_1.ExportJson
    //UILayer*  m_pUIlayer = UILayer::create();
    //m_pUIlayer->addWidget(LV);
    //this->addChild(m_pUIlayer);
    //cocos2d::ui::UIListView* m_pHeroList = dynamic_cast<cocos2d::ui::UIListView*>(m_pUIlayer->getWidgetByName("ListView_1"));
    //m_pHeroList->addEventListenerScrollView(this,SEL_ScrollViewEvent(&HelloWorld::scrollCallBack));
    //LV->setTouchEnabled(true);



    // 以下使用的必须是json文件
    cocos2d::ui::Widget *m_pWidget = GUIReader::shareReader()->widgetFromJsonFile("ListView_1/ListView_1.json");
    // 创建一个可以装Widge的一个层
    cocos2d::ui::UILayer *m_pUIlayer = cocos2d::ui::UILayer::create();
    // 使用 addWidget 方法加载 cocosStudio制作的json文件
    m_pUIlayer->addWidget(m_pWidget);
    // 将 UILayer 添加到场景中
    this->addChild(m_pUIlayer);
    
    // 获取文件中的 ListView 列表容器
    cocos2d::ui::UIListView *m_pListView = dynamic_cast<cocos2d::ui::UIListView*>(m_pUIlayer->getWidgetByName("dylv_twolistview"));
    // 添加时间交互
    m_pListView->addEventListenerScrollView(this, SEL_ScrollViewEvent(&HelloWorld::scrollCallBack));

    // 获取按钮
    cocos2d::ui::UIButton *button = dynamic_cast<cocos2d::ui::UIButton*>(m_pUIlayer->getWidgetByName("dybtn_button"));

    // 创建一个 layout 用来添加另一个 cocosStudio 导出的 json 文件
    cocos2d::ui::Layout *pLayout1 = cocos2d::ui::Layout::create();
    cocos2d::ui::Layout *pLayout2 = cocos2d::ui::Layout::create();
    cocos2d::ui::Layout *pLayout3 = cocos2d::ui::Layout::create();
    cocos2d::ui::Layout *pLayout4 = cocos2d::ui::Layout::create();
    cocos2d::ui::Layout *pLayout5 = cocos2d::ui::Layout::create();
    cocos2d::ui::Layout *pLayout6 = cocos2d::ui::Layout::create();
    cocos2d::ui::Layout *pLayout7 = cocos2d::ui::Layout::create();

    // 设置 layout 的大小
    pLayout1->setSize(cocos2d::CCSizeMake(140,70));
    pLayout2->setSize(cocos2d::CCSizeMake(140,70));
    pLayout3->setSize(cocos2d::CCSizeMake(140,70));
    pLayout4->setSize(cocos2d::CCSizeMake(140,70));
    pLayout5->setSize(cocos2d::CCSizeMake(140,70));
    pLayout6->setSize(cocos2d::CCSizeMake(140,70));
    pLayout7->setSize(cocos2d::CCSizeMake(140,70));


    // 创建另一个 json 文件， 即一个按钮 （使用 cocosStudio 制作）
    ListViewItem *item1 = ListViewItem::create(1);
    ListViewItem *item2 = ListViewItem::create(2);
    ListViewItem *item3 = ListViewItem::create(3);
    ListViewItem *item4 = ListViewItem::create(4);
    ListViewItem *item5 = ListViewItem::create(5);
    ListViewItem *item6 = ListViewItem::create(6);
    ListViewItem *item7 = ListViewItem::create(7);
    ListViewItem *item8 = ListViewItem::create(8);
    ListViewItem *item9 = ListViewItem::create(9);
    ListViewItem *item10 = ListViewItem::create(10);
    ListViewItem *item11 = ListViewItem::create(11);
    ListViewItem *item12 = ListViewItem::create(12);
    ListViewItem *item13 = ListViewItem::create(13);

    // 设置按钮的位置 ( 实现两排的效果， 一个在前，一个在后 )
    item1->setPosition(ccp(0,0));
    item2->setPosition(ccp(70,0));

    // 将两个 按钮 都添加到一个 layout 中，使其实现在同一排的效果
    pLayout1->addChild(item1);
    pLayout1->addChild(item2);
    
    item3->setPosition(ccp(0,0));
    item4->setPosition(ccp(140,0));

    pLayout2->addChild(item3);
    pLayout2->addChild(item4);

    item5->setPosition(ccp(0,0));
    item6->setPosition(ccp(70,0));

    pLayout3->addChild(item5);
    pLayout3->addChild(item6);

    item7->setPosition(ccp(0,0));
    item8->setPosition(ccp(70,0));

    pLayout4->addChild(item7);
    pLayout4->addChild(item8);

    item9->setPosition(ccp(0,0));
    item10->setPosition(ccp(70,0));

    pLayout5->addChild(item9);
    pLayout5->addChild(item10);

    item11->setPosition(ccp(0,0));
    item12->setPosition(ccp(70,0));

    pLayout6->addChild(item11);
    pLayout6->addChild(item12);

    item13->setPosition(ccp(0,0));
    //item14->setPosition(ccp(70,0));

    pLayout7->addChild(item13);

    // 将 layout 依次添加到 ListView 中， 每调用一次这个方法，都是在下面在添加一列
    m_pListView->pushBackCustomItem(pLayout1);
    m_pListView->pushBackCustomItem(pLayout2);
    m_pListView->pushBackCustomItem(pLayout3);
    m_pListView->pushBackCustomItem(pLayout4);
    m_pListView->pushBackCustomItem(pLayout5);
    m_pListView->pushBackCustomItem(pLayout6);
    m_pListView->pushBackCustomItem(pLayout7);

    
    return true;
}

// ListView 的事件交互的方法
void   HelloWorld::scrollCallBack(CCObject* object , ScrollviewEventType type)
{
    switch (type)
    {
    case SCROLLVIEW_EVENT_SCROLL_TO_BOTTOM:
        {
            CCLOG("-- silent -- 1 -- SCROLLVIEW_EVENT_SCROLL_TO_BOTTOM");
        }
        break;
    case SCROLLVIEW_EVENT_SCROLLING:
        {
            CCLOG("-- silent -- 2 -- SCROLLVIEW_EVENT_SCROLLING");
        }
        break;
    case SCROLLVIEW_EVENT_BOUNCE_RIGHT:
        {
            CCLOG("-- silent -- 3 -- SCROLLVIEW_EVENT_BOUNCE_RIGHT");
        }
        break;

    default:
        break;
    }
}

void HelloWorld::menuCloseCallback(CCObject* pSender)
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT) || (CC_TARGET_PLATFORM == CC_PLATFORM_WP8)
    CCMessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
#else
    CCDirector::sharedDirector()->end();
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    exit(0);
#endif
#endif
}

ListViewItem.h

#ifndef __LISTVIEWITEM_SCENE_H__
#define __LISTVIEWITEM_SCENE_H__

#include "cocos2d.h"

// 使用 cocosStudio 1.6 制作的头文件
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;
using namespace cocos2d::ui; 


class ListViewItem : public cocos2d::ui::UILayout
{
public:
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init(int id);  

    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static ListViewItem* create(int id);

    // 按钮的回调函数
    void menuCallBack(cocos2d::CCObject*pSender,cocos2d::ui::TouchEventType type);


};

#endif // __LISTVIEWITEM_SCENE_H__

ListViewItem.cpp

#include "ListViewItem.h"
#include "cocos-ext.h"

USING_NS_CC_EXT;
USING_NS_CC;

ListViewItem* ListViewItem::create(int id)
{
    ListViewItem *item = new ListViewItem();
    if(item && item->init(id)){
        item -> autorelease();
        return item;
    }else{
        delete item;
        item = NULL;
        return NULL;
    }
}

// on "init" you need to initialize your instance
bool ListViewItem::init(int id)
{
    //////////////////////////////
    // 1. super init first
    if ( !cocos2d::ui::UILayout::init() )
    {
        return false;
    }

    cocos2d::ui::Widget*pWidget =GUIReader::shareReader()->widgetFromJsonFile("ListViewItem_1/ListViewItem_1.json");
    this->addChild(pWidget);
    this->setTouchEnabled(true);

    cocos2d::ui::UIButton *button = dynamic_cast<cocos2d::ui::UIButton*>(pWidget->getChildByName("dybtn_buttonitem"));
    button->setTouchEnabled(true);
    button->addTouchEventListener(this, SEL_TouchEvent(&ListViewItem::menuCallBack));

    cocos2d::ui::UILabel *m_pLabel = dynamic_cast<cocos2d::ui::UILabel*>(button->getChildByName("dylab_numbutton"));

    char str[5];
    sprintf(str, "%d", id);
    m_pLabel->setText(str);
    m_pLabel->setColor(ccc3(255, 0, 0));
    

    return true;
}

void ListViewItem::menuCallBack(cocos2d::CCObject*pSender,cocos2d::ui::TouchEventType type){

    // 获取被点击的那个按钮
    cocos2d::ui::UIButton *button = dynamic_cast<cocos2d::ui::UIButton*>(pSender);
    cocos2d::ui::UILabel *m_pLabel = dynamic_cast<cocos2d::ui::UILabel*>(button->getChildByName("dylab_numbutton"));
    std::string strButtonNum = m_pLabel->getName();

    switch (type)
    {

    case cocos2d::ui::TouchEventType::TOUCH_EVENT_BEGAN:
        {
            CCLOG("-- silent -- began -- menuCallBack ---- %s", strButtonNum.c_str());
        }
        break;
    case cocos2d::ui::TouchEventType::TOUCH_EVENT_MOVED:
        {

        }
        break;
    case cocos2d::ui::TouchEventType::TOUCH_EVENT_ENDED:
        {
            CCLOG("-- silent -- ended -- menuCallBack ---- %s", strButtonNum.c_str());
        }
        break;
    case cocos2d::ui::TouchEventType::TOUCH_EVENT_CANCELED:
        {

        }
        break;

    default:
        break;
    }

}