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);
添加的是：每调用一次就添加一行，下次再调用的时候就将其添加到下一行(本代码是竖直中心对齐)
代码：(未优化)
1 HelloWorld.h 2 3 #ifndef __HELLOWORLD_SCENE_H__ 4 #define __HELLOWORLD_SCENE_H__ 5 6 #include "cocos2d.h" 7 8 // 使用 cocosStudio 1.6 制作的头文件 9 #include "cocos-ext.h" 10 USING_NS_CC; 11 USING_NS_CC_EXT; 12 using namespace cocos2d::ui; 13 14 class HelloWorld : public cocos2d::CCLayer 15 { 16 public: 17 // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone 18 virtual bool init(); 19 20 // there's no 'id' in cpp, so we recommend returning the class instance pointer 21 static cocos2d::CCScene* scene(); 22 23 // a selector callback 24 void menuCloseCallback(CCObject* pSender); 25 void scrollCallBack(CCObject* object , ScrollviewEventType type); 26 27 // implement the "static node()" method manually 28 CREATE_FUNC(HelloWorld); 29 }; 30 31 #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 }
1 ListViewItem.h 2 3 #ifndef __LISTVIEWITEM_SCENE_H__ 4 #define __LISTVIEWITEM_SCENE_H__ 5 6 #include "cocos2d.h" 7 8 // 使用 cocosStudio 1.6 制作的头文件 9 #include "cocos-ext.h" 10 USING_NS_CC; 11 USING_NS_CC_EXT; 12 using namespace cocos2d::ui; 13 14 15 class ListViewItem : public cocos2d::ui::UILayout 16 { 17 public: 18 // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone 19 virtual bool init(int id); 20 21 // there's no 'id' in cpp, so we recommend returning the class instance pointer 22 static ListViewItem* create(int id); 23 24 // 按钮的回调函数 25 void menuCallBack(cocos2d::CCObject*pSender,cocos2d::ui::TouchEventType type); 26 27 28 }; 29 30 #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; } }
