【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