Cocos2dx - ScrollView，ListView

最新推荐文章于 2024-02-15 09:14:44 发布

shouniezhe

最新推荐文章于 2024-02-15 09:14:44 发布

阅读量1k

点赞数

分类专栏： cocso2dx 3.x版本学习

本文链接：https://blog.csdn.net/shouniezhe/article/details/94405017

版权

cocso2dx 3.x版本学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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);
    }
}

显示效果如下：