CODEWITHSUNDEEP
c++listviewcocos2d-xcocos2d-x-3.0
alc77
alc77

Reputation: 409

How to determine the end of ScrollView in Cocos2d-x?

Context
I make a custom leaderboard through ui::ListView. Each element of leaderboard is the ui::Button. When the user taps on some position, he receives detailed statistics on this position in the leaderboard. I’m using Cocos2d-x ver. 3.8.1. For clarity, here’s my code for this: 

    auto lvLeaderboard = ListView::create();
    for (int j = 0; j < linesCount; j++)
    {
        Button* btnSingleUser = Button::create("btn.png”);
        btnSingleUser->setTag(j + offsetResult);
        btnSingleUser->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
            switch (type)
            {
                case ui::Widget::TouchEventType::ENDED:
                {
                    Button* currentButton = (Button*)sender;
                    this->pressedUserStatistic(currentButton->getTag());
                    break;
                }
                default:
                    break;
            }
        });
    lvLeaderboard->pushBackCustomItem(btnSingleUser);
    …
    }
    lvLeaderboard->setItemsMargin(0);
    lvLeaderboard->setGravity(ListView::Gravity::CENTER_HORIZONTAL);
    lvLeaderboard->setSize(Size(winSize.width, _height));
    lvLeaderboard->setPosition(Point(0, 0));
    listContainer->addChild(lvLeaderboard);

All works fine, I can scroll the leaderboard, and see the statistics of each user to whom I tap.
Problem
But there’s one problem. I need to load the next portion of data, when the user reaches the end of the list (I download the results on 50 lines at a time). But I can’t to find the variable, method or handler, which works when the user reaches the first or last element of the ListView.
I tried to do
ui:ListView inherits ScrollView, so I tried to find some methods in both of them. Everything I tried, let not the result I want.
Question
How can I determine when the user reaches the first and last element in ListView? Or, if this not possible, how to determine the end and beginning of the ScrollView?

Upvotes: 0

Views: 1848

Answers (2)

Hayk Petrosyan
Hayk Petrosyan

Reputation: 373

You can add eventListener to your scrollView and detect then check like this

scrollView->addEventListener([](Ref *r, ScrollView::EventType type) {
  if (type == ScrollView::EventType::SCROLL_TO_BOTTOM) {// SCROLL_TO_TOP
    // do what you need to do 
  }
});

Upvotes: 0

bunty
bunty

Reputation: 629

You can schedule an update method or run a repeat forever action to call a method continually to check whether the bottom item of list view has last tag (in your case tag-10 == linesCount-1). You need to take reference of lvLeaderboard globally to have access to below function.

static Vec2 calculateItemPositionWithAnchor(Widget* item, const Vec2& itemAnchorPoint)
{
    Vec2 origin(item->getLeftBoundary(), item->getBottomBoundary());
    Size size = item->getContentSize();
    return origin + Vec2(size.width * itemAnchorPoint.x, size.height * itemAnchorPoint.y);
}

static Widget* findClosestItem(const Vec2& targetPosition, const Vector<Widget*>& items, const Vec2& itemAnchorPoint, ssize_t firstIndex, float distanceFromFirst, ssize_t lastIndex, float distanceFromLast)
{
    CCASSERT(firstIndex >= 0 && lastIndex < items.size() && firstIndex <= lastIndex, "");
    if (firstIndex == lastIndex)
        return items.at(firstIndex);

    if (lastIndex - firstIndex == 1)
    {
        if (distanceFromFirst <= distanceFromLast)
            return items.at(firstIndex);
        else
            return items.at(lastIndex);
    }

    // Binary search
    ssize_t midIndex = (firstIndex + lastIndex) / 2;
    Vec2 itemPosition = calculateItemPositionWithAnchor(items.at(midIndex), itemAnchorPoint);
    float distanceFromMid = (targetPosition - itemPosition).length();
    if (distanceFromFirst <= distanceFromLast)
        return findClosestItem(targetPosition, items, itemAnchorPoint, firstIndex, distanceFromFirst, midIndex, distanceFromMid);
    else
        return findClosestItem(targetPosition, items, itemAnchorPoint, midIndex, distanceFromMid, lastIndex, distanceFromLast);
}

static Widget* getBottommostItemInCurrentView(ListView* lvLeaderboard)
{
    const Vec2& positionRatioInView = Vec2::ANCHOR_MIDDLE_BOTTOM;
    const Vec2& itemAnchorPoint = Vec2::ANCHOR_MIDDLE;

    // Calculate the target position
    Size contentSize = lvLeaderboard->getContentSize();
    Vec2 targetPosition = -lvLeaderboard->getInnerContainerPosition();
    targetPosition.x += contentSize.width * positionRatioInView.x;
    targetPosition.y += contentSize.height * positionRatioInView.y;

    // Find the closest item through binary search
    ssize_t firstIndex = 0;
    Vec2 firstPosition = calculateItemPositionWithAnchor(lvLeaderboard->getItems().at(firstIndex), itemAnchorPoint);
    float distanceFromFirst = (targetPosition - firstPosition).length();

    ssize_t lastIndex = lvLeaderboard->getItems().size() - 1;
    Vec2 lastPosition = calculateItemPositionWithAnchor(lvLeaderboard->getItems().at(lastIndex), itemAnchorPoint);
    float distanceFromLast = (targetPosition - lastPosition).length();

    return findClosestItem(targetPosition, lvLeaderboard->getItems(), itemAnchorPoint, firstIndex, distanceFromFirst, lastIndex, distanceFromLast);
}

void HelloWorld::checkIfAtEnd() {

    Button* bottom = (Button*)getBottommostItemInCurrentView(lvLeaderboard);

    CCLOG("Bottom Button Having = %d", bottom->getTag());
    if (bottom->getTag()-10 == linesCount-1) {
        CCLOG("Bottom item reached..");
    }
}

Following code snippet calls above function continually after specified seconds, here 0.5.

DelayTime* dl = DelayTime::create(0.5);
CallFunc* cb = CallFunc::create(CC_CALLBACK_0(HelloWorld::checkIfAtEnd, this));
Sequence* seq = Sequence::create(dl, cb, nullptr);
this->runAction(RepeatForever::create(seq));

Upvotes: 1

Related Questions