首页 > 代码库 > cocos2dx中的ScrollView

cocos2dx中的ScrollView

ScrollView由视窗区域(裁剪区域)和内容区域组成,内容区域叫innerContainer。

视窗区域范围:get/setContentSize

内容区域:get/setInnerContainerSize,

ScrollView怎样排版?对ScrollView而言,innerContainer就是一个大矩形,这个矩形的范围就是滚动的范围,如果内容宽大于视窗 innerContainer则可以在x向移动。同理决定是否可在y向移动。

移动范围是多少?移动范围是0对应innerContainer的上(左)边缘位于视窗区域的上(左)边缘,1对应innerContainer的下(右)边缘位于视窗区域的下(右)边缘。

ScrollView中的物体怎样定位?0,0点是innerContainer的anchor点,不经过设置的话是在其中心。

 

因此,正确的ScrollView中的内容填充是这样的:

1 计算好内容的大小(宽高)

2 对内容进行排布,anchor为(0.5, 0.5)时,在(-0.5大小,0.5大小)的范围内排布。

3 排布完成,调用scrollView->setInnerContainerSize将内容大小设置进去。

 

ScrollView中的按钮不触发点击事件的方法:

1 设置isSwallowTouch(false),否则在按钮上拖动不会拖动ScrollView。

2 设置点击事件不要用addClickHandler,而是addTouchEventListener,用lambda表达式这么写:

bool moved = false;
btn->addTouchEventListener([this, moved](Ref*, Widget::TouchEventType type) mutable {
            switch(type)
            {
                case Widget::TouchEventType::BEGAN:
                    moved = false;
                    break;
                case Widget::TouchEventType::MOVED:
                    moved = true;
                    break;
                case Widget::TouchEventType::ENDED:
                    if(!moved)
                        this->onClick();
                    break;
                default:
                    break;
            }
});

 

cocos2dx中的ScrollView