Cocos2dx中CCScrollview的修改方案探讨

本文介绍了OwenTsang基于Cocos2dx开发的OBScrollview组件，提供了动态调节触摸事件优先级、加入滚动条等功能，并通过示例展示了如何在Cocos2dx项目中集成和使用OBScrollview。通过OBScrollViewDelegate接口处理点击事件，实现更加灵活的滚动交互体验。

~~~~本文章为 OwenTsang(fromOld-Boys-Studio)原创,转载务必在明显处注明：

原文连接：http://blog.youkuaiyun.com/owen_c/article/details/9074361

学习了cocos2dx也有点时间了，用到页面滚动的时候，用起来有点不顺心，故自己下定决心，好好总结了一下，尽量地向UIKit中的UIScrollview效果靠拢。好了，闲话勿叙，我们直入正题吧。

我将此命名为OBScrollview，本文是居于cocos2d-2.1rc0-x-2.1.2-hotfix中的CCScrollview的基础改写的，测试请注意环境。

一 OBScrollview二新增功能介绍

1 动态调节触摸事件优先级，并通过委托通知外界点击事件

enum {//* priority used by the OBScrollView for the event handler

kOBScrollViewHandlerPriority = kCCMenuHandlerPriority-1, };

OBScrollView的默认触摸事件优先级设置为 kOBScrollViewHandlerPriority，优先级比kCCMenuHandlerPriority还高，所以默认情况下，在此OBScrollview中CCMenuItem是不被响应的，但你也可以setTouchPriority来改变。

为什么在此设计比CCMenuItem还高的优先级呢？因为本文更倾向于使用下面的方法来处理点击事件。OBScrollViewDelegate在CCScrollViewDelegate的基础上，增加一个非纯虚函数，

virtual void scrollViewDidClick(CCNode* clickNode){CC_UNUSED_PARAM(clickNode);}

clickNode是OBScrollView的孩子结点，当没有滚动事件产生时的纯点击事件会通知此委托，让调用者去处理一些简单的点击响应事件。

2 加入滚动条（OBScroller）功能

OBScroller有两种方向，水平方向（kOBScrollViewDirectionHorizontal）放在最底端和垂直方向（kOBScrollViewDirectionVertical）位置在最右端。

21）可加入背景 void setScrollerBg(const char* bgFile);

22）两种方式的加入实际的滚动小条，

221）void setSpriteScroller(const char* scrollerFile); 此为普通的Sprite

222）void setSpriteScroller(const char* scrollerFile, CCRect rect, CCRect capInsets); 这个设置了一个高级货，CCScale9Sprite,这个能兼容任何形态的滚动条

二测试示例

[cpp]view plaincopy 
   
 void HelloWorld::testBothDirectionScrollview()  
 {  
     CCSize viewSize;  
     CCNode* container = createBothDirectionContainer(viewSize); ///构造container  
     OBScrollView* scrollView = OBScrollView::create(viewSize,container);///构造OBScrollView  
     scrollView->setDirection(kOBScrollViewDirectionBoth);///设置方向为水平纵线都可以滚动  
     scrollView->setDelegate(this);///设置托管  
     scrollView->setPosition( ccp(CCDirector::sharedDirector()->getWinSize().width / 4,  
                                  CCDirector::sharedDirector()->getWinSize().height/ 6));  
     this->addChild(scrollView);  
     scrollView->setContentOffset(ccp(0,scrollView->minContainerOffset().y));///设置默认显示左下角的内容  
       
     OBScroller* scroller = new OBScroller(kOBScrollViewDirectionVertical,CCSizeMake(verticalScrollerWidth, viewSize.height));///构造垂直的OBScroller  
     scroller->setSpriteScroller("scroller9.png",CCRectMake(0,0,20,40),CCRectMake(6, 6, 6, 6));///设置滚动小条CCScale9Sprite形式   
     //    scroller->setSpriteScroller("Scroller.png");///设置滚动小条CCSprite形式   
     scrollView->setScroller(scroller); ///将scroller放入scrollView的右端   
     scroller->release();///  
       
     scroller = new OBScroller(kOBScrollViewDirectionHorizontal,CCSizeMake(viewSize.width, horizontalScrollerHeight));///构造水平的OBScroller  
     scroller->setSpriteScroller("horizontalScroller9.png",CCRectMake(0,0,40,20),CCRectMake(6, 6, 6, 6));///设置滚动小条CCScale9Sprite形式   
     //    scroller->setSpriteScroller("horizontalScroller.png");///设置滚动小条CCSprite形式   
     scrollView->setScroller(scroller);///将scroller放入scrollView的底端  
     scroller->release();  
 }  
   
 void HelloWorld::scrollViewDidClick(CCNode* clickNode)  
 {  
 CCLOG("click node id = %d",clickNode->getTag());  
 }  