Cocos2dx中CCScrollview的修改方案探讨(OBScrollView & OBScroller & TestDemo)

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

            原文连接：http://blog.csdn.net/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,这个能兼容任何形态的滚动条 

二 测试示例 

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

三 源代码

      github地址：https://github.com/OwenTsang/TestOBScrollview

四 效果图

    初始效果图

    

    点击之后效果图：
     

    好了，我的第一篇blog总算写好了，欢迎拿砖轻拍，注意是轻拍～～

   ～～～～～～～～～～～～～转载请注明出处喔～～～～～～～～～～～～～～～

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

            原文连接：http://blog.csdn.net/owen_c/article/details/9074361