【Cocos2d-x for WP8 学习整理】（3）CCScrollView 实现捕鱼达人一样的场景选择界面

UI 界面一般是游戏里比较独立的地方，因为游戏引擎一般都比较注意基础的功能封装，很少会关注UI，但是 UI 确是玩家第一眼看到的效果，因此能否实现一个美观的UI对于提升游戏的整体美观有着很大的帮助。

幸运的是cocos2d-x意识到了这个问题，自从2.0版本之后逐步加入了几个常用控件，在这里我们详细说一下 CCScrollView 。

CCScrollView 经常被用在场景选择界面里，以《捕鱼达人》为例，几个场景各个占据一个屏幕的宽度，滑动即可切换不同的场景。

   

CCScrollView 类文件位于 cocos2d-x 目录下的 extensions\GUI\ccscrollview ，默认新项目是没有添加对它的引用的，如果项目要使用的话需要手动添加对 libExtensions 的引用，具体的方法参加上篇。 

看源码可知，CCScrollView 继承自 CCLayer ，它内部维护了一个CCNode* 类型的Container,它的实现原理是将要展示的元素都添加到Container里，然后在响应触摸事件的代码里不断的修改 Container的位置，

这样便达到了滑动展示的效果。

 

使用方法： 

bool GalleryLayer::init()
{
     bool bRet =  false;
     do
    {
       CC_BREAK_IF( !CCLayer::init() );

       m_nCurPage =  1;

       CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
       CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

       CCLayer *pLayer = CCLayer::create();

        char helpstr[ 30] = { 0};
        for ( int i =  1; i <=  3; ++ i)
       {
           memset(helpstr,  0,  sizeof(helpstr));
           sprintf(helpstr, " bg_%02d.png ",i);

           CCSprite *pSprite = CCSprite::create(helpstr);

           pSprite->setScale(MIN(visibleSize.width /  960, visibleSize.height /  640));

           pSprite->setPosition(ccp(visibleSize.width * (i- 0.5f), visibleSize.height /  2));
           pLayer->addChild(pSprite);
       }
       
       m_pScrollView = CCScrollView::create(CCSizeMake(visibleSize.width, visibleSize.height), pLayer);
       m_pScrollView->setContentOffset(CCPointZero);
        // m_pScrollView->setTouchEnabled(false);

       m_pScrollView->setDelegate( this);
       m_pScrollView->setDirection(kCCScrollViewDirectionHorizontal);

       pLayer->setContentSize(CCSizeMake(visibleSize.width* 3, visibleSize.height));

        this->addChild(m_pScrollView);

       CCSpriteFrameCache *pCache =  CCSpriteFrameCache::sharedSpriteFrameCache();
   
       pCache->addSpriteFrame(CCSpriteFrame::create( " button_normal.png ",CCRectMake( 0,  0,  64,  64)), " button_normal.png ");
       pCache->addSpriteFrame(CCSpriteFrame::create( " button_selected.png ",CCRectMake( 0,  0,  64,  64)), " button_selected.png ");

        for ( int i =  1; i <=  3; ++ i)
       {
           CCSprite *pPoint = CCSprite::createWithSpriteFrameName( " button_normal.png ");
           pPoint->setTag(i);
           pPoint->setPosition(ccp( origin.x + (visibleSize.width -  3 * pPoint->getContentSize().width)/ 2 + pPoint->getContentSize().width * (i- 1), origin.y +  30));
            this->addChild(pPoint);
       }

        CCSprite *pPoint = (CCSprite *) this->getChildByTag( 1);
        pPoint->setDisplayFrame(pCache->spriteFrameByName( " button_selected.png "));
    
        bRet =  true;
    }
     while( 0);

     return bRet;
}

但是对于场景选择来说，还需要个滑动完成自动定位的功能，自动的将当前的内容滚动到屏幕的中央。CCScrollView提供了一个手动设置位移的方法，

void setContentOffset(CCPoint offset, bool animated = false); 

我们只需要在CCScrollView所在的Layer里的 touchEnded事件里调用该函数，然后传入计算出来的值即可。

 

实现方法： 

void GalleryLayer::adjustScrollView( float offset)
{
     // 关掉控件自己的调整.

    //这个很关键，否者会冲突.
    m_pScrollView->unscheduleAllSelectors();

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

    CCSpriteFrameCache *pCache =  CCSpriteFrameCache::sharedSpriteFrameCache();

    CCSprite *pPoint = (CCSprite *)this->getChildByTag(m_nCurPage);
    pPoint->setDisplayFrame(pCache->spriteFrameByName("button_normal.png"));

    if (offset < 0)
    {
        m_nCurPage ++;
    }
    else
    {
        m_nCurPage --;
    }

    if (m_nCurPage <1)
    {
        m_nCurPage = 1;
    }
    else if(m_nCurPage > 3)
    {
        m_nCurPage = 3;
    }

    pPoint = (CCSprite *)this->getChildByTag(m_nCurPage);
    pPoint->setDisplayFrame(pCache->spriteFrameByName("button_selected.png"));

    CCPoint  adjustPos = ccp(origin.x - visibleSize.width * (m_nCurPage-1), 0);
    m_pScrollView->setContentOffset(adjustPos, true);
}

 

此外，CCScrollView还提供设置Delegate，类定义如下：

class CCScrollViewDelegate
{
public:
     virtual ~CCScrollViewDelegate() {}
     virtual  void scrollViewDidScroll(CCScrollView* view) =  0;
     virtual  void scrollViewDidZoom(CCScrollView* view) =  0;

}; 

我们可以通过 setDelegate 方法传入接受响应的对象，每当滑动或者放大的时候，就会调用响应的方法。可以在接受委托的对象里实现各种效果。

 

示例代码下载：

http://download.csdn.net/detail/u010810951/6441983

参考文章：

http://codingnow.cn/cocos2d-x/1024.html

 

欢迎有兴趣的童鞋加入Cocos2d-x 开发群  qq: 264152376