CCScrollView with CCControlButton. How to control the touch area?

Question

I have CCScrollView with container with CCControlButtons, when the buttons scroll out of the visible CCScrollView area, They are also can be touched too. How can I control the area ?

Answer 1

My problems: There is a scrollView with many buttons (items). Above it there are 2 function buttons (return, start).

1. When I scroll down item buttons overlie function buttons. When I swallow all touches above my scrollview I will lose my function buttons. So I have to find another solution.

2. When I start draging scroll view a item button is pressed. When I ended the button action will be execute. This is very annoying.

But there is the solution. I have created new CCControlButton. It checks whether was clicked outside scrollview or was dragged. The button is used for items buttons.

bool ControlButtonForScrolling::checkIfTouchIsInsideScrollView(CCTouch *pTouch)
{
    CCPoint touchLocation = pTouch->getLocation(); // Get the touch position
    touchLocation = _scrollView->getParent()->convertToNodeSpace(touchLocation);
    CCRect bBox=_scrollView->boundingBox();
    bool result = bBox.containsPoint(touchLocation);
    return result;
}

bool ControlButtonForScrolling::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)
{
    bool isInside = this->checkIfTouchIsInsideScrollView(pTouch);
    if (isInside) {
        return CCControlButton::ccTouchBegan(pTouch, pEvent);
    }
    else
    {
        return false;
    }
}

void ControlButtonForScrolling::ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent)
{
    CCControlButton::ccTouchMoved(pTouch, pEvent);
    _scrollWasDragged = true; // information about dragging is stored to prevent sending action
}

void ControlButtonForScrolling::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)
{
    // this method is a copy of CCControlButton::ccTouchEnded except lines with _scrollWasDragged
    m_eState = CCControlStateNormal;
    m_isPushed = false;
    setHighlighted(false);

    if (!_scrollWasDragged)
    {
        if (isTouchInside(pTouch))
        {
            sendActionsForControlEvents(CCControlEventTouchUpInside);
        }
        else
        {
            sendActionsForControlEvents(CCControlEventTouchUpOutside);
        }
    }
    _scrollWasDragged = false;
}

Answer 2

Inspired by Tomasz's answer, I created an alternative solution, also inheriting from CCControlButton:

bool ScrollableButton::isTouchInside(CCTouch *touch) {
  return !dragging && CCControlButton::isTouchInside(touch);
}

bool ScrollableButton::ccTouchBegan(CCTouch *touch, CCEvent *event) {
  dragging = false;
  return CCControlButton::ccTouchBegan(touch, event);
}

void ScrollableButton::ccTouchMoved(CCTouch *touch, CCEvent *event) {
  if (!dragging && ccpDistance(touch->getLocation(), touch->getStartLocation()) > 25) {
    dragging = true;
  }
  CCControlButton::ccTouchMoved(touch, event);
}

void ScrollableButton::ccTouchEnded(CCTouch *touch, CCEvent *event) {
  CCControlButton::ccTouchEnded(touch, event);
  dragging = false;
}

void ScrollableButton::ccTouchCancelled(CCTouch *touch, CCEvent *event) {
  CCControlButton::ccTouchCancelled(touch, event);
  dragging = false;
}

The secret sauce is the override of the isTouchInside function, which will return false even if the touch is inside, but was moved. This way, the button will also release its "zoomed" state as soon as you start scrolling.

It also adds a small tolerance factor, so if the touch moves just a little, it's still considered a "click". This factor is hardcoded at 25 in the example above.