Cocos2dx 中 ListView 列表的使用

创建ListView:

auto list = ListView::create();
list->setDirection(ui::ScrollView::Direction::VERTICAL);
list->setBounceEnabled(true);
list->setBackGroundImage("green_edit.png");
list->setGlobalZOrder(200);
list->setBackGroundImageScale9Enabled(true);
list->setContentSize(Size(100, 130));
list->setPosition(Vec2(170.0f, 100.0f));
list->addEventListener((ui::ListView::ccListViewCallback) CC_CALLBACK_2(ListViewScene::selectedItemEvent,this));
list->addEventListener((ui::ListView::ccScrollViewCallback) CC_CALLBACK_2(ListViewScene::selectedItemEventScrollView, this));
list->setScrollBarPositionFromCorner(Vec2(7, 7));
this->addChild(list);

初始化数据：

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->setContentSize(default_button->getContentSize());
default_button->setPosition(Vec2(default_item->getContentSize() / 2.0f));
default_item->addChild(default_button);//initial the data
for (int i = 0; i < 20; ++i) {Widget *item = default_item->clone();item->setTag(i);Button *btn = (Button *) item->getChildByName("Title Button");std::string ccstr = StringUtils::format("item_%d", i);btn->setTitleText(ccstr);list->pushBackCustomItem(item);
}

ListView 添加选中监听

void ListViewScene::selectedItemEvent(Ref *pSender, ListView::EventType type) {switch (type) {case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_START: {ListView *listView = static_cast<ListView *>(pSender);auto item = listView->getItem(listView->getCurSelectedIndex());break;}case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_END: {ListView *listView = static_cast<ListView *>(pSender);auto item = listView->getItem(listView->getCurSelectedIndex());break;}default:break;}
}

最终展示效果如图：

 

ScrollView 实现两列的滑动列表：

ScrollView 默认的布局方式是从下往上布局，跟Android 默认布局方式刚好相反。

ScrollView 分为外部大小和内部大小，分别通过scrollView->setContentSize() , scrollView->setInnerContainerSize()，

外部大小设置为屏幕的高度，内部大小设置为所有布局的总高度。

创建ScrollView:

ScrollView *scrollView = ScrollView::create();
_scrollView = scrollView;
scrollView->setAnchorPoint(Vec2(1, 1));
float scrollViewHeight = nationBg->getPosition().y - nationBg->getContentSize().height * 0.5 - origin.y - 17;
scrollView->setContentSize(Size(visibleSize.width, scrollViewHeight));//设置窗口大小
scrollView->setDirection(ScrollView::Direction::VERTICAL);//方向
scrollView->setScrollBarEnabled(false);//是否显示滚动条
scrollView->setBounceEnabled(true);
scrollView->setPosition(Vec2(origin.x + visibleSize.width, nationBg->getPosition().y - nationBg->getContentSize().height * 0.5 - 17));
this->addChild(scrollView, 0);

 

初始化数据：

void ScrollViewScene::showCardView(){Vec2 origin = Director::getInstance()->getVisibleOrigin();Size visibleSize = Director::getInstance()->getVisibleSize();int cardCount = 5;float contentSizeCardsHeight = (cardCount + 1)/2 * 80;float contentSizeHeight = contentSizeCardsHeight < visibleSize.height ? visibleSize.height : contentSizeCardsHeight;_scrollView->setInnerContainerSize(Size(visibleSize.width, contentSizeHeight));for (int i = 0; i < cardCount; i++) {int row = (i / 2);int col = (i % 2);float x = col * 60 + 25;float y = contentSizeHeight - row * 80;Sprite *card3Bg = Sprite::create("text_bg.png");card3Bg->setAnchorPoint(Vec2(0, 1));card3Bg->setContentSize(Size(50, 70));card3Bg->setCenterRectNormalized(Rect(0.4, 0.2, 0.2, 0.2));card3Bg->setPosition(Vec2(x, y));_scrollView->addChild(card3Bg);}
}

显示效果如下：